Theme · Ecommerce · Beginner

E-commerce Store

E-commerce store = a top bar with search and cart, category pills, a product grid of cards, and a closing footer.

Skip to the modify prompt →

New season

Everyday essentials, made to last.

Conscious basics and home goods, shipped carbon-neutral. Free shipping over $50.

All Apparel Home Tech

Merino Tee$38★ 4.8

Linen Throw$64★ 4.6

Desk Lamp$89★ 4.9

Ceramic Mug$22★ 4.7

Canvas Tote$29★ 4.5

Sound Buds$119★ 4.9

How to prompt it

Build a clean e-commerce storefront for a general retailer called "Bazaar".

STYLE
- White base, hairline #ececf0 borders, #fafbfc page tint
- One accent #0071e3 used only for the cart count and links
- System sans, tight 8px radii, generous whitespace

LAYOUT
- Top bar: "Bazaar" wordmark left, a rounded search field in the middle ("Search products…"), and a cart indicator right showing a cart icon and a count badge of 2
- A single row of category pills: All (active, filled dark), Apparel, Home, Tech
- A product grid of 3 cards (responsive: 3 across on desktop): each card has an image block, a product name, a price, and a star rating
  - Merino Tee — $38 — ★ 4.8
  - Linen Throw — $64 — ★ 4.6
  - Desk Lamp — $89 — ★ 4.9

COMPONENTS
- Navbar: wordmark, search input, cart badge
- Category pills: one active, three inactive
- Product card: image (gradient placeholder), name, price, rating
- Footer: copyright line plus Help · Returns · Track order

TECHNICAL
- React
- Tailwind CSS
- shadcn/ui

Revise only the category pills and the product grid of this storefront.

CHANGES
- Rename categories to All, New, Sale, Gift
- Add a "sale" red price variant on one product
- Show a small "Sale" badge on the discounted card

DO NOT
- Do not touch the top bar or the footer
- Do not change the column count

Build a clean, accessible e-commerce storefront for a general retailer called "Bazaar".

STYLE
- White base, hairline #ececf0 borders, #fafbfc page tint, 8px radii
- One accent #0071e3 for the cart count, links, and focus rings
- System sans; type scale 9/10/11/12/14px; generous whitespace

LAYOUT
- Sticky top bar: wordmark left, rounded search field middle, cart indicator right with icon + count badge (2)
- Category pills: All (active, filled dark), Apparel, Home, Tech
- Promo banner (tall pages): "Free shipping over $50" + subline
- Product grid (3 across desktop, 2 tablet, 1 mobile): image, name, price, star rating
  - Merino Tee $38 ★4.8 / Linen Throw $64 ★4.6 / Desk Lamp $89 ★4.9
  - Ceramic Mug $22 ★4.7 / Canvas Tote $29 ★4.5 / Sound Buds $119 ★4.9
- Footer: "© 2026 Bazaar" + Help · Returns · Track order

COMPONENTS
- Navbar, search, badge, card, button, link
- Each product card is keyboard-focusable; the whole card is a button, not a nested link

TECHNICAL
- React, Tailwind CSS, shadcn/ui
- Full keyboard focus rings; every icon-only control has an aria-label
- prefers-reduced-motion: hovers settle instantly, no lift animation

MOTION
- Card hover: 120ms ease-out lift (translateY -2px) + soft shadow
- No autoplaying carousels; no scroll-linked movement on a shopping page

Modify prompts change only the target — the rest of your page stays untouched.

Tips

Keep the cart count as the only saturated accent so the eye lands on conversion. Let product images be calm gradient placeholders until real photography drops in.

E-commerce Store

Everyday essentials, made to last.

Tips

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns