Skip to main content

​
What It Does

The Gift Card section controls the branding and visual appearance of Shopify gift card pages. When customers purchase or receive a digital gift card, they see a gift card page displaying:
  • Gift card code
  • Balance/value
  • Store branding (logo)
  • Instructions for use
This section lets you customize the logos displayed on gift card pages to match your brand identity.
This section only appears on gift card template pages (/products/[gift-card-handle]). It does not appear on regular product or homepage sections.

​
Settings

​
Logo Image

Type: Image picker
Purpose: Upload your store logo to display at the top of gift card pages Recommended specifications:
  • Format: PNG with transparency (for clean logo display) or JPG
  • Size: 200-400px width recommended
  • Aspect ratio: Horizontal logo (wider than tall) works best
  • File size: Under 100KB for fast loading
Best practices:
  • Use high-resolution logo (2x size for retina displays)
  • Ensure logo visible on both light and dark backgrounds
  • Match logo used in header for brand consistency
If you have a logo with transparency, use PNG format. If logo has white background, use JPG for smaller file size.

​
Logo SVG Code

Type: Textarea
Purpose: Paste SVG code for vector logo (alternative to image upload) Why use SVG:
  • Scalable - Sharp at any size/resolution (perfect for retina displays)
  • Small file size - Typically smaller than PNG/JPG
  • Editable - Colors can be changed with CSS
  • Accessibility - Better for screen readers
How to use:
  1. Export logo as SVG from design software (Adobe Illustrator, Figma, Sketch)
  2. Open SVG file in text editor
  3. Copy entire <svg>...</svg> code
  4. Paste into “Logo SVG Code” field
Example SVG code: 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
  <text x="10" y="35" font-family="Arial" font-size="30" fill="currentColor">
    My Store
  </text>
</svg>
Only use SVG code from trusted sources. Malicious SVG code can contain scripting vulnerabilities. Always use SVG files you created or from reputable sources.

​
Logo Card Image

Type: Image picker
Purpose: Upload decorative logo/image to display on the gift card itself (visual card design) Purpose:
  • Appears as decorative element on the visual gift card
  • Can be store logo, brand mark, or decorative graphic
  • Adds branding to the gift card customers see and share
Recommended specifications:
  • Format: PNG with transparency (recommended) or JPG
  • Size: 100-200px recommended
  • Design: Simple, recognizable brand mark or icon
  • Contrast: Ensure visible on gift card background color
Difference from “Logo Image”:
  • Logo Image - Top of gift card page (header area)
  • Logo Card Image - On the gift card itself (decorative branding on card visual)

​
Logo Card SVG Code

Type: Textarea
Purpose: Paste SVG code for logo/icon on gift card itself (alternative to Logo Card Image) Same benefits as “Logo SVG Code” but specifically for the decorative branding on the gift card visual. When to use:
  • Vector logo or icon for perfect scaling
  • Smaller file size than raster image
  • Need to match color scheme dynamically

​
Use Cases

Standard Logo Branding

Upload same logo used in header to “Logo Image” for consistent branding across store and gift card pages.

SVG Logo for Scalability

Use SVG code for ultra-sharp logo display on high-resolution devices (retina, 4K displays). Perfect for simple logos.

Branded Gift Cards

Upload brand mark/icon to “Logo Card Image” to add decorative branding on the gift card customers see and share.

Seasonal Gift Card Design

Update “Logo Card Image” seasonally (holiday icon forChristmas, heart for Valentine’s, etc.) to match promotions.

​
Best practices

Use Consistent Branding

Use same logo across store (header, footer, gift card pages) for cohesive brand identity customers recognize.

Optimize Image Size

Compress logo images to under 100KB. Large images slow gift card page load. Use TinyPNG or similar tools.

Test on Mobile

View gift card page on mobile to ensure logos display properly and are readable at smaller sizes.

Ensure Logo Contrast

Logo must be visible on gift card page background. Test with different color schemes or use logo with transparency.

Prefer SVG for Simple Logos

SVG provides best quality and smallest file size for text-based or simple icon logos. Use PNG for complex logos with gradients/photos.

