Solved

Modifying the email image my customers receive when buying a gift card

jjcastillot
Excursionist
27 1 8

Hello shopify team, currently we are selling some gift cards to our customers, and we want to make the e-mail they receive more christmas-related. I know in the "Language" section of the theme, we can modify some of the text of the mail (Not all), but we want to update the card image & text that currently are:

jjcastillot_0-1608062466227.png

Thanks a lot for the help and support you can provide.

 

Accepted Solution (1)
trubootynz
Tourist
8 1 10

This is an accepted solution.

Hi was having  hard time finding out how to change the image in my email aswell.

After playing around with it managed to get it to work changing the code in the email notification.

 

First you wanna add the image file for the gift card to your files list.

settings> files> upload files

once image has been uploaded click copy link on right hand side of the picture you uploaded.

 

then go to your email notification,

settings> notifications> gift card created.

scroll till you find <img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="">

and replace with:

<img src="https://ADD COPIED LINK HERE/"width="240" height="160" alt="">

 

SAVE

 

This is the only way i have tried which does not show my image blurred. You can also play with how big you want the image by adjusting the 240 and 160.

hope this helps others 🙂

 

View solution in original post

Replies 31 (31)

Miles
Shopify Staff (Retired)
480 68 161

Hi, @jjcastillot!

I'm Miles from the Social Care team at Shopify. Modifying your gift card image is something you can do in your Shopify admin, but it does require some coding. I'll walk you through each step, but I want to start with some information if you're unsure how to code.

If you're using a free theme from Shopify, then our Support team might be able to help you with this tutorial. Although Shopify can help you with many customizations, some kinds of customizations aren't supported.

If you're using a paid theme, then your theme was made by a third-party developer and Shopify's Support team can't help you with it. If you need help customizing a paid theme, then consider hiring a Shopify Expert. Similar to free themes, some kinds of customizations aren't supported because of limitations associated with the theme or Shopify admin.

Learn more about support for themes.

Uploading your image.

To upload a new image for your gift card, follow these steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and click Actions > Edit code.
  3. In the Assets directory, click Add a new asset: New asset menu 
     

     

  4. Click Choose File to browse to the new gift card image on your computer and upload it. We suggest using a simple filename, for example blue-giftcard.png.
  5. Click Upload asset. The new gift card image will appear in your Assets directory. Take note of the file extension (.png or .jpg) 
     

     

Attach picture to the gift card image.

  1. In the Templates directory, click gift-card.liquid.
  2. Find the following code within the file: <img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="">
  3. Replace it with the following: <img src="{{ 'blue-giftcard.png' | asset_img_url: '1024x1024' }}" alt="">
  4. Click Save.

Note: Make sure to change "blue-giftcard.png" to the file name and extension of the new image as needed.

Preview your new gift card image.

  1. From the theme code editor, in the top right-hand corner, click Customize theme.
  2. Open the theme editor.
  3. From the drop-down menu at the top of the page, or from the Templates menu on mobile, select Gift card.

I hope this helps! Please let me know if you need any assistance or get stuck at any step.

To learn more visit the Shopify Help Center or the Community Blog.

jjcastillot
Excursionist
27 1 8

Hi Miles, thanks a lot for your help!

I followed your instructions and the image was replaced succesfully:

jjcastillot_0-1608232842025.png

I will modify the image so the text and objects doesn't get covered by the gift-card code. I just need an extra help: How can I modify the text color of the card price (top-right corner of the image)

maranolo
Tourist
3 0 1

Hi there!

I am looking for a way to change the image in the email the customer gets - not the gift card image on the webpage. I changed the image of the shop-page (with the solution above) but the image in the email is still the shopify-standard-picture. Any way to change this as well?

By the way: where is the text of the cift-card-email coming from? I cannot find the text in the language files.

Thanks!

Miles
Shopify Staff (Retired)
480 68 161

Hi, @maranolo!

You can change the email image and text as well. To do this, head over to Settings > Notifications and find the notification labelled "Gift card created".

To change the image in the email, find the following code:

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

And simply replace it with the new code, replacing YOURFILENAME with the name of the file you uploaded into your theme asset:

<img src="{{ 'YOURFILENAME' | asset_img_url: '1024x1024' }}" alt="">

