Gift Card

​

What It Does

​

Getting Started

​

Settings

<svg width="200" height="60" viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="180" height="40" fill="#000"/>
  <text x="100" y="40" text-anchor="middle" fill="#fff" font-size="24">STORE</text>
</svg>

<!-- Main Logo SVG: Black logo for light page header -->
<svg><!-- black paths --></svg>

<!-- Card Logo SVG: White logo for dark gift card background -->
<svg><!-- white paths --></svg>

​

Best practices

​

Common Use Cases

​

Standard Setup (Same Logo Everywhere)

• Logo Image: Store logo PNG (transparent background)
• Logo SVG Code: Empty
• Logo Card Image: Empty (defaults to Logo Image)
• Logo Card SVG Code: Empty (defaults to Logo Image)

​

Premium Setup (SVG Everywhere for Quality)

• Logo Image: Empty (not used)
• Logo SVG Code: Store logo SVG (page header)
• Logo Card Image: Empty
• Logo Card SVG Code: Same SVG as Logo SVG Code (or leave empty to use Logo SVG Code)

​

Dark Gift Card Background (Inverted Logo)

• Logo Image: Black logo PNG (page header, light background)
• Logo SVG Code: Empty
• Logo Card Image: White logo PNG (gift card, dark background)
• Logo Card SVG Code: Empty

​

Seasonal Gift Card Branding

• Logo Image: Standard year-round logo (page header)
• Logo SVG Code: Empty
• Logo Card Image: Holiday-themed logo or badge (October-December)
• Logo Card SVG Code: Empty

​

Simplified Card Logo for Space

• Logo Image: Full logo with text and tagline (page header)
• Logo SVG Code: Empty
• Logo Card Image: Logo icon only, no text (fits card better)
• Logo Card SVG Code: Empty

​

Layout Behavior

​

Gift Card Page Structure

[Page Header with Logo Image/SVG]
          ↓
[Gift Card Graphic with Logo Card Image/SVG]
          ↓
[Gift Card Code]
          ↓
[Balance Information]
          ↓
[Apply to Order / Print Buttons]

​

Logo Sizing on Page

• Automatically scales to fit header height (typically 60-80px tall)
• Maintains aspect ratio (width scales proportionally)
• Centered or left-aligned depending on theme design
• Responsive (smaller on mobile devices)

• Sized to fit card design (varies by theme)
• Typically smaller than page header logo (limited card space)
• Positioned on card graphic (top-center usually)
• May adjust position based on card template design

​

Mobile Behavior

• Page header logo: Scales down to fit mobile header (typically 40-50px tall)
• Gift card graphic: Scales to fit mobile screen width while maintaining aspect ratio
• Gift card logo: Scales proportionally with gift card graphic

​

Print Behavior

• Logo Card Image/SVG renders at high resolution for print quality
• SVG logos print perfectly at any DPI
• Image logos print at uploaded resolution (why high-res images matter)
• Page header logo is typically hidden in print view (only card prints)

​

Related Sections

• Header - Main site header logo (separate from gift card logo)
• Footer - Footer branding (separate from gift card logo)
• Email templates - Gift card email notifications (configured in Shopify Admin, not theme)

​

Technical Notes

​

Gift Card Template Isolation

• Main store templates (homepage, product pages, collections)
• Email notifications (controlled separately in Shopify Admin > Settings > Notifications)
• Checkout (controlled by Shopify, not theme)
• Admin interfaces

​

Image vs SVG Rendering

<img src="logo.png" alt="Store Name" class="gift-card-logo">

• HTTP request to load image file
• Width/height attributes set via CSS
• May appear blurry on high-DPI screens if not 2x resolution

<div class="gift-card-logo">
  <svg width="200" height="60"><!-- SVG code --></svg>
</div>

• Inline SVG, no HTTP request
• Perfect at any resolution
• Slightly larger HTML payload (SVG code in page source)

​

Fallback Logic Implementation

