Startseite 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
Kopiere diesen Prompt und füge ihn in ChatGPT oder Claude ein
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.

So verwendest du diesen Prompt

  1. 1 Kopiere den Prompt oben
  2. 2 Füge ihn in dein Lieblings-KI-Tool ein (ChatGPT, Claude, v0, etc.)
  3. 3 Die KI generiert den Website-Code für dich
  4. 4 Passe an und iteriere nach deinen Bedürfnissen

Über diesen E-Commerce Prompt

Dieser Gift Card Purchase Page Prompt wurde entwickelt, um dir zu helfen, schnell professionelle e-commerce-Websites mit KI-Tools wie ChatGPT, Claude, v0 von Vercel, Cursor und Bolt.new zu erstellen.

Ob Entwickler, Designer oder Unternehmer - dieser kostenlose KI-Prompt gibt dir einen Vorsprung beim Erstellen von gift card purchase page. Kopiere einfach den Prompt, füge ihn in deinen bevorzugten KI-Coding-Assistenten ein und passe ihn an deine Marke an.

Kompatible KI-Tools

  • ChatGPT (GPT-4) - Hervorragend für detaillierte Code-Generierung und Erklärungen
  • Claude 3 - Ausgezeichnet für komplexe, nuancierte Website-Designs
  • v0 von Vercel - Perfekt für React- und Next.js-Komponenten
  • Cursor - Ideal für KI-gestütztes Coding in deiner IDE
  • Bolt.new - Schnelles Prototyping und Full-Stack-Apps
  • Lovable - Benutzerfreundlicher KI-Website-Builder

Tags

Gift Card E-commerce Gifting Checkout E-Commerce KI-Prompt Kostenlose Vorlage Website-Builder Webdesign Copy-Paste Prompt