E-commerce
E-commerce — E Commerce Homepage
Copy-paste layout brief covering Announcement Bar, Navigation Header, Hero Section and Category Grid — hand it to ChatGPT, Claude, or v0 as-is.
E-commerce — E Commerce Homepage is a copy-ready build prompt for e-commerce pages. Paste it into ChatGPT, Claude, v0 and iterate from the first draft it returns.
If something here is out of date, the source link below is always the canonical reference.
| Use case | E-commerce |
|---|---|
| Works with | ChatGPT, Claude, v0, Cursor |
| Source | websiteprompts.com |
Create an e-commerce store homepage:
1. ANNOUNCEMENT BAR
- Free shipping threshold
- Sale announcement
- Dismissible
2. NAVIGATION HEADER
- Logo
- Search bar (expandable on mobile)
- Category mega menu
- Account icon
- Wishlist icon (with count)
- Cart icon (with count and mini preview)
3. HERO SECTION
Option A - Single hero:
- Full-width banner image
- Headline and subheadline
- CTA button
- May have video background
Option B - Hero carousel:
- 3-4 rotating slides
- Auto-advance with pause on hover
- Navigation dots/arrows
4. CATEGORY GRID
- 4-6 featured categories
- Image + category name
- Hover effect
- Links to category pages
5. FEATURED PRODUCTS SECTION
- "Best Sellers" or "Trending Now"
- Product card carousel
- Navigation arrows
- "View All" link
- 4-6 products visible
6. PROMOTIONAL BANNER
- Mid-page banner
- Sale or special offer
- Countdown timer if limited
- CTA to shop sale
7. NEW ARRIVALS
- Grid or carousel
- "New" badges on products
- "Shop New Arrivals" CTA
8. BRAND STORY/VALUE PROPS
- 3-4 icons with text:
- Free Shipping
- Easy Returns
- Secure Payment
- 24/7 Support
9. SOCIAL PROOF SECTION
- Instagram feed embed
- User-generated content
- "Shop the look" feature
- Or customer reviews carousel
10. NEWSLETTER SIGNUP
- "Join our newsletter"
- Incentive: "Get 10% off your first order"
- Email input + subscribe button
- Privacy assurance
11. FOOTER
- Shop links (categories)
- Customer service links
- About links
- Social media icons
- Payment method icons
- Copyright and legal links
Design: Visual, image-heavy. Clear hierarchy. Mobile: Stack sections, hamburger menu, bottom nav optional.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