GIFT CARD CUSTOMIZATION - BLOCKSHOP THEME

muzyczka
Tourist
5 1 0

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)

Screen Shot 2020-11-13 at 1.50.34 PM.png

 

 

I have the Blockshop theme. Can someone please help me with this?

Thanks so much!

Replies 4 (4)

OpenThinking
Shopify Partner
321 81 120

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.

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]

Supanaught
Shopify Partner
2 0 0

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

 

minimalistbb
New Member
7 0 0

Tagging on this Q - how do we update the image to a custom image so it's not using that yellow gift card picture? 

Supanaught
Shopify Partner
2 0 0

Hi Minimalistbb

 

See this thread here:

 

https://community.shopify.com/c/shopify-design/gift-card-preview-design/td-p/943495

 

Cheers

 

Supanaught