Customizing gift card pages and notifications

Digital gift cards and gift card products are displayed in email notifications, and on your storefront. You can customize your theme to adjust your gift card page and gift card product pages to match your brand, and include additional information, such as a custom message, a custom gift card image, or a gift card recipient.

If you sell physical gift cards using Shopify POS, then your can order customized physical gift cards from the Shopify Hardware Store in supported countries. Digital gift cards are displayed on your storefront theme in the following areas:

  • gift card products are listed on your online store and use your theme's product page
  • the gift card page, which contains the details of a created gift card, is a page template in your theme

Considerations for customizing gift cards

Before you customize your gift cards, review the following considerations:

  • You can customize your theme to change the style and information that's included on the gift card page, and the gift card product pages. Your theme's structure and available customizations depend on the theme that you use. Check your theme's documentation or contact your theme developers to learn more about your theme's settings.
  • You can customize your gift card email notification from the notification settings of your Shopify admin. The files that make up your notifications contain HTML, CSS, and Liquid, Shopify's templating language. To edit the notification templates, you need to be familiar with HTML, CSS, and Liquid.
  • The 16 character gift card redemption codes are randomized, and can't be customized.

Customizing a gift card product

You can customize the details of a gift card product by editing the product details or variant details from the Products page of your Shopify admin.

The product listing page for a gift card product is part of your theme's product page. To adjust the product page for a gift card product, you can customize your theme's product page.

Customizing the gift card page

When you create a gift card, or a customer orders a gift card product, the details of that gift card are included on the gift card page, such as the gift card value or balance and redemption code.

The gift card page is part of your storefront theme. You can customize your theme to add or adjust the style and information that's included on the gift card page. For example, you can add a custom gift card image.

The value of the gift card and the gift card redemption code can't be customized.

Customizing gift card notifications

When you fulfill an order with a gift card, the customer or gift card recipient receives a notification email. You can view and update your store's gift card notification templates from the Customer notifications page of your Shopify admin.

The following gift card notifications are available:

  • New gift card: Sent to the customer or recipient when the gift card product in an order is fulfilled, or when you send a created gift card.
  • Gift card receipt: Sent to the recipient when your theme supports adding a gift card receipient, and your customer adds a recipient to a gift card product purchase.

Learn more about editing notification templates.

Replace the default gift card image in notification emails

You can replace the default gift card image in your gift card notifications by editing your email notification template. Before you can replace the default gift card image, you need to upload your custom gift card image to the files section of your Shopify admin.

The recommended size for a gift card image is 950 px by 550 px. You can also use an aspect ratio of 5:3 or a minimum size of 450 px by 270 px.

Steps:

  1. From your Shopify admin, go to Settings > Notifications.
  2. Click Customer Notifications.
  3. In the Gift cards section, click the **New gift card* or Gift card receipt.
  4. Click Edit code.
  5. In the Email body (HTML) area, find this code block: <img src="gift-card/card.jpg" alt="Gift card image" width="240" height="160">.
  6. Replace gift-card/card.jpg with the name of your image file. Make sure to keep surrounding quotation marks, and to include the image file extension, for example, .png or .jpg.
  7. Optional: Click Preview to preview your changes.
  8. Click Save.

Adding a gift card recipient to your theme

Some themes support the ability to add recipient information to a gift card. Check your theme's documentation or contact your theme developers to learn more about your theme's settings.

You can also add recipient fields to your gift card product by customizing your theme code and email notifications.

Can't find answers you're looking for? We're here to help you.