{% if settings.logo_card_svg_code != blank %}
  <!-- Render Logo Card SVG Code -->
{% elsif settings.logo_svg_code != blank %}
  <!-- Render Logo SVG Code -->
{% elsif settings.logo_card_image != blank %}
  <!-- Render Logo Card Image -->
{% else %}
  <!-- Render Logo Image -->
{% endif %}

​

SVG Security and Sanitization

• JavaScript removed (SVG animations may not work)
• External resource references removed (linked fonts, images)
• Script tags stripped
• Event handlers removed (onclick, onload, etc.)

• Paths, shapes, text
• Fill and stroke colors
• Transforms and basic styling
• ViewBox and dimensions

​

File Size Recommendations

• Target: 50-100KB
• Maximum: 200KB (larger files slow gift card page loading)
• Optimization: Use TinyPNG, ImageOptim, or Shopify’s automatic optimization

• Target: Under 5KB (well-optimized SVG)
• Maximum: 20KB (very complex logos may reach this)
• Optimization: Use SVGO, SVGOMG.com, or export optimizer in design software

• Slower gift card page loading
• Longer time for customers to view gift card
• Poor experience on slow connections
• Unnecessary bandwidth usage

​

Accessibility Considerations

• Automatically include alt text (uses store name or “Gift card logo”)
• Screen readers announce logo presence
• Decorative role (not critical content)

• May include <title> tag for screen reader context
• Aria attributes for accessibility
• Semantically equivalent to image logo

​

Testing Gift Cards

1. Create gift card product in Shopify Admin
2. In test mode, purchase gift card (no actual charge)
3. Check email for gift card link
4. Click link to view gift card page
5. Verify logos display correctly on page and card graphic
6. Test print preview
7. Test on mobile device

• Page header logo loads and displays correctly
• Gift card graphic logo loads and displays correctly
• Logos have appropriate size/scale
• Logos have sufficient contrast against backgrounds
• Print preview shows logo clearly
• Mobile view displays logos properly
• SVG logos (if used) render without errors

​

Troubleshooting

• Verify Logo Image is uploaded (or Logo SVG Code is pasted)
• Check image file uploaded successfully (re-upload if necessary)
• Confirm you’re viewing an actual gift card page (not Theme Customizer preview)
• Clear browser cache and hard refresh (Cmd/Ctrl + Shift + R)
• Check image file isn’t corrupted (open directly in browser)

• Verify SVG code starts with <svg and ends with </svg>
• Check for syntax errors in SVG code (missing tags, unclosed elements)
• Ensure SVG doesn’t require external resources (fonts, images)
• Test SVG code in a separate HTML file to verify it’s valid
• Try simplifying SVG code (remove animations, complex effects)

• Verify Logo Card Image is actually uploaded (check field isn’t empty)
• Confirm Logo Card SVG Code isn’t set (it overrides Logo Card Image)
• Check card template includes card logo rendering (theme code issue if missing)
• View actual gift card (not Theme Customizer) to confirm

• Upload higher resolution image (2x display size minimum)
• Use SVG instead of image for perfect quality
• Check theme isn’t forcing small image to scale up excessively
• Verify image format is PNG (not overly-compressed JPG)

• Check if gift card background is different than expected (dark vs light)
• Use separate Logo Card Image with appropriate color (white for dark backgrounds, dark for light backgrounds)
• Test SVG with fill color appropriate for card backgrounds
• Preview actual gift card page to verify background color

• Theme controls logo sizing via CSS (not editable in Customizer)
• Try different logo dimensions (theme may have optimized size)
• For card logo, ensure dimensions are appropriate for constrained card space
• Advanced: Edit theme code to adjust logo size CSS

• Ensure Logo Card Image is high resolution (higher than screen display)
• Use SVG for perfect print quality at any size
• Check browser print preview settings (some browsers reduce image quality)
• Test on different browsers (Safari, Chrome, Firefox vary in print handling)

• Click “Save” in Theme Customizer after making changes
• Refresh gift card page (not Theme Customizer)
• Clear browser cache completely
• Check you’re editing the correct theme (published vs draft)
• View in incognito/private browser window to rule out caching