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 Copia el prompt de arriba
- 2 Pégalo en tu herramienta de IA favorita (ChatGPT, Claude, v0, etc.)
- 3 La IA generará el código del sitio web por ti
- 4 Personaliza e itera según tus necesidades
Más Prompts de E-commerce
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