Inicio 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
Copia este prompt y pégalo en ChatGPT o 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.

Cómo usar este prompt

  1. 1 Copia el prompt de arriba
  2. 2 Pégalo en tu herramienta de IA favorita (ChatGPT, Claude, v0, etc.)
  3. 3 La IA generará el código del sitio web por ti
  4. 4 Personaliza e itera según tus necesidades

Acerca de este Prompt de E-commerce

Este prompt Gift Card Purchase Page está diseñado para ayudarte a crear rápidamente sitios web profesionales de e-commerce usando herramientas de IA como ChatGPT, Claude, v0 de Vercel, Cursor y Bolt.new.

Ya seas desarrollador, diseñador o emprendedor, este prompt de IA gratuito te da una ventaja al crear gift card purchase page. Simplemente copia el prompt, pégalo en tu asistente de código IA favorito y personalízalo para tu marca.

Herramientas de IA Compatibles

  • ChatGPT (GPT-4) - Excelente para generación detallada de código y explicaciones
  • Claude 3 - Excelente para diseños web complejos y matizados
  • v0 de Vercel - Perfecto para componentes React y Next.js
  • Cursor - Ideal para codificación potenciada por IA en tu IDE
  • Bolt.new - Prototipado rápido y apps full-stack
  • Lovable - Constructor de sitios web IA fácil de usar

Etiquetas

Gift Card E-commerce Gifting Checkout E-commerce Prompt de IA Plantilla Gratis Constructor Web Diseño Web Prompt Copiar Pegar