Custom Gift Card image dimensions

Solved
Tourist
10 0 1

Hi,

 

Looking at the below link I can see how I can customise my gift card image.

 

I can also see that the ideal specs are 950px x 550px. 

 

Is there any information on the size and locations of the dynamic gift code in the middle bottom and the $ amount in the top right? I'm designing my own image and need to make sure space is left for these two bits of dynamic content.

 

https://help.shopify.com/en/themes/customization/store/customize-look-and-feel-of-gift-cards

0 Likes
Excursionist
24 0 5

Just been messing around with them.
From what I've seen, I'd recommend leaving the bottom half (or at least two fifths) of the design free of space; this will allow it to scale nicely with mobiles and smaller screens. 

As for the top corner with the text, if you split the recommended size into a grid, 7 columns, by 5 rows, try and keep free space within the top 2 rows, and 2 columns from the right. Again, there's not really a recommended size that can be given seeming's it's a responsive layout.

 

Hope this helps :)

0 Likes
Tourist
10 0 1

Ok, thanks for this. I'll play around with it and see if my artwork lines up with these dimensions.

0 Likes
Tourist
10 0 1

Hi,

I've set up a new gift card at 950 x 550 px however shopify still shows a red strip along the bottom of the gift card? anyone know how I can get rid of this?gift card error.png

0 Likes
Shopify Partner
2 1 3

This is an accepted solution.

Hey Steve, 

you need to change the background color on the Gift Card:

 

Go to Theme file > Edit Code

 

gift-card.scss.liquid

$color-giftcard-bg: #e95e61; 

 

Change color to green : #8A9413

New Member
1 0 0

Hi, can someone help me with this? I followed all the instructions to update a new gift card image - but when I preview it shows up blank/white.

 

Thanks!

0 Likes
Shopify Partner
135 2 11

Hey all, it seems as you would like to customize your gift card more than Shopify offers... You should check our app -  Rise. 

With our solution you can totally customize your gift card as you like, the client can send it to the recipient with a personal note directly from the checkout page and schedule it for the perfect moment.

0 Likes
New Member
1 0 0

Hi guys,

I am trying to do the same thing and customize my gift card but I can't get it to work. Can someone provide a tutorial?

I was following this one

https://shopify.dev/tutorials/customize-theme-personalize-gift-cards#edit-the-gift-card-template-fil...

but I couldn't get it to work.

 

Any tips would greatly be appreciated.

Thx

O

0 Likes
New Member
1 0 0

Go to Settings>Notifications>Gift card created and change that same code there too, It will show the image you created. 

I am only having trouble with the size since on the form it says 1024x1024 and the recommended size for a gift card is 950x550.

 

0 Likes