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:
   
   

[Matt_BCT]

Hi, This worked great!  Thank you!  Can you please tell me what I would have to do to upload multiple variants (or multiple different gift card designs) to a single listing so that my customers can choose their favorite design?

[thehauntedhive]

Thank you so much for this, it worked like a charm in the Brooklyn theme. Very easy to follow, and I'm far from an expert.

[Lineat]

Hej,

I have a question on that topic. Maybe its stupid, but I am not an expert at all. :)

Which size does the picture need to be? And do I need the amount (place for it) and the white place for the code? And if so, Where does it need to be?

Maybe I am overthinking this, but I don´t want to mess it up. :)

How did you solve this? Maybe I can have a look on your Voucher? Couldn´t find any examples online.

Thank you so much in advance.

Best,

Line

[thehauntedhive]

Hi!
I'm no expert either, but this tutorial helped me with no issues in the Brooklyn theme. In the article he stated the size should be 950 by 550, which worked out great for mine.

The white space where the code goes automatically went over the image on mine, it's just below the center. It also automatically added the denomination amount in the upper right corner

[jennifer1231]

Need help with this too! How can we add multiple variants so that specific image gets delivered? Would like to offer different occasion gift cards to customers. Help!

[thehauntedhive]

I wish I could help, unfortunately I do not know. Hopefully the OP can help!

[Canary_co]

This was super helpful! Thank you!

I was able to successfully change the image, but do you have any tips on how to change the text in the email that goes out to customers?

Thanks!

[LaMaga]

very clear explanation... anyways, i can not see the final result in the preview... pretty sure i follow all the steps!

[thehauntedhive]

Did yours have just asset_url or shopify_asset_url? If the latter, did you remove the shopify_ part?

I would double check your steps, it's easy to accidentally miss something.
I would:
-check to make sure you left the ' symbols on either side
- make sure you used the right one .png or .jpg
- Double check the name of the image you used is exactly as it appears where you initially uploaded it

I wish I was savvy when it comes to this stuff and i could be of more help. Sorry, I hope you can get it figured out <3