22 Lovable Prompts for E-Commerce Stores (2026)

Build the homepage for an online store called [STORE NAME] selling [PRODUCT TYPE, e.g. handmade ceramics].

Layout, top to bottom:
- Sticky header: logo left, category nav center ([CATEGORY 1], [CATEGORY 2], [CATEGORY 3]), search icon and cart icon right (cart shows an item-count badge).
- Hero: headline, one-line subhead, primary "Shop now" button linking to the catalog.
- Featured products: responsive grid of 8 product cards (image, name, price, "Add to cart").
- Category tiles: 3 large clickable tiles with image + label.
- Trust row: free shipping, easy returns, secure checkout (icon + short text each).
- Newsletter signup band and a footer with links.

Use React + Tailwind. Use placeholder product data for now; do NOT add a backend or cart logic yet. Keep it clean and mobile-first.

Create a "Shop all" catalog page at /shop.

- Responsive product grid (4 columns desktop, 2 tablet, 1 mobile).
- Each card: product image, name, price, and an "Add to cart" button on hover.
- A category chip bar at the top: "All", [CATEGORY 1], [CATEGORY 2], [CATEGORY 3]. Clicking a chip filters the visible products.
- Show a result count ("48 products") and a "Load more" button for pagination.

Reuse the product card component from the homepage. Use placeholder data. Do not build checkout yet.

Build the product detail page at /product/[slug].

- Left: image gallery with a main image and clickable thumbnails.
- Right: product name, price, star rating summary, short description, and variant selectors for [size] and [color] (buttons, not dropdowns). Selecting a variant updates the shown price and availability.
- Quantity stepper and a large "Add to cart" button.
- Accordion sections: full description, shipping & returns, materials.
- Below: a "You may also like" row of 4 product cards.

Use placeholder data with at least 3 variants. Disable "Add to cart" when the selected variant is out of stock.

Create a category/collection page at /category/[slug].

- Page header with the category name and a short intro line.
- Left sidebar filters (collapsible on mobile): price range slider, [color] checkboxes, [size] checkboxes, and an in-stock-only toggle.
- Top bar: sort dropdown (Featured, Price low-high, Price high-low, Newest) and active-filter chips that can be removed individually.
- The product grid updates instantly as filters and sort change.

Keep filters in URL query params so the view is shareable. Use placeholder data.

Add site search.

- Clicking the header search icon opens a full-width search overlay with an input focused automatically.
- As the user types (debounced), show an autocomplete dropdown: up to 6 matching products (thumbnail + name + price) and a "See all results for '[query]'" link.
- Enter or clicking "See all" navigates to /search?q=[query] showing the full result grid, reusing the catalog layout.
- Show a friendly empty state when there are no matches.

Match on product name and category. Use placeholder data for now.

Add a wishlist feature.

- A heart icon on every product card and on the product detail page toggles that product's favorite state.
- Show a wishlist count badge next to the cart icon in the header.
- Add a /wishlist page listing saved products in a grid with a "Move to cart" and "Remove" action on each.

For now, persist the wishlist in localStorage so it survives refresh. Later we will store it per logged-in customer in Supabase. Do not change the cart yet.

Add a slide-out cart drawer.

- Clicking the header cart icon slides a panel in from the right over a dimmed backdrop.
- Each line item: thumbnail, name, selected variant, unit price, quantity stepper, remove (x), and line total.
- Footer: subtotal, a note that shipping and taxes are calculated at checkout, a "Checkout" button, and a "View cart" link to the full cart page.
- Empty state with a "Start shopping" button.

Store cart state in a shared React context and persist it to localStorage. Update the header badge count live. "Add to cart" anywhere should open this drawer.

Build the full cart page at /cart.

- Table of line items (image, name, variant, unit price, quantity stepper, line total, remove).
- Order summary card on the right: subtotal, estimated shipping, estimated tax, and order total; a "Proceed to checkout" button; and a promo code input (wire the logic in a later prompt).
- Editing quantity or removing an item updates totals immediately and syncs with the slide-out cart.
- Show a clear empty-cart state.

Reuse the cart context. Keep money math in cents to avoid rounding errors.

Add Stripe checkout using Lovable Cloud.

- Create a Supabase edge function "create-checkout" that takes the cart line items, re-reads each product's price from the database (never trust client prices), creates a Stripe Checkout Session, and returns the session URL.
- Store STRIPE_SECRET_KEY in secrets. Do not expose it client-side.
- The "Checkout" button calls this function and redirects to the returned Stripe URL.
- Create a second edge function "stripe-webhook" that verifies the Stripe signature and, on checkout.session.completed, writes an order row (items, totals, customer email, status = paid) to the orders table.

Ask me for my Stripe keys, then confirm the webhook endpoint I need to register in Stripe.

Add order confirmation.

- After Stripe redirects back, show /order/[id] with a success header, order number, purchased items, totals, shipping address, and estimated delivery.
- Load the order from the orders table by id; if payment is still pending, show a "confirming your payment" state that polls until the webhook marks it paid.
- Send a confirmation email to the customer via an edge function (order summary + order number). Store the email-sent status on the order.

Handle the case where a user reloads or shares the confirmation URL without exposing other customers' orders (enforce with RLS).

Add coupon codes.

- Create a coupons table: code, type (percent or fixed), value, min_order_amount, usage_limit, times_used, expires_at, active.
- On the cart and checkout, the promo input validates a code against the table (case-insensitive) and applies the discount to the order summary, showing the discount line and new total.
- Re-validate and re-apply the discount inside the create-checkout edge function so the discounted amount is authoritative server-side. Reject expired, inactive, or over-limit codes with a clear message.
- Increment times_used only after a successful paid order.

Do not let the client set the final price.

