> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Gift Card
> Gift card template section for customizing gift card page branding with logo images or SVG code
## What It Does
The **Gift Card** section controls the branding and visual appearance of Shopify gift card pages. Customize the logo displayed at the top of gift card pages and on the printable gift card itself, using either uploaded images or SVG code for sharp, scalable graphics.
## Getting Started
Navigate to **Online Store > Themes > Customize > Gift Cards** template (automatic template for gift card purchases)
Add your store logo using the Logo Image picker, or use SVG Code for vector graphics
Add a separate logo for the gift card graphic itself, or leave empty to use main logo
Test by creating a test gift card product and purchasing it to see the full gift card experience
## Settings
**Type:** Image picker\
**Default:** Empty
Your store logo displayed at the **top of the gift card page** (the page customers see when they receive/redeem a gift card).
### What This Logo Controls
This logo appears on the **gift card landing page**:
* Top of page (header area)
* Visible when customer clicks gift card link in email
* Shown when customer views gift card to check balance
* Brand identifier for gift card redemption experience
**Does NOT appear:**
* On the gift card graphic itself (use Logo Card Image for that)
* In email notifications (controlled by email settings)
* On printed receipts
### Image Specifications
**Recommended dimensions:**
* **Width:** 200-400px (optimal)
* **Height:** 60-120px (optimal)
* **Aspect ratio:** Horizontal logos work best (landscape orientation)
* **File format:** PNG with transparent background (recommended) or JPG
* **File size:** Under 100KB (page header images should load quickly)
### Image Guidelines
**Best practices:**
* Use your standard store logo (maintains brand consistency)
* Transparent background PNG for professional appearance
* High resolution for retina displays (2x actual display size)
* Horizontal orientation (vertical logos may appear too large)
* Simple, recognizable logo (avoids complexity at small sizes)
**Avoid:**
* Extremely small images (will appear blurry when scaled up)
* Very tall logos (can dominate header, push content down)
* Complex logos with fine details (may not be legible at header size)
* Text-heavy logos (hard to read at smaller sizes)
**Type:** Textarea\
**Default:** Empty\
**Info:** "Overwrites logo image"
Paste SVG (Scalable Vector Graphics) code for your logo instead of using an uploaded image. Provides perfectly sharp logos at any size and typically loads faster than image files.
### SVG vs Image
**Why use SVG instead of image?**
* **Perfect scaling:** Looks crisp at any resolution (retina, 4K, print)
* **Smaller file size:** Typically 20-80% smaller than equivalent PNG/JPG
* **Faster loading:** Inline SVG requires no HTTP request
* **Color flexibility:** Can be dynamically styled with CSS
* **Print quality:** Perfect for any DPI
**When to use Image instead:**
* Logo has photographic elements or gradients
* Logo uses special fonts not web-safe
* You don't have SVG version of logo
* Logo is complex with many paths (very large SVG code)
### How to Get SVG Code
**Method 1: Export from design software**
1. Open logo in Adobe Illustrator, Figma, or Sketch
2. Export as SVG (optimize for web if option available)
3. Open exported .svg file in text editor
4. Copy all code (starts with ``)
5. Paste into this field
**Method 2: Convert image to SVG**
1. Use online converter (e.g., vectormagic.com, autotracer.com)
2. Upload your logo image
3. Download SVG file
4. Open in text editor and copy code
**Note:** Traced SVGs from complex images may have large code (10,000+ characters). Hand-crafted SVGs from design software are usually cleaner.
### SVG Code Example
```svg theme={null}
```
### Important: Overwrites Logo Image
When SVG code is present, it **completely replaces** the Logo Image:
* Logo Image setting is ignored
* SVG code takes priority
* To revert to image, clear SVG code field entirely
**Best practice:** Use either Logo Image OR Logo SVG Code, not both. Choose based on logo type and quality requirements.
### SVG Code Tips
**Do:**
* Use `viewBox` attribute for responsive scaling
* Set reasonable `width` and `height` attributes
* Optimize SVG code (remove unnecessary attributes, comments)
* Test SVG displays correctly after pasting
**Don't:**
* Include external stylesheet references (may not load)
* Use JavaScript in SVG (security risk, won't execute)
* Paste very complex SVGs (5000+ lines of code—use image instead)
* Forget closing `` tag (will break rendering)
### Validating SVG Code
Before pasting:
1. Open SVG code in browser to verify it displays correctly
2. Check code starts with ``
3. Confirm no external dependencies (fonts, images, stylesheets)
4. Test on different screen sizes (SVG should scale properly)
**Type:** Image picker\
**Default:** Empty\
**Info:** "Defaults to logo image"
Logo displayed **on the gift card graphic itself**—the visual card representation customers see and can print. If empty, uses the main Logo Image.
### What This Logo Controls
This logo appears on the **gift card graphic**:
* Visual gift card design (the "card" customers see)
* Printable gift card version
* Email attachments (if theme includes card preview)
* Balance-check view
**Separate from:**
* Page header logo (controlled by Logo Image)
* Email logo (controlled by email settings in Shopify Admin)
### When to Use Separate Card Logo
**Use separate Logo Card Image when:**
**Different branding for gift cards:**
* Page header: Standard color logo
* Gift card: White/inverted logo (for dark card background)
**Size optimization:**
* Page header: Wide horizontal logo
* Gift card: Square or vertical logo (fits card dimensions better)
**Seasonal variations:**
* Page header: Year-round logo
* Gift card: Holiday-themed logo for gift-giving season
**Print considerations:**
* Page header: Standard screen logo
* Gift card: High-contrast logo optimized for printing
**Leave empty (use default) when:**
* Same logo works for both page and card
* Logo is already versatile (works on any background)
* Simpler management (one logo to maintain)
* Brand consistency is priority
### Card Logo Image Specifications
Gift cards have constrained space, so logo sizing differs from page header:
**Recommended dimensions:**
* **Width:** 200-300px (smaller than page header logo)
* **Height:** 80-150px (or proportional to width)
* **Aspect ratio:** Square or near-square works best on card
* **File format:** PNG with transparent background (essential)
* **File size:** Under 100KB
**Key difference from page logo:**
* **Smaller overall size** (card has limited space)
* **Transparent background required** (card has its own background)
* **High contrast** (needs to show clearly on card background)
### Background Considerations
Gift card templates use **background images or colors**. Your card logo must work with:
* Dark backgrounds (use light/white logo)
* Light backgrounds (use dark logo)
* Patterned backgrounds (use solid logo with contrast)
**Tip:** Check your theme's gift card background design, then choose logo color/style that provides sufficient contrast.
**Type:** Textarea\
**Default:** Empty\
**Info:** "Overwrites logo card image and defaults to logo SVG code"
SVG code for the gift card graphic logo. Provides the same benefits as Logo SVG Code but specifically for the card design.
### Fallback Hierarchy
This setting has a **multi-level fallback**:
1. **If Logo Card SVG Code is present:** Uses this SVG (highest priority)
2. **Else if Logo SVG Code is present:** Uses main Logo SVG Code
3. **Else if Logo Card Image is present:** Uses Logo Card Image
4. **Else:** Uses main Logo Image
**In simple terms:**
* Card SVG > Main SVG > Card Image > Main Image
This allows flexible logo management:
* Set all four: Maximum customization (separate vector graphics for page and card)
* Set only main logo (image or SVG): Same logo everywhere (simplest)
* Set main logo + card logo: Different styles for page vs card
* Mix and match as needed
### When to Use Separate Card SVG
**Use separate Logo Card SVG Code when:**
**Color variations:**
```svg theme={null}
```
**Size/detail variations:**
* Page header: Detailed logo with tagline
* Gift card: Simplified logo icon only (fits card space)
**Print optimization:**
* Card SVG: Simplified paths for clean printing
* Page SVG: More complex with gradients (screen-only effects)
**Leave empty (use fallback) when:**
* Main Logo SVG works for both page and card
* Simplicity is priority (fewer settings to manage)
* Logo is monochrome and versatile
### SVG Code Requirements for Cards
Same technical requirements as Logo SVG Code:
* Complete SVG code (``)
* Responsive `viewBox` attribute
* No external dependencies
* Optimized file size (under 5KB ideally)
**Additional considerations for cards:**
* **High contrast:** Ensure paths have strong color (card backgrounds vary)
* **Simplicity:** Gift cards are smaller visual space than page headers
* **Test printing:** View in print preview to confirm logo looks good printed
### Managing Multiple Logo Variants
**Strategy 1: Minimal (Easiest)**
* Set only Logo Image: One logo everywhere
* **Pros:** Simplest management, consistent branding
* **Cons:** May not be optimized for all contexts
**Strategy 2: Page vs Card (Balanced)**
* Set Logo Image (page header)
* Set Logo Card Image (gift card)
* **Pros:** Customized for each context
* **Cons:** Two logos to maintain
**Strategy 3: Vector Everywhere (Best Quality)**
* Set Logo SVG Code (page header)
* Set Logo Card SVG Code (card)
* **Pros:** Perfect quality, fast loading
* **Cons:** Requires SVG versions of logo
**Strategy 4: Hybrid (Flexible)**
* Set Logo SVG Code (page header, vector)
* Set Logo Card Image (card, image)
* **Pros:** Optimized page, simple card
* **Cons:** Mixed file types to manage
## Best practices
Always use PNG images with transparent backgrounds for logos. Opaque backgrounds (white boxes around logo) look unprofessional on gift card pages.
Use SVG code for page header logo when possible. Provides perfect sharpness on all devices and loads faster than images.
Create a test gift card product, purchase it (free in test mode), and view the actual gift card page to verify logos display correctly.
Gift cards are often printed. Ensure logos have sufficient resolution and contrast to look good printed on paper.
Check your gift card template's background color/image. Ensure logo has enough contrast to be clearly visible against that background.
Gift cards have limited space. Use simplified logo versions (icon only, no tagline) on cards if your full logo is complex.
Unless you have specific reason for different logos, use the same logo on page and card for brand consistency and simpler management.
Optimize logo images to under 100KB. Use tools like TinyPNG or ImageOptim. Smaller files load faster without visible quality loss.
## Common Use Cases
### Standard Setup (Same Logo Everywhere)
**Settings:**
* 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)
**Result:** Simple management, same logo on page header and gift card graphic
**Best for:** Most stores, consistent branding, straightforward logo usage
### Premium Setup (SVG Everywhere for Quality)
**Settings:**
* 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)
**Result:** Perfect logo quality on all devices and screen resolutions, fastest loading
**Best for:** Brands with vector logo assets, quality-focused stores, performance optimization
### Dark Gift Card Background (Inverted Logo)
**Settings:**
* 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
**Result:** Logo color adapts to background—dark on light page, light on dark card
**Best for:** Gift card templates with dark backgrounds, high-contrast branding
### Seasonal Gift Card Branding
**Settings:**
* 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
**Result:** Standard logo on page, special holiday version on gift card graphic
**Best for:** Gift-giving seasons (holidays, Mother's Day, Valentine's), special promotions
**Note:** Remember to update Logo Card Image back to standard after seasonal period.
### Simplified Card Logo for Space
**Settings:**
* 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
**Result:** Detailed logo on page where space allows, simplified version on constrained gift card
**Best for:** Complex logos, logos with long text, maximizing card design space
## Layout Behavior
### Gift Card Page Structure
When a customer views a gift card, the page structure is:
```
[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
**Page Header Logo:**
* 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)
**Gift Card Graphic Logo:**
* 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
On mobile devices:
* **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
Both image and SVG logos are fully responsive and adapt to screen size.
### Print Behavior
When customers print gift cards:
* **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)
**Print recommendation:** Test print preview to verify logo quality before publishing.
## 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)
**Note:** Gift Card section is **isolated** to the gift card template. It doesn't affect other templates or store branding.
## Technical Notes
### Gift Card Template Isolation
The Gift Card section only affects the **gift card template** (gift\_card.liquid). It has no impact on:
* 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
**Image rendering (PNG/JPG):**
```html theme={null}
```
* HTTP request to load image file
* Width/height attributes set via CSS
* May appear blurry on high-DPI screens if not 2x resolution
**SVG rendering:**
```html theme={null}
```
* Inline SVG, no HTTP request
* Perfect at any resolution
* Slightly larger HTML payload (SVG code in page source)
### Fallback Logic Implementation
The theme checks settings in this priority order:
```liquid theme={null}
{% if settings.logo_card_svg_code != blank %}
{% elsif settings.logo_svg_code != blank %}
{% elsif settings.logo_card_image != blank %}
{% else %}
{% endif %}
```
This means **any higher-priority setting** overrides lower-priority settings.
### SVG Security and Sanitization
Shopify **sanitizes SVG code** to prevent security issues:
* JavaScript removed (SVG animations may not work)
* External resource references removed (linked fonts, images)
* Script tags stripped
* Event handlers removed (onclick, onload, etc.)
**Safe SVG features:**
* Paths, shapes, text
* Fill and stroke colors
* Transforms and basic styling
* ViewBox and dimensions
### File Size Recommendations
**Logo Image (PNG/JPG):**
* **Target:** 50-100KB
* **Maximum:** 200KB (larger files slow gift card page loading)
* **Optimization:** Use TinyPNG, ImageOptim, or Shopify's automatic optimization
**Logo SVG Code:**
* **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
**Larger files impact:**
* Slower gift card page loading
* Longer time for customers to view gift card
* Poor experience on slow connections
* Unnecessary bandwidth usage
### Accessibility Considerations
**Logo images:**
* Automatically include `alt` text (uses store name or "Gift card logo")
* Screen readers announce logo presence
* Decorative role (not critical content)
**Logo SVG:**
* May include `` tag for screen reader context
* Aria attributes for accessibility
* Semantically equivalent to image logo
**Best practice:** Ensure logo communicates brand visually, but page functions without logo for accessibility.
### Testing Gift Cards
**How to test:**
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
**Test checklist:**
* 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
**Logo not displaying on gift card page:**
* 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)
**SVG logo not appearing:**
* 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)
**Logo card image not showing (page logo shows instead):**
* 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
**Logo looks blurry or pixelated:**
* 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)
**Logo has wrong colors on gift card:**
* 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
**Logo too large or too small:**
* 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
**Print preview shows no logo or low-quality logo:**
* 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)
**Changes not taking effect:**
* 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
```
* HTTP request to load image file
* Width/height attributes set via CSS
* May appear blurry on high-DPI screens if not 2x resolution
**SVG rendering:**
```html theme={null}