Shopify Gift Card images are something you can customise but it's not as simple to show the actual variant image on the page the customer sees. Let's look at some code to let you show the variant image in the Gift Card template. 

"Wait, why do you even need to show the variant image?"

That's a good question (that I'm asking myself) but it comes down to how you present the cards. If you only ever use a single generic looking image don't bother with this code. Keep using the method shown on the Shopify help docs. 

You might however want to use a totally custom image for each of your variants. Maybe the more expensive the card the more elegant and fancy they appear to be. This is a good reason to be looking at showing the variant image.

The How...

You might think that the simple way would be to just use the all_products filter and grab the product directly. Nice in theory but all_products filter doesn't work on the gift_card template. That filter just isn't available.

We need to find another way to access the gift card product with Liquid. The good news is that the linklists can be used, and in a linklist you can store a reference directly to the Gift Card. Liquid can use that to do our magic!

First step is getting a linklist (menu) setup in the Admin:

1. Create a new linklist, calling it what you like. I called mine admin-gift-card.
2. Add a single link, making the url a product (being the Gift Card itself).
3. Save, taking note of the handle. You'll need the handle for the code to come

In my Shopify Snippets repo you'll find the code for this. There'll be a complete gift card template for you to steal and tinker with, and a liquid file with only the base code parts. I'm just going to show the base code parts here to make it easier to look at what's happening.

grabbing the code...

^ This code does this:

• grabs the linklist
• grabs the starting value of the gift card
• loops over the gift card in that linklist
• matches the variant to the starting value of the card (meaning that a $25 card will match with a $25 variant)
• Sets the image to the matched variant.
• If no image, or no match it will just use whatever the default card you had setup.

 If your linklist handle is different to what's shown in the code remember to change it.

Example Gift Card

You can see the gift card I created on the experiments page. If I was to use the code we talked about here I'd see something special when viewing my purchased gift card. I would see this when buying my $25 gift card. 

This is not a Gift Card image, and the variant associated with that value card. 

Drawbacks

Couple of drawbacks.

This works well when you've got just the one Gift Card product. Things will get a lot messier when you've got multiples and I've not covered how you'd do that here. 

If you've got multiple variants at the same price, this script doesn't work. We've not bothered to look at matching up variants - we're just stopping at a matching price and considering that good enough.