Online store - Customize your online gift card image

[TyW]

Caution: This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

---

You can customize the image used for the online gift cards that your customers receive via email. Changing the image allows you to add your own branding and change the look and feel of the gift card. By default, the online gift card looks like this:

Upload a new image for your gift card

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, click Add a new asset:
4. Click Choose File to browse to the new gift card image on your computer, and upload it. Use a simple filename, for example blue-giftcard.png
   
   Tip: The recommended size for gift card images is 950px by 550px.
   
   
5. Click Upload asset. The new gift card image will appear in your Assets directory. Take note of the file extension (.png or .jpg).
   
   
   
   

Edit the gift card template file so that it uses your new image

1. In the Templates directory, click gift_card.liquid.
   
   
2. Find the line of code that refers to the gift card image by looking for either a .jpg or a .png file. In most themes, the code looks similar to this:
   
   
   
   Note the asset_url filter used in the line of code:
   
   

   <img src="{{ 'card.gift-card.jpg' | asset_url }}" alt="Gift card illustration">

   
   In some themes, you might see a line that looks like this instead:
   
   
   
   Note that the filter used in this case is shopify_asset_url:
   
   

   <img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="Gift card illustration">

3. The filter shopify_asset_url won't work with your own uploaded images. If necessary, delete shopify_ from the line of code, so that the filter now reads asset_url.
   
   
4. In the same line of code, replace the default gift card file name with the name of your uploaded custom image. For example, if you named your custom image blue-giftcard.png, then replace card.gift-card.jpg or gift-card/card.jpg with blue-giftcard.png.
   
   Note: Make sure that you use the correct file extension (.jpg or .png), and keep the single quotes around the file name.
   
   Your code should look something like this:
   
   

   <img src="{{ 'your-new-image-filename' | asset_url }}" alt="Gift card illustration">

5. Click Save.

Preview your new gift card image

1. Navigate to your Notifications page in the admin.
2. Click on the Gift card created template, and then click on the ... button on the right side of the toolbar. Select either Send test email or Preview to check out your new online gift card: