E-commerce
E-commerce — Gift Card Page
Copy-paste layout brief covering Navigation Bar, Hero Banner, Gift Card Design Selector and Amount Selection — hand it to ChatGPT, Claude, or v0 as-is.
E-commerce — Gift Card Page is a copy-ready build prompt for e-commerce pages. Paste it into ChatGPT, Claude, v0 and iterate from the first draft it returns.
Everything on this page — the summary, the category and the how-to — is written by HowToPrompts; the link below goes to the original project.
| Use case | E-commerce |
|---|---|
| Works with | ChatGPT, Claude, v0, Cursor |
| Source | websiteprompts.com |
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 it
- Copy the full prompt with the button above.
- Paste it into your model and add your brand, copy and colours.
- Ask for one section at a time if the first pass is too broad.
Compiled and written by HowToPrompts from public sources. View original source ↗
← Back to Website Prompts