Gift Card Page Template

The gift card page is a special standalone page that displays when customers receive or view a gift card. It shows the gift card code, balance, expiration date, and allows customers to add it to Apple Wallet.

Overview

The gift card page is automatically generated by Shopify when a gift card is created and sent to a customer. It's a standalone page (not part of the theme layout) that displays all the information needed to use the gift card. Customers can view their gift card balance, copy the code, and add it to Apple Wallet if they're on an Apple device.

Where to Use

The gift card page template (gift_card.liquid) is automatically used by Shopify when:

  • A gift card is purchased and sent to a customer
  • A customer clicks the gift card link in their email
  • A customer views their gift card from their account

Access the page:

  • Gift card link sent via email
  • Customer account (if gift cards are saved)
  • Direct gift card URL (provided by Shopify)

Note: This template cannot be customized through the theme editor like other templates. It's a standalone Liquid template that displays gift card information.

Page Structure

The gift card page displays in this order:

  1. Gift Card Balance: Large display of the remaining balance
  2. Status Message: Shows if the gift card is expired or disabled
  3. Expiration Date: Displays expiration date (if applicable)
  4. Store Logo: Your store logo or default gift card image
  5. Store Name: Your shop name
  6. Instructions: How to use the gift card at checkout
  7. Gift Card Code: The gift card code in a dashed border box
  8. Apple Wallet Button: Option to add to Apple Wallet (if available)

What's Displayed

Gift Card Balance

  • What it shows: The remaining balance on the gift card
  • Format: Formatted as currency (e.g., "$50.00")
  • Size: Large, prominent display
  • Updates: Automatically updates as gift card is used

Status Messages

  • Expired: Shows if gift card has expired
  • Disabled: Shows if gift card has been disabled
  • Style: Red background with error message
  • Visibility: Only appears if gift card is expired or disabled

Expiration Date

  • What it shows: Date when gift card expires
  • Format: "Expires on [Month Day, Year]"
  • Visibility: Only shows if gift card has an expiration date
  • Style: Muted text, smaller font

Store Logo

  • What it shows: Your store logo (if set) or default gift card image
  • Size: Maximum 300px width
  • Fallback: Default Shopify gift card image if no logo
  • Purpose: Branding and visual identification

Store Name

  • What it shows: Your shop name
  • Purpose: Identifies which store the gift card is for
  • Style: Medium-sized heading

Instructions

  • What it shows: Text explaining how to use the gift card
  • Default text: "Use this code at checkout"
  • Purpose: Guides customers on how to redeem
  • Language: Uses theme translation keys

Gift Card Code

  • What it shows: The unique gift card code
  • Format: Formatted code (e.g., "XXXX-XXXX-XXXX")
  • Style: Monospace font, dashed border, prominent display
  • Purpose: Code to enter at checkout

Apple Wallet Button

  • What it shows: "Add to Apple Wallet" button
  • Visibility: Only shows if gift card supports Apple Wallet
  • Function: Adds gift card to Apple Wallet app
  • Device: Only appears on Apple devices

How It Works

Automatic Generation

  • Gift card pages are automatically created by Shopify
  • Each gift card has a unique URL
  • Page is generated when gift card is created
  • Cannot be manually created or edited

Standalone Page

  • Uses {% layout none %} - no theme header/footer
  • Self-contained HTML page
  • Minimal styling for fast loading
  • Centered layout on page

Gift Card Information

The page automatically displays:

  • Balance: Current remaining balance
  • Code: Unique gift card code
  • Status: Active, expired, or disabled
  • Expiration: Expiration date (if set)
  • Shop Info: Store name and logo

Apple Wallet Integration

  • Automatically detects if gift card supports Apple Wallet
  • Shows "Add to Apple Wallet" button if available
  • Only appears on Apple devices
  • Adds gift card to Apple Wallet app when clicked

Customization

Limited Customization

Unlike other templates, the gift card template has limited customization options:

  • Cannot be edited in theme editor: Template is standalone
  • Styling is inline: Styles are in the template file
  • Requires code changes: Must edit templates/gift_card.liquid directly
  • Shopify updates: May be overwritten by Shopify updates

What Can Be Customized

If you edit the template file directly, you can customize:

  • Colors: Background, text, border colors
  • Layout: Spacing, padding, card design
  • Typography: Font sizes, weights, styles
  • Styling: Border radius, shadows, effects

What Cannot Be Customized

  • Gift card data: Balance, code, expiration (from Shopify)
  • Apple Wallet: Button appears automatically if supported
  • Structure: Core HTML structure is required
  • Functionality: Gift card redemption logic

Styling

Current Design

The gift card page uses:

  • Centered layout: Card centered on page
  • Card design: Rounded corners, shadow, border
  • Responsive: Adapts to mobile screens
  • Theme colors: Uses theme CSS variables
  • Clean design: Minimal, focused on gift card info

Color Scheme

  • Uses theme CSS variables for colors
  • Background: var(--color-background)
  • Text: var(--color-foreground)
  • Border: var(--color-border)
  • Adapts to theme color settings

Responsive Design

  • Desktop: Larger card, more padding
  • Mobile: Smaller card, reduced padding
  • Code display: Smaller font on mobile
  • Logo: Responsive image sizing

Gift Card Features

Balance Display

  • Shows current remaining balance
  • Updates automatically as gift card is used
  • Formatted as currency
  • Large, prominent display

Code Formatting

  • Gift card code is formatted for readability
  • Dashed border for easy identification
  • Monospace font for clarity
  • Easy to copy and use

Expiration Handling

  • Shows expiration date if set
  • Displays "Expired" status if past expiration
  • Clear messaging about expiration
  • Helps customers know when to use

Apple Wallet Support

  • Automatic detection of Apple Wallet support
  • "Add to Apple Wallet" button
  • Seamless integration with Apple devices
  • Convenient for customers

Tips & Best Practices

✅ Do's

  • Test gift cards: Send test gift cards to see how they appear
  • Use clear instructions: Ensure instructions are clear
  • Set expiration dates: Help customers know when to use
  • Use store logo: Brand the gift card page
  • Test on mobile: Ensure mobile experience is good
  • Test Apple Wallet: Test on Apple devices if applicable

❌ Don'ts

  • Don't edit template unnecessarily: May break gift card functionality
  • Don't remove required elements: Code, balance, etc. are required
  • Don't change core structure: May break gift card redemption
  • Don't override Shopify functionality: Gift card logic is handled by Shopify
  • Don't forget mobile: Test on phones and tablets

Troubleshooting

Gift Card Not Showing

  • Check: Verify gift card was created in Shopify admin
  • Check: Ensure gift card link is correct
  • Check: Gift card may have expired or been disabled
  • Check: Verify gift card email was sent

Balance Not Updating

  • Check: Balance updates automatically when gift card is used
  • Check: Refresh the page to see updated balance
  • Check: Balance is managed by Shopify, not theme

Code Not Displaying

  • Check: Gift card code is automatically generated by Shopify
  • Check: Code should appear in dashed border box
  • Check: Verify template file hasn't been corrupted

Apple Wallet Not Showing

  • Check: Only appears on Apple devices
  • Check: Gift card must support Apple Wallet
  • Check: May not be available for all gift cards
  • Check: Requires iOS device with Apple Wallet app

Logo Not Showing

  • Check: Verify logo is set in theme settings
  • Check: Logo should appear automatically
  • Check: Falls back to default gift card image if no logo
  • Check: Logo size is limited to 300px width

Expiration Date Not Showing

  • Check: Gift card must have expiration date set
  • Check: Only shows if expiration date is configured
  • Check: Expiration is set in Shopify admin when creating gift card

Gift Card Management

Creating Gift Cards

  1. Go to Products → Gift cards in Shopify admin
  2. Click Issue gift card
  3. Set amount, recipient, expiration (optional)
  4. Gift card is created and email is sent
  5. Customer receives link to gift card page

Viewing Gift Cards

  • Customers can view gift cards from:
    • Email link
    • Customer account (if saved)
    • Direct gift card URL

Using Gift Cards

  1. Customer receives gift card link
  2. Views gift card page
  3. Copies gift card code
  4. Uses code at checkout
  5. Balance updates automatically

Related Templates

  • Product Page - Where customers can purchase gift cards
  • Cart Page - Where gift card codes are entered
  • Customer Account - Where customers can view saved gift cards

Related Sections

  • Gift Card Section - Section to promote gift cards on other pages
  • Product Form - Where customers purchase gift cards

Next Steps:

  • Learn about Gift Card Section (for promoting gift cards)
  • Set up gift cards in Shopify admin
  • Test gift card functionality
  • Customize gift card template (if needed, with caution)