Modifying the email image my customers receive when buying a gift card

Shopify Discussion

Topic summary

Goal: Customize the gift card visuals and text—both on the storefront gift card page and in the gift card email.

Core solutions shared:

  • Page image: Upload a new image to Theme > Edit code > Assets, then update Templates > gift-card.liquid to use the new asset (e.g., asset_img_url).
  • Email image: Settings > Notifications > “Gift card created”; replace with your image (asset_img_url) or a direct Files URL.

Common issues and fixes:

  • Email shows default or broken image: ensure the correct file extension (.png/.jpg) and path; some had success using Settings > Files URL with explicit width/height to avoid blur.
  • Blurry/giant images: use asset_img_url with a standard width (e.g., ‘600x’ for email) or set width/height; avoid too-small sources.
  • “View/Print gift card” still default: update dimensions/references in gift_card.liquid and ensure theme-specific assets are replaced.
  • Theme variations: Some themes (including 2.0) use their own asset names; locate and replace the theme’s specific gift card image, keeping the same filename/extension.

Unresolved/ongoing:

  • Change color/size/bold of the gift card value text (page/email) remains unanswered.
  • Dynamic images per gift card product or value not provided.
  • Some paid-theme previews succeed but sent emails still show defaults.

Status: Mixed success with community workarounds; several edge cases remain open.

Summarized with AI on December 13. AI used: gpt-5.
15

Hi, after some trial and error I was able to figure it out!

In order to make your graphic visible on the “view gift card” and “print gift card” buttons, change the dimensions listed in the code (outlined in the yellow box) to reflect the dimensions of the graphic you created or the size that you would like it to be.

shopify.png
shopify.png1944×870 93.5 KB

View & Print.png
View & Print.png1162×1548 118 KB

Also, if you are trying to customize the gift card graphic within the email itself and are ending up with a gigantic image when you preview, try entering thedefault dimensions into the code, not the dimensions that are shown in the instructions, and deleting the next row in the code.

Screen Shot 2021-11-19 at 10.42.15 AM.png
Screen Shot 2021-11-19 at 10.42.15 AM.png1722×498 91.7 KB

FYI this process does not place your graphic in a gift-card-shaped frame, so you will need to design your image with rounded edges, if desired. (You can see the square edges it gave me initially).

Screen Shot 2021-11-19 at 10.46.13 AM.png
Screen Shot 2021-11-19 at 10.46.13 AM.png1286×810 51.4 KB

Hope this helps!

~Ashley