Shopify themes, liquid, logos, and UX
Hey everyone! I am driving myself crazy because I can't seem to figure out how to customize my gift card page, the one that's sent out to a customer. I have already customized the Apple wallet gift card, but I'm stuck on this (Please see image below)
I have the Blockshop theme. Can someone please help me with this?
Thanks so much!
Hi there,
Jack from OpenThinking here!
I'm not familiar with your theme but, the contents of your gift card page are usually located into layout/gift_card.liquid 1) open 2) edit.
let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.
Hi muzyczka
I might be a little late replying here, but have similarly just started using the Block Shop theme and wanted to edit the Gift Card page too. Here's how to achieve the three queries you posted:
1) Add Your Own Logo
- Go to Settings > Files > Upload File and add your logo
- Copy the URL for your logo file
- Go to Themes > Actions > Edit Code
- Open Templates > gift_card.liguid
- You will see the <header> tag starting on line 48
- I just wanted a logo without a hyperlink here, so I removed the existing code in the header tag and replaced it with:
<img src="https://cdn.shopify.com/s/files/myfilenamehere" alt="Alt Text For Logo" >
2) Change the Gift Card Header Message (ie 'Have It Say Something Else')
If you really want to remove and change this you can edit the <header id="gift-card-header"> tag starting on line 58 of the Templates > gift_card.liquid file. I wouldn't recommend doing this as it is designed to display a series of different messages depending on the status of the customer's gift card (ie Disabled / Expired / Active).
I also wanted to add a little more bespoke text for customers, so as an alternative I edited the <div id="gift-card-instructions"> tag starting on line 104:
- Open Templates > gift_card.liguid
- You will see the <div id="gift-card-instructions"> tag starting on line 104
- I removed the existing code in the tag and replaced it with my own copy detailing how / where the customer could use their gift card
3) Change the Blue Border to a Different Colour
- Go to Assets > styles.gift-card.css.liquid
- You will see the id #gift-card-outer-container starting on line 393
- Edit the background-color value to your chosen colour
Hope this helps,
Supanaught
Tagging on this Q - how do we update the image to a custom image so it's not using that yellow gift card picture?
Hi Minimalistbb
See this thread here:
https://community.shopify.com/c/shopify-design/gift-card-preview-design/td-p/943495
Cheers
Supanaught
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024