How can I customize my gift card preview design?

Store Design
1

Hi there,

I would like to customise the “Gift Card Preview” page that you get to when you get an email of a gift card and click on ‘View Gift Card’.

I would specifically like to edit the border colour and the text. Does anyone know how to do this?

Thanks!

Screen Shot 2020-11-06 at 2.34.22 PM.png
Screen Shot 2020-11-06 at 2.34.22 PM.png704×906 68.4 KB

2

Hi, @Pretty -brave.myshopify.com!

I’m Miles from the Social Care team at Shopify. Editing the gift card to completely personalise it can be done by editing your themes 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.

If you’re comfortable to try your hand at some customisation, I’ve outlined the instructions below. I suggest making a backup copy of your theme in case something breaks when making the changes.

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 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) Asset list gift card

Edit the gift card template file so that it uses your new image

  • In the Templates directory, click gift-card.liquid.
  • Find the following code within the file:

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

  • Replace it with the following:

<img src="{{ 'blue-giftcard.png' | asset_img_url: '1024x1024' }}" alt="">

  • 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.
3

Hello,

it’s so crazy. There are quite a lot of people asking the same question: How to change the blue border not the image.

I’ve spent 2 hours looking for the answer and still haven’t found it.

If anyone can answer what is asked in the question and not what can be copied form the user’s manual, it would be great.

4

The blue border comes from your shop template design. For example, I am using the Streamline template and the background design of images, button, etc is a gray shadow…so that is the background on my gift card preview. Look for that code. Hope that helps or at least leads you in the right direction for a solution. :slightly_smiling_face:

5

is there a way to just change the text “Use this code at checkout to redeem your gift card” to something else?