Online store - Customize your online gift card image

Solved
Highlighted
Community Manager
Community Manager
463 26 523

Update 4/28/20: This tutorial has been added to the Shopify Developer documentation website as a supported tutorial > Shopify Developers: Personalize Gift Cards with a Custom Image. This topic will be locked and removed in the near future as a result. 



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:

gc-01.jpg

 

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:gc-02.jpg
  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).

    gc-03.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:

    gc-04.jpg

    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:

    gc-05.jpg

    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:

    gc-06.jpg

TyW | Community Manager @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

11 Likes
Highlighted
New Member
1 0 6

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?

6 Likes
Highlighted
Excursionist
12 0 3
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.
0 Likes
Highlighted
New Member
1 0 0

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

0 Likes
Highlighted
Excursionist
12 0 3
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
1 Like
Highlighted
New Member
2 0 7
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!
6 Likes
Highlighted
Excursionist
12 0 3
I wish I could help, unfortunately I do not know. Hopefully the OP can help!
0 Likes
Highlighted
New Member
1 0 3

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!

3 Likes
Tourist
7 0 2

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

 

0 Likes
Highlighted
Excursionist
12 0 3
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
1 Like