Lovable E-Commerce UI
Purpose
Generate e-commerce UIs in Lovable covering product listing pages, product detail pages, shopping carts, checkout flows, category browsers, and storefront landing pages. Enforces conversion-optimized layouts, trust-building patterns, and commerce-specific micro-interactions.
Platform context: Lovable generates React + TypeScript + Tailwind CSS + shadcn/ui apps on Vite. Payments integrate via Stripe. Backend via Supabase (PostgreSQL + Auth + Storage for product images). Use shadcn components for forms, dialogs, sheets, and UI primitives.
Inputs
| Parameter |
Required |
Values |
Default |
store_type |
yes |
fashion, electronics, artisan_goods, food_beverage, digital_products, subscription_box, general_retail |
— |
brand_tone |
yes |
luxury, playful, minimalist, bold, eco-conscious |
— |
primary_action |
no |
add_to_cart, subscribe, book_demo, buy_now |
add_to_cart |
page_type |
no |
listing, detail, cart, checkout, storefront |
storefront |
Workflow
1. Identify Store Category
Each store type triggers different layout defaults:
| Store Type |
Key Elements |
| fashion |
Large imagery, lookbook grids, size/color selectors |
| electronics |
Spec comparison tables, feature highlights, rating breakdowns |
| artisan_goods |
Story-driven layout, maker profiles, handcraft textures |
| food_beverage |
Ingredient showcases, dietary badges, subscription options |
| digital_products |
Feature demos, screenshot galleries, pricing tiers |
| subscription_box |
Unboxing previews, plan comparison, testimonial carousels |
| general_retail |
Standard grid, category filters, versatile product cards |
2. Apply Brand Tone to Aesthetics
| Tone |
Theme |
| luxury |
Dark navy/black + gold/cream accents. Serif headings (Playfair Display). 80px+ section padding. Thin borders (0.5px). Subtle animations. |
| playful |
Bright pastels + saturated accent pops. Rounded corners (16px+). Bouncy easing. Illustrated icons. Rounded font (Nunito, Quicksand). |
| minimalist |
Neutral (white, warm gray, single accent). Strong typography hierarchy. Grid layouts. Minimal decoration. (Inter, Helvetica Neue). |
| bold |
High contrast B/W + one vibrant accent. Oversized type. Neobrutalist cards (2px borders, 4px offset shadows). Sharp corners. |
| eco-conscious |
Earth tones (sage, terracotta, cream). Organic shapes. Textured/paper backgrounds. Serif + sans-serif pairing. |
3. Structure Pages by Type
Listing Page:
- Masonry or bento grid with hover-reveal quick-add buttons.
- Animated filter sidebar (slide-in, 300ms).
- Sticky sort/filter bar at top.
- Infinite scroll or paginated with smooth transitions.
Detail Page:
- 60% image gallery (left) / 40% product info (right) on desktop.
- Swipeable gallery with dot indicators.
- Sticky add-to-cart section on scroll.
- Accordion for description, shipping, reviews (use shadcn Accordion).
- Related products carousel at bottom.
Cart (shadcn Sheet as slide-in drawer):
- Slide-in from right (300ms ease-out).
- Item cards with quantity adjusters (+/- with count animation).
- Swipe-to-remove on mobile.
- Order summary with expandable line items.
- Persistent checkout CTA at bottom.
Checkout (multi-step form):
- Steps: Shipping → Payment → Review.
- Horizontal progress indicator.
- Inline field validation (gentle shake on error).
- Sticky order summary sidebar on desktop.
- Trust badges grouped near payment CTA.
- Stripe Elements integration for payment.
Storefront:
- Hero with featured product/collection.
- Bento grid of category cards.
- Trending products horizontal scroll.
- Social proof section with review highlights.
- Newsletter signup with minimal friction.
4. Define Commerce Interactions
- Add-to-cart: Button text morphs to checkmark (200ms). Cart badge count increments with scale pulse (300ms).
- Product images: Scale 1.05 on hover (200ms). Gallery: swipe + click with crossfade (300ms).
- Quantity selector: Smooth increment/decrement with number fade. Minus disabled at qty 1.
- Wishlist toggle: Heart icon scales 1.3 → 1.0 (bouncy, 400ms). Outline fill transition.
- Price display: Sale price in accent color. Original gets animated strikethrough (200ms left-to-right).
- Filter interactions: Checkbox toggles trigger smooth grid re-layout (300ms). Active filters as removable chips.
5. Apply Trust & Conversion Patterns
- Social proof: Star ratings with review count. Staggered fade-in (80ms per element).
- Stock indicators: "Only X left" with subtle opacity pulse. Never fake urgency or countdown timers.
- Shipping info: Expandable inline text. Not popup modals.
- Security badges: Horizontal row near checkout CTA with soft highlight background.
- Return policy: Accordion section, not hidden in footer.
- Payment icons: Visa, Mastercard, Amex, PayPal icons near payment form.
6. Apply Typography & Color
- Product names: weight 500, 1rem (grid) / 1.5rem+ (detail).
- Prices: weight 700, sale in accent, original in muted + strikethrough.
- CTAs: High contrast, min 48px height. Primary uses brand color, secondary uses outlined.
- Body: weight 400, 1rem, line-height 1.6.
Output Format
Complete e-commerce page or component set with HTML structure, Tailwind CSS, interactive states, and animations. Uses shadcn Sheet for cart drawer, shadcn Accordion for product details, shadcn Form for checkout. Responsive and mobile-first. Ready for Supabase data connection and Stripe payment integration.
Guardrails
- Never use aggressive urgency — no countdown timers, no fake scarcity, no "Buy NOW."
- All interactive elements ≥ 48px × 48px touch targets on mobile.
- Prices must be clear — sale and original visually distinct.
- All product images must have alt text placeholders:
alt="[Product] - [view]".
- Cart interactions must give clear feedback for every state change.
- Never auto-add items to cart or auto-open cart without user action.
- Color contrast meets WCAG AA (4.5:1 body, 3:1 large text).
- Use shadcn components for forms, dialogs, sheets. Don't build custom modals.
- Payments via Stripe integration. Don't build custom payment forms.
Failure Handling
| Problem |
Follow-up Prompt |
| Generic grid without commerce |
"Enhance product cards: hover-reveal quick-add button (slides up, 200ms), wishlist heart toggle (bouncy), image zoom on hover (scale 1.05). Add sticky filter/sort bar." |
| Cart lacks interactivity |
"Add quantity +/- with number transition, swipe-to-remove on cards, order summary that updates totals with count-up animation." |
| Missing trust indicators |
"Add security badges (SSL, payment icons, return guarantee) in a highlighted row above the Place Order button." |
| Checkout not multi-step |
"Split checkout into 3 steps: Shipping → Payment → Review. Add horizontal progress bar. Validate inline with gentle shake on error." |
| Product gallery not interactive |
"Make gallery swipeable with dot indicators. Add thumbnail strip below. Main image uses crossfade transition (300ms). Support pinch-to-zoom on mobile." |
Examples
Example 1: Luxury Fashion Storefront
Input: store_type=fashion, brand_tone=luxury, page_type=storefront
Prompt to Lovable:
Build a luxury fashion storefront:
STYLE: Dark navy (#0a0e1a) background with cream (#f5f0e8) text and gold (#c9a96e) accents. Playfair Display for headings, Inter for body. Thin borders (0.5px), generous spacing (80px sections). Subtle smooth animations.
HERO: Full-width with featured collection image. Large serif headline "New Season" with cream text. Minimal CTA button with gold border.
CATEGORIES: Bento grid with 4 category cards (Women, Men, Accessories, New In). Large images with text overlay on hover. Smooth scale 1.03 on hover.
TRENDING: Horizontal scroll of product cards. Each card: product image with hover zoom (1.05), product name (500 weight), price in cream. Wishlist heart icon overlay.
SOCIAL PROOF: "As seen in" logos bar + featured review with 5 stars.
NEWSLETTER: Minimal input + "Subscribe" button at bottom. Gold accent on focus.
Mobile: Stack all sections vertically. Hero becomes 60vh. Categories become 2-column grid.
Example 2: Electronics Product Detail
Input: store_type=electronics, brand_tone=minimalist, page_type=detail
Prompt to Lovable:
Build an electronics product detail page:
LAYOUT: 60/40 split. Left: image gallery with thumbnail strip below, main image crossfade on click. Right: product info.
PRODUCT INFO: Name (1.75rem/600), star rating with review count, price ($999, bold), color selector (circle swatches), storage selector (pill buttons).
ADD TO CART: Full-width primary button (blue, 48px height). Below it: "Free shipping" and "30-day returns" with check icons.
SPECS: shadcn Accordion sections — Overview, Technical Specs (table format), What's in the Box, Reviews (star breakdown bar chart + review cards).
RELATED: "You might also like" carousel at bottom with 4 product cards.
INTERACTIONS: Gallery thumbnails highlight on click. Color/storage selectors show selected state. Add-to-cart morphs to checkmark on click. Quantity adjuster with +/- buttons.
All text high contrast (min 4.5:1). Touch targets min 48px.
Security & Privacy
This skill generates text prompts only. It does not access external endpoints, process payments, or execute code. All output is prompt text intended for the Lovable.dev platform. Actual payment processing requires separate Stripe integration.
Trust Statement
This skill contains no executable scripts. It produces Lovable-compatible e-commerce generation prompts. It does not access the filesystem, network, or any external service. Payment references are prompt-level instructions for Stripe integration, not direct payment processing.
1---2name: lovable-ecommerce-ui3description: Generate high-converting, visually rich e-commerce UIs in Lovable with product layouts, cart interactions, checkout flows, and trust-building patterns.4---5
6# Lovable E-Commerce UI
7
8## Purpose
9
10Generate e-commerce UIs in Lovable covering product listing pages, product detail pages, shopping carts, checkout flows, category browsers, and storefront landing pages. Enforces conversion-optimized layouts, trust-building patterns, and commerce-specific micro-interactions.
11
12> **Platform context**: Lovable generates React + TypeScript + Tailwind CSS + shadcn/ui apps on Vite. Payments integrate via Stripe. Backend via Supabase (PostgreSQL + Auth + Storage for product images). Use shadcn components for forms, dialogs, sheets, and UI primitives.
13
14## Inputs
15
16| Parameter | Required | Values | Default |
17|------------------|----------|---------------------------------------------------------------------------------|--------------|
18| `store_type` | yes | fashion, electronics, artisan_goods, food_beverage, digital_products, subscription_box, general_retail | — |
19| `brand_tone` | yes | luxury, playful, minimalist, bold, eco-conscious | — |
20| `primary_action` | no | add_to_cart, subscribe, book_demo, buy_now | add_to_cart |
21| `page_type` | no | listing, detail, cart, checkout, storefront | storefront |
22
23## Workflow
24
25### 1. Identify Store Category
26
27Each store type triggers different layout defaults:
28
29| Store Type | Key Elements |
30|------------------|-----------------------------------------------------------------|
31| fashion | Large imagery, lookbook grids, size/color selectors |
32| electronics | Spec comparison tables, feature highlights, rating breakdowns |
33| artisan_goods | Story-driven layout, maker profiles, handcraft textures |
34| food_beverage | Ingredient showcases, dietary badges, subscription options |
35| digital_products | Feature demos, screenshot galleries, pricing tiers |
36| subscription_box | Unboxing previews, plan comparison, testimonial carousels |
37| general_retail | Standard grid, category filters, versatile product cards |
38
39### 2. Apply Brand Tone to Aesthetics
40
41| Tone | Theme |
42|----------------|-------------------------------------------------------------------------------------------|
43| luxury | Dark navy/black + gold/cream accents. Serif headings (Playfair Display). 80px+ section padding. Thin borders (0.5px). Subtle animations. |
44| playful | Bright pastels + saturated accent pops. Rounded corners (16px+). Bouncy easing. Illustrated icons. Rounded font (Nunito, Quicksand). |
45| minimalist | Neutral (white, warm gray, single accent). Strong typography hierarchy. Grid layouts. Minimal decoration. (Inter, Helvetica Neue). |
46| bold | High contrast B/W + one vibrant accent. Oversized type. Neobrutalist cards (2px borders, 4px offset shadows). Sharp corners. |
47| eco-conscious | Earth tones (sage, terracotta, cream). Organic shapes. Textured/paper backgrounds. Serif + sans-serif pairing. |
48
49### 3. Structure Pages by Type
50
51**Listing Page**:
52- Masonry or bento grid with hover-reveal quick-add buttons.
53- Animated filter sidebar (slide-in, 300ms).
54- Sticky sort/filter bar at top.
55- Infinite scroll or paginated with smooth transitions.
56
57**Detail Page**:
58- 60% image gallery (left) / 40% product info (right) on desktop.
59- Swipeable gallery with dot indicators.
60- Sticky add-to-cart section on scroll.
61- Accordion for description, shipping, reviews (use shadcn Accordion).
62- Related products carousel at bottom.
63
64**Cart** (shadcn Sheet as slide-in drawer):
65- Slide-in from right (300ms ease-out).
66- Item cards with quantity adjusters (+/- with count animation).
67- Swipe-to-remove on mobile.
68- Order summary with expandable line items.
69- Persistent checkout CTA at bottom.
70
71**Checkout** (multi-step form):
72- Steps: Shipping → Payment → Review.
73- Horizontal progress indicator.
74- Inline field validation (gentle shake on error).
75- Sticky order summary sidebar on desktop.
76- Trust badges grouped near payment CTA.
77- Stripe Elements integration for payment.
78
79**Storefront**:
80- Hero with featured product/collection.
81- Bento grid of category cards.
82- Trending products horizontal scroll.
83- Social proof section with review highlights.
84- Newsletter signup with minimal friction.
85
86### 4. Define Commerce Interactions
87
88- **Add-to-cart**: Button text morphs to checkmark (200ms). Cart badge count increments with scale pulse (300ms).
89- **Product images**: Scale 1.05 on hover (200ms). Gallery: swipe + click with crossfade (300ms).
90- **Quantity selector**: Smooth increment/decrement with number fade. Minus disabled at qty 1.
91- **Wishlist toggle**: Heart icon scales 1.3 → 1.0 (bouncy, 400ms). Outline fill transition.
92- **Price display**: Sale price in accent color. Original gets animated strikethrough (200ms left-to-right).
93- **Filter interactions**: Checkbox toggles trigger smooth grid re-layout (300ms). Active filters as removable chips.
94
95### 5. Apply Trust & Conversion Patterns
96
97- **Social proof**: Star ratings with review count. Staggered fade-in (80ms per element).
98- **Stock indicators**: "Only X left" with subtle opacity pulse. Never fake urgency or countdown timers.
99- **Shipping info**: Expandable inline text. Not popup modals.
100- **Security badges**: Horizontal row near checkout CTA with soft highlight background.
101- **Return policy**: Accordion section, not hidden in footer.
102- **Payment icons**: Visa, Mastercard, Amex, PayPal icons near payment form.
103
104### 6. Apply Typography & Color
105
106- Product names: weight 500, 1rem (grid) / 1.5rem+ (detail).
107- Prices: weight 700, sale in accent, original in muted + strikethrough.
108- CTAs: High contrast, min 48px height. Primary uses brand color, secondary uses outlined.
109- Body: weight 400, 1rem, line-height 1.6.
110
111## Output Format
112
113Complete e-commerce page or component set with HTML structure, Tailwind CSS, interactive states, and animations. Uses shadcn Sheet for cart drawer, shadcn Accordion for product details, shadcn Form for checkout. Responsive and mobile-first. Ready for Supabase data connection and Stripe payment integration.
114
115## Guardrails
116
117- Never use aggressive urgency — no countdown timers, no fake scarcity, no "Buy NOW."
118- All interactive elements ≥ 48px × 48px touch targets on mobile.
119- Prices must be clear — sale and original visually distinct.
120- All product images must have alt text placeholders: `alt="[Product] - [view]"`.
121- Cart interactions must give clear feedback for every state change.
122- Never auto-add items to cart or auto-open cart without user action.
123- Color contrast meets WCAG AA (4.5:1 body, 3:1 large text).
124- Use shadcn components for forms, dialogs, sheets. Don't build custom modals.
125- Payments via Stripe integration. Don't build custom payment forms.
126
127## Failure Handling
128
129| Problem | Follow-up Prompt |
130|---------|-----------------|
131| Generic grid without commerce | "Enhance product cards: hover-reveal quick-add button (slides up, 200ms), wishlist heart toggle (bouncy), image zoom on hover (scale 1.05). Add sticky filter/sort bar." |
132| Cart lacks interactivity | "Add quantity +/- with number transition, swipe-to-remove on cards, order summary that updates totals with count-up animation." |
133| Missing trust indicators | "Add security badges (SSL, payment icons, return guarantee) in a highlighted row above the Place Order button." |
134| Checkout not multi-step | "Split checkout into 3 steps: Shipping → Payment → Review. Add horizontal progress bar. Validate inline with gentle shake on error." |
135| Product gallery not interactive | "Make gallery swipeable with dot indicators. Add thumbnail strip below. Main image uses crossfade transition (300ms). Support pinch-to-zoom on mobile." |
136
137## Examples
138
139### Example 1: Luxury Fashion Storefront
140
141**Input**: `store_type=fashion`, `brand_tone=luxury`, `page_type=storefront`
142
143**Prompt to Lovable**:
144```
145Build a luxury fashion storefront:
146
147STYLE: Dark navy (#0a0e1a) background with cream (#f5f0e8) text and gold (#c9a96e) accents. Playfair Display for headings, Inter for body. Thin borders (0.5px), generous spacing (80px sections). Subtle smooth animations.
148
149HERO: Full-width with featured collection image. Large serif headline "New Season" with cream text. Minimal CTA button with gold border.
150
151CATEGORIES: Bento grid with 4 category cards (Women, Men, Accessories, New In). Large images with text overlay on hover. Smooth scale 1.03 on hover.
152
153TRENDING: Horizontal scroll of product cards. Each card: product image with hover zoom (1.05), product name (500 weight), price in cream. Wishlist heart icon overlay.
154
155SOCIAL PROOF: "As seen in" logos bar + featured review with 5 stars.
156
157NEWSLETTER: Minimal input + "Subscribe" button at bottom. Gold accent on focus.
158
159Mobile: Stack all sections vertically. Hero becomes 60vh. Categories become 2-column grid.
160```
161
162### Example 2: Electronics Product Detail
163
164**Input**: `store_type=electronics`, `brand_tone=minimalist`, `page_type=detail`
165
166**Prompt to Lovable**:
167```
168Build an electronics product detail page:
169
170LAYOUT: 60/40 split. Left: image gallery with thumbnail strip below, main image crossfade on click. Right: product info.
171
172PRODUCT INFO: Name (1.75rem/600), star rating with review count, price ($999, bold), color selector (circle swatches), storage selector (pill buttons).
173
174ADD TO CART: Full-width primary button (blue, 48px height). Below it: "Free shipping" and "30-day returns" with check icons.
175
176SPECS: shadcn Accordion sections — Overview, Technical Specs (table format), What's in the Box, Reviews (star breakdown bar chart + review cards).
177
178RELATED: "You might also like" carousel at bottom with 4 product cards.
179
180INTERACTIONS: Gallery thumbnails highlight on click. Color/storage selectors show selected state. Add-to-cart morphs to checkmark on click. Quantity adjuster with +/- buttons.
181
182All text high contrast (min 4.5:1). Touch targets min 48px.
183```
184
185## Security & Privacy
186
187This skill generates text prompts only. It does not access external endpoints, process payments, or execute code. All output is prompt text intended for the Lovable.dev platform. Actual payment processing requires separate Stripe integration.
188
189## Trust Statement
190
191This skill contains no executable scripts. It produces Lovable-compatible e-commerce generation prompts. It does not access the filesystem, network, or any external service. Payment references are prompt-level instructions for Stripe integration, not direct payment processing.
majiayu000