Customizing the gift card

Solved
benm
New Member
1 0 0

Hey,

 

We are looking to change "Gift Card" to "Voucher" across the gift card process. I'm stuck at the output page (see pic). What file can I edit to replace "gift card" with "voucher? Also, bellow I'd like to change "Print this gift card" to "Print this voucher" text on the button. Many thanks, Ben

v.png

0 Likes
Julie
Shopify Staff
Shopify Staff
840 68 203

This is an accepted solution.

Hi, @benm!

Julie here from Shopify Support.

Thanks for including a screenshot in your post. It's great to see that you've already customized your gift card image.

Changing the wording here is actually quite simple and, in fact, doesn't require editing any of your code files. Instead, you'll need to use your theme's Language Editor. This can be accessed by heading to Online store > Themes > Actions > Edit languages. From there, you'll notice a search bar. You can simply enter "gift card" and you'll be presented with a number of areas where the term "gift card" would appear on your online store and within the checkout (when it's redeemed, for example).

The section that correlates with the screenshot you've shared should be located toward the very bottom of your search results, under the Gift cards / Issued heading. You'll just need to edit each field there, at which point it should look something like this: 

20-03-gihwb-pussx

 Once those fields are updated, here's what your gift card redemption page will look like: 

20-03-wcrsr-k5b18

It's also worth noting that you can change the wording in the Gift card created email notification template that customers receive when they purchase a gift card. To do this, you'll just need to head to Settings > Notifications > Gift card created, where you can then edit the template. To keep things consistent, I'd recommend updating this as well. 

Are you taking advantage of the new gift card feature available on all plans? If that's the case, we have also put together more resources to help business owners navigate COVID-19. There, you'll find some helpful blog posts to help you carry on with your business during this time, along with some more information on what Shopify is doing to help merchants. 

I hope this helps! Please feel free to respond here if you have any further questions, Ben.

Julie | 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
BrigitteV
New Member
1 0 0

Thnx for the info, Julie!

I've customized my gift card image, the text, the notification e-mail and it all works! When sending a testmail I see my own colours and style applied to the e-mail. But when I open the voucher, there's a blue line around the gift card page. In your exemple I see it is black. Where can I edit this that my colours are applied to this redemption page aswell and not only to the email? 

 

Kind regards,

Brigitte

0 Likes
Julie
Shopify Staff
Shopify Staff
840 68 203

No problem, Brigitte! I'm glad to hear that's been taken care of. 

As for the blue line around your gift card page, this would be coming from your styles.gift-card.scss.liquid theme file, which can be found in the Assets folder in your theme's code. There, you should see a list of HEX colour codes that are being used on this particular page. It sounds like the blue border you're seeing is an "Accent" colour. Once you locate that colour code, you can replace it with a colour code of your choice. 

Let me know how that goes! 

Julie | 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
ecomm_puw12
New Member
1 0 0

Hi Julie, 

 

Do you know how I could changed the font of the dollar amount on the gift card?

0 Likes
Julie
Shopify Staff
Shopify Staff
840 68 203

Hey, @ecomm_puw12!

Changing the font for the dollar amount on your gift card would definitely involve custom code. While this would be a question best directed to a developer, I may be able to offer you some insight here. Which theme are you using? 

Julie | 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
woodwardandfox
Excursionist
32 1 9

Hi Julie, 

I have been trying to follow these instructions but i cannot find the gift card style asset. I have the Prestige Theme - is it different in this situation? 

0 Likes
Julie
Shopify Staff
Shopify Staff
840 68 203

Hey, @woodwardandfox!

Thanks for letting me know which theme you're using. I took a look at the Prestige theme here on my own store and I'm not seeing the styles.gift-card.scss.liquid theme file under the Assets folder either. Third-party themes may be structured a bit differently, so it would be best to check in with the Prestige developers directly on this. 

What kind of edit are you trying to make? 

Julie | 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
Dollwoodart
New Member
2 0 0

Hi! I'm having trouble w the image that shows once I send a gift card to customers. Can anyone help me with this?

0 Likes
Julie
Shopify Staff
Shopify Staff
840 68 203

Hey, @Dollwoodart!

I'd love to take a look into this for you. Do you mind sharing some information about the issue you're experiencing so I can get a better understanding of the problem? Is the image not appearing in the emails, or on your website? If you have a screenshot to share, that would be even better.

Looking forward to your update!

Julie | 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