> ## 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

> Customize the appearance of gift card pages with logo branding

## 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.

<Note>
  This section only appears on **gift card template pages** (**/products/\[gift-card-handle]**). It does not appear on regular product or homepage sections.
</Note>

## 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

<Tip>
  If you have a logo with transparency, use PNG format. If logo has white background, use JPG for smaller file size.
</Tip>

### 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 theme={null}
<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>
```

<Warning>
  Only use SVG code from trusted sources. Malicious SVG code can contain scripting vulnerabilities. Always use SVG files you created or from reputable sources.
</Warning>

### 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

<CardGroup cols={2}>
  <Card title="Standard Logo Branding" icon="image">
    Upload same logo used in header to "Logo Image" for consistent branding across store and gift card pages.
  </Card>

  <Card title="SVG Logo for Scalability" icon="vector-square">
    Use SVG code for ultra-sharp logo display on high-resolution devices (retina, 4K displays). Perfect for simple logos.
  </Card>

  <Card title="Branded Gift Cards" icon="gift">
    Upload brand mark/icon to "Logo Card Image" to add decorative branding on the gift card customers see and share.
  </Card>

  <Card title="Seasonal Gift Card Design" icon="snowflake">
    Update "Logo Card Image" seasonally (holiday icon forChristmas, heart for Valentine's, etc.) to match promotions.
  </Card>
</CardGroup>

## Best practices

<CardGroup cols={2}>
  <Card title="Use Consistent Branding" icon="paintbrush">
    Use same logo across store (header, footer, gift card pages) for cohesive brand identity customers recognize.
  </Card>

  <Card title="Optimize Image Size" icon="compress">
    Compress logo images to under 100KB. Large images slow gift card page load. Use TinyPNG or similar tools.
  </Card>

  <Card title="Test on Mobile" icon="mobile">
    View gift card page on mobile to ensure logos display properly and are readable at smaller sizes.
  </Card>

  <Card title="Ensure Logo Contrast" icon="circle-half-stroke">
    Logo must be visible on gift card page background. Test with different color schemes or use logo with transparency.
  </Card>

  <Card title="Prefer SVG for Simple Logos" icon="code">
    SVG provides best quality and smallest file size for text-based or simple icon logos. Use PNG for complex logos with gradients/photos.
  </Card>

  <Card title="Keep Card Logo Simple" icon="circle">
    "Logo Card Image" appears small on gift card. Use simple, recognizable brand mark rather than detailed logo.
  </Card>
</CardGroup>

## Gift Card Setup

### Enabling Gift Cards

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

<Steps>
  <Step title="Go to Gift Cards settings">
    Shopify Admin → **Products** → **Gift cards**
  </Step>

  <Step title="Enable gift cards">
    Toggle "Gift cards are enabled" to ON
  </Step>

  <Step title="Configure gift card values">
    Set available gift card denominations (e.g., $25, $50, $100, $250)
  </Step>

  <Step title="Customize branding">
    Go to **Online Store → Themes → Customize** → Open gift card product template → Configure Gift Card section logos
  </Step>

  <Step title="Test purchase">
    Make test gift card purchase to verify page displays correctly with logos
  </Step>
</Steps>

### 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

| Format  | Best For                                              | Pros                                                   | Cons                                                   |
| ------- | ----------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------ |
| **PNG** | Complex logos with gradients, photos, multiple colors | Wide compatibility, easy to use, supports transparency | Larger file size, pixelated when scaled up             |
| **JPG** | Simple logos on solid backgrounds                     | Smallest file size for photos                          | No transparency, lossy compression                     |
| **SVG** | Text-based logos, simple icons, single/few colors     | Infinitely scalable, tiny file size, editable with CSS | Not 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

<AccordionGroup>
  <Accordion title="Logo not displaying on gift card page">
    **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/](https://jakearchibald.github.io/svgomg/) to check for errors)
    * Check browser console (F12 → Console) for loading errors
  </Accordion>

  <Accordion title="Logo appears too large or too small">
    **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
  </Accordion>

  <Accordion title="Logo Card Image not visible on gift card">
    **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
  </Accordion>

  <Accordion title="SVG code displays as text instead of image">
    **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)
  </Accordion>

  <Accordion title="Logo looks blurry on high-resolution displays">
    **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
  </Accordion>
</AccordionGroup>

## Related Settings

### 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

### Related Sections

* **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.