Customize gift cards images

This article will help you customize the look of a gift card that customers receive via email. You can also customize the gift card product page in your storefront.

Caution

Although you can do this without significant knowledge of HTML or Liquid, you must follow the instructions carefully and make changes exactly as specified. As a precaution, make a backup of your theme before you begin.

Uploading a new image for your gift card

To upload your new gift card image to your Assets folder:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. On the Edit HTML/CSS page, click the Assets folder to expand and view its contents.

  4. Click Add A New Asset.

    Add new asset
  5. Click Choose File to browse to the new gift card image on your computer, and upload it. Try to use a simple, memorable filename, for example blue-giftcard.png.

  6. Click Upload asset. You should see the new gift card images listed in your Assets folder. Take note of the filename's extension (.png or .jpg.)

    Asset uploaded
  7. Now you need to edit your gift card template file so it uses your new image.

Editing the gift card template file so it uses your new image

After you've uploaded a new image for your gift cards, you need to add the filename for the new image to gift_card.liquid:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Open the gift_card.liquid template file.

    Open gc liquid
  4. Find the line that refers to the gift card image (look for a .jpg or a .png file, or a reference to Gift card illustration.)

    In most themes, the line looks similar to this:

    Custom giftcard

    Notice the asset_url filter in the line of code:

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

    In other themes, you'll see a line that looks like this:

    Default giftcard

    Notice that the filter used here is shopify_asset_url:

    
    <img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="Gift card illustration">
    
    
  5. The filter shopify_asset_url won't work with your own uploaded images. Delete shopify_ from this line of code, so the filter now reads asset_url.

  6. Replace the current gift card filename (for example, card.gift-card.jpg or gift-card/card.jpg) with the filename of the image you uploaded (for example, blue-giftcard.png.)

    Note

    Make sure you type the correct filename extension (.jpg or .png). Don't delete the single quotes around the filename.

    The complete line of code for the gift card image should now read:

    
    <img src="{{ 'your-new-image-filename' | asset_url }}" alt="Gift card illustration">
    
    
  7. Click Save. You can now preview your gift card to make sure you're happy with it.

Did you know?

In addition to changing the gift card image, you can make more complex changes to the gift card template, although these require a greater level of expertise.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free