Custom Gift Card image dimensions

[blicky]

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

[GSLFab]

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 :)

[blicky]

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

[blicky]

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?

[Chanz · 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

[stems]

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!

[Neomi_av]

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.

[Opt1musPr1me]

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

[PLAP]

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.