E-commerce
E-commerce — Loyalty Rewards Page
Copy-paste layout brief covering Header Banner, Tier Status Section, Points Activity Log and Rewards Catalog — hand it to ChatGPT, Claude, or v0 as-is.
E-commerce — Loyalty Rewards 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.
We keep this entry in sync on a schedule, so the counts and the description track the upstream project.
| Use case | E-commerce |
|---|---|
| Works with | ChatGPT, Claude, v0, Cursor |
| Source | websiteprompts.com |
Create a customer loyalty and rewards program page for an e-commerce brand called "Elevate Rewards" that lets members track points, unlock tiers, and redeem perks. The design should feel exclusive and motivating — like a premium club membership.
1. HEADER BANNER
- Full-width gradient banner (#7C3AED purple to #2563EB blue)
- Left side: "Welcome back, Sarah!" with member since date "Member since Jan 2024"
- Right side: Current points balance displayed large — "4,280 Points" with sparkle icon
- Below points: "You're 720 points away from Platinum!" with slim progress bar
- Mobile: stacked vertically, centered
2. TIER STATUS SECTION
- Horizontal tier progression bar showing 4 tiers:
- Bronze (0–1,000 pts) — #CD7F32
- Silver (1,001–3,000 pts) — #9CA3AF
- Gold (3,001–6,000 pts) — #F59E0B
- Platinum (6,001+ pts) — #7C3AED
- Current tier "Gold" highlighted with glow effect and checkmark
- Each tier shows its key perk underneath:
- Bronze: "Earn 1pt per $1"
- Silver: "5% birthday discount"
- Gold: "Free shipping on all orders"
- Platinum: "Early access + personal shopper"
- Active milestone marker on the bar at 4,280/6,000
- Card below: "Your Gold Benefits" — 4 icon cards showing active perks (free shipping, 2x point days, exclusive sales, priority support)
3. POINTS ACTIVITY LOG (table/list)
- Section title: "Points History"
- Filter tabs: All | Earned | Redeemed | Expired
- Table columns: Date, Description, Points (+/−), Balance
- Sample rows:
- Mar 10, 2026 | "Purchase — Order #8834" | +240 | 4,280
- Mar 5, 2026 | "Redeemed — $10 Store Credit" | −500 | 4,040
- Feb 28, 2026 | "Bonus — Double Points Weekend" | +380 | 4,540
- Feb 20, 2026 | "Purchase — Order #8791" | +160 | 4,160
- Feb 14, 2026 | "Bonus — Valentine's Day Promo" | +200 | 4,000
- Earned points in green, redeemed/expired in red
- Pagination: "Showing 1–10 of 47 transactions"
- Mobile: card layout instead of table
4. REWARDS CATALOG (redemption grid)
- Section title: "Redeem Your Points"
- Filter bar: Category (All, Discounts, Products, Experiences) + Sort (Points: Low to High)
- 3-column card grid (2 on tablet, 1 on mobile):
- "$5 Store Credit" — 250 pts — gift card icon — "Redeem" button
- "$10 Store Credit" — 500 pts — gift card icon — "Redeem" button
- "Free Express Shipping" — 300 pts — truck icon — "Redeem" button
- "20% Off Next Order" — 800 pts — tag icon — "Redeem" button
- "Exclusive Tote Bag" — 1,500 pts — bag icon — "Redeem" button (photo thumbnail)
- "VIP Shopping Event Access" — 3,000 pts — star icon — "Redeem" button
- Cards: white background, 12px border-radius, soft shadow, hover lift
- Insufficient points: button grayed out with "Need X more pts"
5. EARN MORE POINTS (action cards)
- Section title: "Ways to Earn"
- 4 horizontal action cards:
- "Shop & Earn" — "Earn 1 point for every $1 spent" — shopping bag icon — "Shop Now" link
- "Refer a Friend" — "Give $10, get 500 points when they purchase" — users icon — "Share Link" button
- "Write a Review" — "Earn 50 points per product review" — pencil icon — "Review Products" link
- "Connect Social" — "Follow us on Instagram for 100 bonus points" — Instagram icon — "Connect" button
- Light purple background (#F5F3FF) for the section
- Cards: white, left icon, right CTA, border-left 4px accent color
6. REFERRAL TRACKER (mini section)
- Your unique referral link with copy button: "elevate.com/ref/sarah2024"
- Stats row: "12 friends invited" | "8 signed up" | "3,500 pts earned from referrals"
- Leaderboard teaser: "You're #14 on this month's referral leaderboard!"
7. UPCOMING PROMOTIONS
- Section title: "Don't Miss Out"
- 2 promo cards side by side:
- "Triple Points Weekend" — Mar 22–24, 2026 — "Earn 3x points on all purchases" — countdown timer showing days/hours/minutes — purple gradient background
- "Platinum Flash Sale" — Mar 28, 2026 — "Gold & Platinum members get 30% off sitewide" — gold accent border — "Set Reminder" button
- Mobile: stacked vertically
8. MEMBER DASHBOARD OVERVIEW
- Section title: "Your Rewards Snapshot"
- 4 quick-stat cards in a row (2x2 on mobile):
- "Total Earned" — "12,450 pts" — trending-up icon — green accent — "+1,240 this month"
- "Total Redeemed" — "8,170 pts" — gift icon — blue accent — "Last: $10 credit on Mar 5"
- "Referral Bonus" — "3,500 pts" — users icon — purple accent — "8 successful referrals"
- "Next Reward" — "220 pts away" — target icon — orange accent — "$5 Store Credit"
- Cards: white background, top colored border (4px), 12px border-radius, subtle shadow
- Each card shows a small sparkline chart of the past 6 months
9. GAMIFICATION & CHALLENGES
- Section title: "Challenges & Achievements"
- Subtitle: "Complete challenges to earn bonus points and unlock exclusive badges"
- Active Challenges (3 cards in a row, 1 on mobile):
- "Weekend Warrior" — "Make 3 purchases this weekend" — 500 bonus pts — progress: 1/3 — shield icon — expires "Mar 16"
- "Review Rockstar" — "Write 5 product reviews" — 300 bonus pts — progress: 3/5 — star icon — expires "Mar 31"
- "Social Butterfly" — "Share 2 products on social media" — 200 bonus pts — progress: 0/2 — share icon — expires "Mar 25"
- Progress bars with animated fill, percentage label
- Badges Section below:
- "Earned Badges" heading with count (6/15)
- Grid of circular badge icons (earned ones full color, locked ones grayed with lock overlay):
- "First Purchase" — shopping bag — earned
- "Loyal Customer" — heart — earned (10+ purchases)
- "Referral Pro" — megaphone — earned (5+ referrals)
- "Review Maven" — pencil — earned (10+ reviews)
- "Big Spender" — diamond — earned ($500+ lifetime)
- "Early Bird" — sunrise — earned (purchased within 1hr of sale launch)
- "Streak Master" — flame — locked (purchase 4 consecutive weeks)
- "Social Star" — camera — locked (share 10 products)
- "Birthday Club" — cake — locked (make birthday month purchase)
- Hover on badge: tooltip showing name, description, and date earned
10. FAQ SECTION
- Section title: "Frequently Asked Questions"
- Accordion-style expandable questions (6 items):
- "How do I earn points?" — "You earn 1 point for every $1 spent. Bonus points are available through referrals, reviews, social sharing, and seasonal promotions."
- "Do my points expire?" — "Points expire 12 months after they are earned if there is no account activity. Any purchase or redemption resets the expiration clock."
- "How do I move to the next tier?" — "Tiers are based on cumulative points earned within a calendar year. Once you reach the threshold, your tier upgrades automatically."
- "Can I combine points with other discounts?" — "Yes! Points redemptions can be stacked with sale prices and promo codes. The only exception is the VIP Shopping Event discount."
- "How does the referral program work?" — "Share your unique link. When a friend makes their first purchase, they get $10 off and you earn 500 bonus points. There's no limit on referrals."
- "What happens if I return an item?" — "Points earned from the purchase will be deducted from your balance. If this brings your balance below zero, future earnings will offset the negative balance."
- Collapse/expand with smooth animation, chevron icon rotation
- Light background (#FAFAFA), cards with white background and 8px border-radius
11. FOOTER CTA
- Dark section (#1E1B4B)
- "Not a member yet?" — "Join Elevate Rewards for free and start earning points on every purchase"
- "Join Now — It's Free" CTA button (solid #7C3AED)
- Below: "Already have an account? Sign in to view your rewards"
Design: Premium, motivating loyalty experience. Primary: #7C3AED (purple), secondary: #2563EB (blue), accent: #F59E0B (gold for tier highlights). Background: white with alternating #F5F3FF (light purple) sections. Typography: Plus Jakarta Sans or DM Sans for headings, Inter for body. Cards with 12px border-radius and soft shadows. Progress bars with smooth gradient fills and animated transitions.
Responsive: Mobile-first. Tier bar becomes vertical stepper on mobile. Points table converts to card list. Rewards grid stacks to single column. Referral link has tap-to-copy. Sticky bottom bar on mobile with points balance and "Redeem" quick action.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