How to modify the Shopify gift card image?

How to modify the Shopify gift card image?

This tutorial is written for the Shopify flagship theme “Dawn”. I’ve written this tutorial for this theme since this theme is shipped by default with Shopify.

Where can you find the Shopify gift card page?

The Shopify gift card image can’t be located anywhere in the Shopify administration section.

I’ve written this tutorial so that other fellow developers do not lose time to figure out a solution by themselves but if you are not a developer please hire one or use our services.

Coding is not easy and copy/pasting code from the internet is not OK if you are not sure what you are doing or do not understand what you are doing.

I’ve seen a lot in my career and some of the stuff made by non-programmers was “out of this world” and hurt their stores badly.

Just because it works doesn’t mean that what you did will not have bad consequences on search engines, user experience, different browsers, devices and so on.

A professional developer knows how to adapt the code found in a tutorial on the internet to your theme, test it and make sure that the code that has been written works correctly and does not affect the store negatively in any way.

You can also ask a developer to build for you settings in the theme administration panel so you can change the gift card from there without touching the code.

A preview of your card can be seen by appending this path to your store:

/gift_cards/26386235463/preview

So your site becomes:

1. If you have a domain connected to Shopify like: “www.yourstorename.com” the URL to the gift card preview will be:

https://www.yourstorename.com/gift_cards/26386235463/preview

2. If you do not have a store domain connected to Shopify and have the subdomain “www.yourstorename.myshopify.com” the URL to the gift card preview will be:

https://www.yourstorename.myshopify.com/gift_cards/26386235463/preview

Once you access the URL you should see the gift card preview for your store like in the following image:

You can see the full URL in the browser (marked with 1 in the image above) and the default gift card image (marked with 2 in the image above).

Once you start making modifications to the code inside the theme this page will reflect those changes.

Please note that working on a theme copy (staging environment) inside the live store will not reflect the changes on this page until that staging theme is published.

Of course you can create an entire duplicate of the store and work there.

Upload your new image to Shopify

Select a “jpg” or “png” image to represent the gift card. Once you have the image ready go to the Shopify “Settings” section:

On the “Settings” page look for the “Files” section (marked with 1 in the image below) and click on the “Upload files” button (marked with 2 in the image below) :

After you’ve uploaded the file click on the little link icon to copy the link to clipboard (marked with 2 in the image below) :

In the image above you can see (marked with 1) the image file that I plan to use on the gift card page. Since it is a graphic file I’ve chosen in this case the “png” type. I usually use SVG for this type of files since it scales better across devices.

The problem is that on the Shopify file section SVG files can’t be previewed so I’ve chosen a PNG file so that the file preview can be visible in the example.

In case you can’t see the newly uploaded file use the “Filter files” input box to find your file (marked with 3 in the image above). If you can’t find it, give it a bit of time and if not upload the image again.

Now that we have the image link inside our clipboard, paste it on a file or inside your code editor so you can extract the file name with the extension.

Once pasted my link looks like this:

https://cdn.shopify.com/s/files/1/0263/8623/5463/files/gift-card.png?v=1638205879

You can use this link inside the code as well in order to link it to the gift card image, but if you do that remove the version number.

It is not recommended to use the raw link but rather a liquid syntax to pull the file from Shopify servers.

What we need from this link is the file name which can be extracted. In my case if I extract the file name from the link I can find it between the last ‘/’ and the file version number ‘v=1638205879’.

So my file name is “gift-card.png” (yours could be different, especially if you use another image extension like, “.jpg”, “.svg” and so on) and this is what I’m going to use in my code to tell Shopify what image to pull from their server and list inside my gift card page template.

Modify the code

To pull the image from the files directory located on Shopify servers we need to use the “file_img_url” with the parameter of ‘master’. The code will look like this:

file_img_url: 'master'

We already have the raw link from the Shopify “Files” section inside the clipboard but as I said a cleaner way is to instruct Shopify via liquid code to create the link.

I’ll fire up my code editor.

You can do this from the Shopify theme code editor as well. I’ll not use that since for me as a developer the Shopify code editor is not something that I enjoy working with.

To connect to your theme with your code editor please use this tutorial: https://shopify.dev/themes/tools/theme-kit/getting-started .

After you have everything setup and you’re connected to the theme you’ll need to search for the “gift_card.liquid” file inside the theme directory. You can find it under “templates” folder:

Identify the code (marked with 2 in the image above):

{{ 'gift-card/card.svg' | shopify_asset_url }}

Now we need to remove this code and replace it with the following one:

{{ 'gift-card.png' | file_img_url: 'master' }}

Let’s explain the code:

‘gift-card.png’  – is the name of the image file that we’ve uploaded and it tells Shopify what file to pull from the “Files” section.

file_img_url:  – is a liquid URL filter and it returns the asset URL of an image in the “Files” page of the admin. “file_img_url” accepts an image size parameter.

‘master’ – is the image size parameter. The parameter can be of sizes like ‘1024×768’, etc. The “master” means that we instruct Shopify to pull the original file (not resized in any way) that we’ve uploaded in the “Files” admin section.

If you’ve done everything correctly you should see now your new gift card image listed on the gift card preview page:

Conclusion

Now after you’ve changed the image you will probably need other changes as well for the gift cards.

There is a lot of stuff you can do with this page. We have some services so please check them out.

This can also be built by a developer inside the admin theme settings section and you can make changes to the image from there.

Beside this other settings for this page can be added in the theme settings in order to make it simple for the store owner to make changes in the future without the need of a developer.