Once you've done that, you'll also be able to change the email contents as well. If you need a further hand, please let me know.

To learn more visit the Shopify Help Center or the Community Blog.

sabrina2021
Visitor
2 0 0

Hi there, 

I could not change my email image of the gift card from following the steps. Could you help me?

www.evelinethelabel.com

lucy_b
Visitor
2 0 0

Hi there,

 

I have followed the steps shown above but it seems to break and now there is no image. I have tried with both a static image (jpeg) and a gif. Do you have any other suggestions as to what might be going wrong?

Also, is there a way to add our logo to the page? At the moment it just has our store name written in text.

 

Thank youscreen shotscreen shot

Temi18
Tourist
13 0 1

The same thing has happened to me and I can't seem to find a solution. Have you sorted it out since this post?

lucy_b
Visitor
2 0 0
No, unfortunately not.
trubootynz
Tourist
8 1 10

This is an accepted solution.

Hi was having  hard time finding out how to change the image in my email aswell.

After playing around with it managed to get it to work changing the code in the email notification.

 

First you wanna add the image file for the gift card to your files list.

settings> files> upload files

once image has been uploaded click copy link on right hand side of the picture you uploaded.

 

then go to your email notification,

settings> notifications> gift card created.

scroll till you find <img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="">

and replace with:

<img src="https://ADD COPIED LINK HERE/"width="240" height="160" alt="">

 

SAVE

 

This is the only way i have tried which does not show my image blurred. You can also play with how big you want the image by adjusting the 240 and 160.

hope this helps others 🙂

 

Temi18
Tourist
13 0 1

Thank you, your explanation helped a lot 

TangentTom
Tourist
3 0 3

  - Works a treat! Thanks v much :))

sabrina2021
Visitor
2 0 0
Unfortunately not.
I had to contact shopify support for help in the end to make it into a readable size.

As for logo, you can change it at
Online Store > Themes > Customize Theme, click on Header from the new option panel on the left side. Then, you will see a box that will allow you to upload an image as your logo, or to input text below that box as your logo.
The sizing varies for desktop and mobile which you must change font sizing in the custom code though.

abrodeur
Visitor
1 0 0

Hi, after some trial and error I was able to figure it out!

 

In order to make your graphic visible on the "view gift card" and "print gift card" buttons, change the dimensions listed in the code (outlined in the yellow box) to reflect the dimensions of the graphic you created or the size that you would like it to be. shopify.pngView & Print.png

 

Also, if you are trying to customize the gift card graphic within the email itself and are ending up with a gigantic image when you preview, try entering the default dimensions into the code, not the dimensions that are shown in the instructions, and deleting the next row in the code. Screen Shot 2021-11-19 at 10.42.15 AM.png

 

FYI this process does not place your graphic in a gift-card-shaped frame, so you will need to design your image with rounded edges, if desired. (You can see the square edges it gave me initially).Screen Shot 2021-11-19 at 10.46.13 AM.png

 

Hope this helps!

~Ashley

TheDailyPage
Visitor
1 0 1

This happened to me today, and the issue was that I forgot to include the .png or .jpg when I updated the code. Once I added that, the image appeared without issue.

kitkit123
New Member
6 0 0

Hello Miles, 

thanks for your reply. I have done exactly that and in the preview, it turned out fine. However, when i resend the notification to myself again, it doesn't show up on the email (the file appears to be broken). Do you know why that is?

 

I don't understand and i have spent 2 hours trying to figure it out already. 

Thanks!

lsd-sign
Visitor
1 0 0

hi Miles and thanks for this old message… 🙂 I have a slightly different problem: I do have my Gift card visible when I go to the Theme editor, but…

It doesn't appear on the email my client receive… here are 3 images to explain

Email Gift-card Problem A.jpg

Email Gift-card Problem B.jpg

Email Gift-card Problem C.jpg

   

……

EliskaM
Explorer
79 1 9

Thank yoooouuu, works perfectly 😍

rcharity23
Visitor
1 0 0

@Miles Did you have a solution for the question about changing the color of the dollar amount on the Gift Card page? I also have a very light colored Gift Card image and the white text isn't ideal. Thanks!

park3clothing
Tourist
6 0 1

Hello there,

 