Set up the product database in Supabase via Lovable Cloud.

Tables:
- products: id, title, slug, description, base_price_cents, category, image_urls (array), status (draft/active/archived), created_at.
- variants: id, product_id, name (e.g. "M / Black"), sku, price_cents, in_stock (int for inventory).
- categories: id, name, slug.

Then:
- Migrate the storefront (homepage, catalog, product detail, category page, search) to read from these tables instead of placeholder data.
- Product images go in a Supabase storage bucket.
- RLS: anyone can read products/variants where status = active; only admins can write.

Seed 12 sample products across 3 categories so the store isn't empty.

Build a protected admin at /admin/products.

- List all products in a table (thumbnail, title, category, price, status, stock) with search and status filter.
- "New product" and "Edit" open a form: title, slug (auto from title), description (rich text), category, base price, image upload to storage, and a variants editor (add/remove rows with name, sku, price, stock).
- Save writes to the products and variants tables. Support archiving instead of hard delete.

Gate the whole /admin area behind an "admin" role; non-admins are redirected. Enforce admin-only writes in RLS, not just in the UI.

Add inventory tracking.

- When an order is marked paid (in the stripe-webhook function), decrement in_stock on each purchased variant. Never let stock go below zero; if a variant is out of stock at payment time, flag the order for review.
- On the storefront, hide or disable "Add to cart" for out-of-stock variants and show a "Low stock" badge when in_stock <= [LOW_STOCK_THRESHOLD].
- In /admin, add a "Low stock" view listing variants at or below the threshold, and let an admin adjust stock manually with an audit note.

Do stock decrements server-side inside the webhook, not on the client.

Build an order dashboard at /admin/orders.

- Table of orders: order number, date, customer email, item count, total, and status (paid, fulfilled, shipped, refunded). Search by order number or email; filter by status; sort by date.
- Clicking a row opens the order detail: line items, totals, shipping address, payment reference, and a status timeline.
- Let an admin update status and add a tracking number; changing to "shipped" triggers a shipping-notification email to the customer.
- Show top-line counts: today's orders, unfulfilled orders, revenue this week.

Admin-only via RLS. Use real orders from the orders table.

Add customer accounts using Supabase auth.

- Email/password sign-up and login, plus password reset. After login, show the customer's name in the header with a menu.
- /account page with tabs: Profile (name, email, saved shipping address), Orders (list from the orders table filtered to this customer, each opening its confirmation view), and Wishlist (migrate the localStorage wishlist to a per-user table on first login).
- Attach customer_id to new orders at checkout when the user is logged in; still allow guest checkout by email.

RLS: customers can read and update only their own profile, orders, and wishlist.

Add product reviews.

- reviews table: id, product_id, customer_id, rating (1-5), title, body, created_at, status (published/pending).
- On the product detail page: show the average rating and count in the header, a reviews section with a rating breakdown bar and a paginated list, and a "Write a review" form available only to logged-in customers who have purchased that product.
- New reviews save as pending; add an /admin/reviews queue to publish or hide them.
- Recompute and cache each product's average rating when a review is published.

RLS: anyone reads published reviews; only the author writes their own; only admins moderate.

Audit and fix responsiveness across the whole store on mobile, tablet, and desktop.

Check and correct: header nav collapses to a hamburger with the cart and search still reachable; product grids reflow (1/2/4 columns); the slide-out cart is full-width on mobile; filters collapse into a bottom sheet on the category page; forms and the checkout summary stack cleanly; tap targets are at least 44px; no horizontal scroll at 360px width.

Do not change colors, copy, or the backend. Only adjust layout and spacing. List each page you changed and what you fixed.

Add abandoned-cart recovery.

- When a logged-in customer (or a guest who entered their email) has cart items but no completed order after [N] hours, mark the cart as abandoned.
- A scheduled edge function sends one reminder email with the cart contents and a link that restores the cart and jumps to checkout. Send at most one reminder per cart.
- Optionally include a [PERCENT]% comeback coupon code (reuse the coupons table).
- Track sent/opened/recovered so I can see recovery rate in the admin.

Store emails and cart snapshots server-side; do not email anyone who has completed the order.

Add upsell and cross-sell.

- On the product detail page, show a "Complete the look" / related-products row based on the same category (fall back to bestsellers if fewer than 4).
- In the slide-out cart and cart page, add a "Frequently bought together" strip suggesting up to 3 add-on products with one-tap "Add".
- On the order confirmation page, show a "You might also like" row to drive a follow-up purchase.

Keep suggestions server-driven from real product data and exclude items already in the cart. Do not slow the page down; lazy-load images.

Build a /admin/analytics dashboard from real order data.

- KPI cards: revenue, orders, average order value, and conversion (orders / sessions) for a selectable date range (today, 7 days, 30 days).
- Charts: revenue over time (line), orders by day (bar), and top 10 products by units and by revenue.
- A low-stock alert count and a pending-reviews count.
- Traffic-source breakdown if session data is available; otherwise leave a clear placeholder.

Compute metrics from the orders, variants, and products tables. Admin-only via RLS. Cache heavy queries so the page loads fast.

Run a pre-launch security review, then help me go live.

Security checklist:
- Run Lovable's security scan and fix every finding.
- Confirm no secrets (Stripe keys, service keys) are in client code; all live in secrets/edge functions.
- Verify RLS on every table: products read-only public, orders/wishlist/reviews scoped to their owner, admin routes gated by the admin role.
- Confirm the stripe-webhook verifies signatures and that prices/discounts are re-read server-side.

Then walk me through: switching Stripe to live mode with live webhook keys, one-click publishing, and attaching my custom domain [yourstore.com]. Give me a final go-live checklist to confirm before I point the domain.