Gift Card Preview Design

Highlighted
New Member
24 0 0

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

0 Likes
Highlighted
Shopify Staff
Shopify Staff
313 27 66

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.

Miles | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
1 0 0

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. 
 

0 Likes