Customize your online gift card image

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:

Default gift card

Upload a new image for your gift card

  1. Find the theme you want to edit, click Actions, and then click Edit code.

  2. In the Assets directory, click Add a new asset:

    Add new asset
  3. 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.

  4. Click Upload asset. The new gift card image will appear in your Assets directory. Take note of the file extension (.png or .jpg).

    Asset uploaded

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:

    Custom giftcard

    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:

    Default gift card image

    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:

Preview gift card

Want to discuss this page?

Visit the Shopify Community