Home E-commerce Gift Card Purchase Page

Gift Card Purchase Page

E-commerce gift card storefront with custom amounts, personalization, and delivery options

Gift Card E-commerce Gifting Checkout

Screenshots

See what this prompt generates across different AI tools

Copy this prompt and paste it into ChatGPT or Claude
Create an e-commerce gift card purchase page for "Lumina Shop" that lets customers buy, customize, and send digital or physical gift cards:

1. NAVIGATION BAR
- Logo: "Lumina" with diamond icon
- Links: Shop, Categories, Gift Cards (active), Sale, Account
- Right side: Search icon, heart icon, cart icon with badge
- Sticky on scroll with white background

2. HERO BANNER (40vh)
- Soft gradient background from #F3E8FF to #FDF2F8 (lavender to pink)
- Headline: "Give the Gift of Choice"
- Subheadline: "Send a Lumina gift card — digital or physical — for any occasion"
- Decorative illustration of wrapped gift cards fanned out
- Trust badges below: "Instant Delivery" · "Never Expires" · "Redeemable on Everything"

3. GIFT CARD DESIGN SELECTOR
- Section headline: "Choose a Design"
- Horizontal scrollable row of 8 card design thumbnails (120x80px each)
  - Birthday (confetti), Thank You (floral), Congratulations (stars), Holiday (snowflakes), Love (hearts), Just Because (abstract), Wedding (gold rings), Graduation (cap & tassel)
- Selected design shows enlarged preview (400x250px) with animated flip showing front and back
- Custom upload option: "Upload Your Own Image" with drag-and-drop zone

4. AMOUNT SELECTION
- Headline: "Select an Amount"
- Preset amount buttons in a row: $25, $50, $75, $100, $150, $200, $500
- Selected amount highlighted with #7C3AED purple border and background tint
- Custom amount input field: "Enter custom amount" with $ prefix
  - Min: $10, Max: $1,000
  - Validation message if out of range
- Bulk purchase link: "Buying 10+ cards? See corporate gifting"

5. PERSONALIZATION
- Recipient's name input field
- Sender's name input field
- Personal message textarea (max 200 characters with counter)
  - Placeholder: "Happy birthday! Treat yourself to something special."
- Preview card updates in real-time as user types

6. DELIVERY METHOD (toggle between two options)
Option A — Digital (default):
- Email address input for recipient
- Delivery date picker: "Send Now" or schedule for a future date
- "Add to Calendar" reminder checkbox
- Preview of email template

Option B — Physical:
- Recipient shipping address form
- Premium packaging upgrade (+$5): gift box with ribbon
- Estimated delivery: 3-5 business days
- Physical card mockup preview

7. ORDER SUMMARY SIDEBAR (sticky on desktop)
- Card design thumbnail
- Amount: $75.00
- Personalization preview (truncated)
- Delivery method: Digital / Physical
- Packaging: Standard / Premium
- Subtotal
- "Add to Cart" button (large, #7C3AED purple)
- "Buy Now" express checkout button (secondary)
- Accepted payment icons: Visa, Mastercard, Apple Pay, Google Pay, PayPal
- "Gift cards are non-refundable" disclaimer

8. GIFT CARD BALANCE CHECKER
- Below the main purchase section
- Headline: "Already Have a Gift Card?"
- Input field: "Enter your 16-digit card number"
- "Check Balance" button
- Result display: remaining balance, expiration status, recent transactions

9. FAQ SECTION (accordion)
- "How do digital gift cards work?" — Delivered instantly via email with a unique redemption code
- "Do gift cards expire?" — No, Lumina gift cards never expire
- "Can I use a gift card with other promotions?" — Yes, gift cards stack with all sales and coupons
- "What if I lose my physical card?" — Contact support with your order number for a replacement
- "Can I reload my gift card?" — Not currently, but you can purchase additional cards
- "Are gift cards refundable?" — Gift cards are non-refundable but transferable

10. CORPORATE GIFTING CTA
- Light purple background (#F5F3FF)
- Headline: "Corporate & Bulk Gifting"
- Subheadline: "Order 10+ gift cards with custom branding, CSV upload, and volume discounts"
- Bullet points: Custom branded designs, Bulk email delivery, Dedicated account manager
- "Contact Sales" button (outline purple)

Design: Clean and elegant. Primary: #7C3AED (purple), secondary: #EC4899 (pink), background: white with #F9FAFB sections. Cards with 12px border-radius, soft shadows. Typography: Plus Jakarta Sans for headings, Inter for body. Smooth transitions on card flip and design selection.

Responsive: On mobile, order summary moves below personalization as collapsible section. Design selector becomes 2-row grid. Amount buttons wrap to 2 rows. Sticky "Add to Cart" bar at bottom on mobile with amount display.

How to use this prompt

  1. 1 Click the "Copy Prompt" button above to copy the full prompt to your clipboard
  2. 2 Open ChatGPT, Claude, or your preferred AI assistant
  3. 3 Paste the prompt and customize any placeholder text (like product names or brand colors)
  4. 4 Let the AI generate your website code or design specifications

About this E-commerce Prompt

This Gift Card Purchase Page prompt is designed to help you quickly create professional e-commerce websites using AI tools like ChatGPT, Claude, v0 by Vercel, Cursor, and Bolt.new.

Whether you're a developer, designer, or entrepreneur, this free AI prompt gives you a head start on building gift card purchase page. Simply copy the prompt, paste it into your favorite AI coding assistant, and customize it to match your brand.

Compatible AI Tools

  • ChatGPT (GPT-4) - Great for detailed code generation and explanations
  • Claude 3 - Excellent for complex, nuanced website designs
  • v0 by Vercel - Perfect for React and Next.js components
  • Cursor - Ideal for AI-powered coding in your IDE
  • Bolt.new - Quick prototyping and full-stack apps
  • Lovable - User-friendly AI website builder

Tags

Gift Card E-commerce Gifting Checkout E-commerce AI Prompt Free Template Website Builder Web Design Copy Paste Prompt