I have tried this on my store and it hasn't work. Would you be able to help?

 

www.park3.co.uk

carolinacao
Shopify Partner
3 0 1

Hello Miles! how are you?

I followed all the instructions, and it works but despite the size or resolution, I can´t make the new image display properly.

Here you can see. What I am doing wrong 😑 ? Thank you!it sees blurit sees blurit has a good sizeit has a good size

Chris_Orr
Tourist
5 0 1

The instructions say it doesn't work for Shopify 2.0 themes. Do you know how we can make this change for 2.0 themes?

prestonss2
Tourist
3 0 0

Do you still need help with this, Chris?

ElliottLM
Tourist
4 0 1

This is a great answer, and helped me a lot. But this element you reference does not apply to all themes, so here's a guide if someone is stuck.

 

These themes are most likely using their own assets instead of the shopify global asset for gift cards, as you referenced. This filename also may change!

 

If you're having trouble finding the code, search for "gift-card/card.jpg" or "shopify_asset_url" in gift_card.liquid. If you can't find this, you likely have an asset that your theme is referencing.

 

1. Duplicate your live theme and jump into the code editor for the duplicate. Don't skip this step!

 

2. Find the gift card image in the assets folder. If it doesn't exist, stop reading, this is not going to help.

   a. Copy its name to a notepad

   b. Delete the asset.

 

4. Prepare your own gift card image for upload...

   a. Make sure your image width is a whole number multiplicative of 600. I recommend a 1200 width. DO NOT MAKE IT SMALLER THAN 600px WIDE.

   a. Convert it to the filetype of your theme's gift card image. (.jpeg, .png, etc.)  You need to convert it with a program rather than renaming. Preview on mac does this through file > export.

   b. IMPORTANT: name your image the same name as your theme's gift card image.

 

6. Upload your gift card image to the assets folder, making sure it has the exact same name and extension as the image it is replacing.

 

7. Search for your gift card image's name in gift_card.liquid

 

8. Replace...

   x. asset_url with asset_img_url: '600x' or

   y. asset_img_url: 'NUMBER' with asset_img_url: '600x'

 

9. Save and publish.

 

10. Test.

 

Why change from asset_url? 

asset_img_url can resize your images!

 

Why 600x? 

This is the industry standard image width for email. Putting "x" after an integer will resize it proportionally to the width of the integer. If it makes your email look funky, change 600x to 1024x.

 

Why me?

We've all been there...

 

 

 

carolinacao
Shopify Partner
3 0 1
thank you so much, i will do it and let you know.

Thank you again
ghqamarillo
Visitor
2 0 0

Hi, I am trying to adjust the font size and possibly bold it for the value of my gift card in the email that the customer receives. I am good with coding but just can't find the right line to input it in. Do you know which section of code to implement it in?

KaCo
Tourist
11 0 3

Hi Miles,

The above solution works if you have only one gift card in store. If I have Christmas gift cards, Birthday gift cards and Store gift cards in store, all in different designs, how to extend this code?

If a customer buys a Christmas gift card (red), I would like the same card (red) to be delivered to her mailbox.

If she buys a Birthday gift card (pink), I would like the same card (pink) to be delivered to her mailbox and so on. How can that be achieved?

Thanks in advance.   

jedmond
Visitor
1 0 0

Hi Miles,

ive managed to change the image in the email but I am hoping to go further:

- When you click ' View Gift Card' it shows the template shopify image rather than mine

- is there any way of changing the image depending on how much they spent on the gift card (e.g., changing the colour of the image)

LFHBoutique
Visitor
1 0 0

Hi Miles, I followed your tip above and it worked really well thank you! BUT when we click on the actual link to view gift card, the logo for our shop is missing, and the shop name is there written in red - I can't find how to change this? Could you advise please? 

Slicks
Tourist
11 0 1

Hi Miles this hasnt worked for me can you help?

adventmedia
Pathfinder
128 0 31

brennerdesign
Shopify Partner
7 0 0

So I have tried this solution and it worked on the "gift card receipt email notification" however the code does not work on the "new gift card email notification"  Can you help me out with this issue.

Screenshot 2024-05-11 at 12.33.04 AM Large 2.jpeg

Screenshot 2024-05-11 at 12.33.13 AM Large.jpeg