Keep Card Logo Simple

“Logo Card Image” appears small on gift card. Use simple, recognizable brand mark rather than detailed logo.

​
Gift Card Setup

​
Enabling Gift Cards

Gift cards must be enabled in Shopify Admin before customers can purchase:
1

Go to Gift Cards settings

Shopify Admin → Products → Gift cards
2

Enable gift cards

Toggle “Gift cards are enabled” to ON
3

Configure gift card values

Set available gift card denominations (e.g., 25,25, 50, 100,100, 250)
4

Customize branding

Go to Online Store → Themes → Customize → Open gift card product template → Configure Gift Card section logos
5

Test purchase

Make test gift card purchase to verify page displays correctly with logos

​
Gift Card Page Location

Gift card pages are accessed at:
  • Product page: /products/gift-card (where customers purchase)
  • Gift card issued page: /gift_cards/[code] (unique page customers receive via email after purchase)
Both use the Gift Card section for branding.

​
Image vs SVG: When to Use

FormatBest ForProsCons
PNGComplex logos with gradients, photos, multiple colorsWide compatibility, easy to use, supports transparencyLarger file size, pixelated when scaled up
JPGSimple logos on solid backgroundsSmallest file size for photosNo transparency, lossy compression
SVGText-based logos, simple icons, single/few colorsInfinitely scalable, tiny file size, editable with CSSNot ideal for complex designs, requires code knowledge
Recommendation: Use SVG for simple logos (text, basic shapes). Use PNG for complex logos with gradients or many colors.

​
Troubleshooting

Possible causes:
  • Logo not uploaded or SVG code not pasted
  • Image file corrupted or wrong format
  • SVG code contains errors
Solution:
  • Verify image uploaded successfully in Theme Customizer
  • Try different image format (PNG instead of JPG)
  • Validate SVG code (paste in https://jakearchibald.github.io/svgomg/ to check for errors)
  • Check browser console (F12 → Console) for loading errors
Solution:
  • Logo size controlled by theme CSS (not adjustable in Gift Card section settings)
  • Upload logo at recommended size (200-400px width)
  • If using SVG, adjust viewBox and width/height attributes in SVG code
  • Contact theme developer for custom CSS to resize logo
Solution:
  • Check “Logo Card Image” uploaded (different from “Logo Image”)
  • Ensure logo has sufficient contrast with gift card background
  • Use PNG with transparency if logo blends into background
  • Test with simple brand mark/icon rather than full detailed logo
Solution:
  • Ensure pasting complete SVG code including opening <svg> and closing </svg> tags
  • Check for syntax errors in SVG code (missing quotes, unclosed tags)
  • Validate SVG code with online SVG validator
  • Try simplifying SVG (remove unnecessary attributes added by design software)
Solution:
  • Upload logo at 2x size (if logo displays at 200px, upload 400px image)
  • Use SVG for perfect sharpness at any resolution
  • Check image format (PNG preferred over JPG for logos)
  • Ensure not uploading low-resolution image and stretching

​
Theme Settings for Gift Cards

  • Admin → Online Store → Themes → Customize → Theme settings → Colors - Affects gift card page colors
  • Admin → Products → Gift cards - Configure denominations, enable/disable gift cards
  • Admin → Settings → Notifications → Customer notifications → Gift card created - Customize email customers receive
  • Header - Uses similar logo settings; maintain consistency
  • Footer - May include logo; use same logo file for brand consistency

​
Key Takeaways

  • Two logo types - Logo Image (page header) and Logo Card Image (on gift card itself)
  • Image or SVG - Upload image (PNG/JPG) or paste SVG code for each logo
  • SVG benefits - Scalable, tiny file size, perfect for simple logos
  • PNG for complex logos - Use PNG with transparency for detailed logos with gradients
  • Consistent branding - Use same logo as header/footer for cohesive brand identity
  • Optimize file size - Compress images to under 100KB for fast page load
  • Test on mobile - Ensure logos readable at smaller sizes on mobile devices
Gift Card section provides simple logo branding customization to ensure gift card pages match your store’s professional appearance.