TechnicalCollectible prompt
Product page for an online store with variants and cart
Build a product page for {{business_name}}'s online store, selling to {{target_audience}}. Product details, variants and price: {{product_details}}
Layout: gallery beside the buying panel on desktop, stacked above it on phones. Brand colors: {{brand_colors}}.
Requirements:
- A gallery with thumbnails, swipe, zoom and alt text for every photo
- Size or color options as labeled choices, so color is never the only cue; sold-out options stay visible but disabled, and price, photo and stock update with each choice
- Add to cart opens a small cart drawer with a clear checkout button, and the cart survives a refresh
- Next to the button: price, delivery estimate, returns in one line, and a size or usage guide if relevant
- Description, benefit bullets and specs written only from the details above; mark anything I need to confirm
- Reviews shown only when real ones exist; never invent them
- A sticky add-to-cart bar on phones
- Checkout created on the server with prices from the server, never from the browser; payment keys stay server-side
- WCAG 2.2 AA, fast images in modern formats, and a title, meta description, share image and Product structured data with price and availability
When you're done, list your assumptions and what's needed to take real orders.
Technicalnvoka.com/library/nvoka-online-store-product-page-with-cartScan to open
Technical
Product page for an online store with variants and cart
A product page with a gallery, variant picker, cart drawer and secure server-side checkout.
Curated by Nvoka
BoltLovablev0
Make it yours
Fill in the blanks and change any word. Only your copy changes, never the card.
Fill in the blanks
0 of 4 filledYour prompt
Build a product page for {{business_name}}'s online store, selling to {{target_audience}}. Product details, variants and price: {{product_details}}
Layout: gallery beside the buying panel on desktop, stacked above it on phones. Brand colors: {{brand_colors}}.
Requirements:
- A gallery with thumbnails, swipe, zoom and alt text for every photo
- Size or color options as labeled choices, so color is never the only cue; sold-out options stay visible but disabled, and price, photo and stock update with each choice
- Add to cart opens a small cart drawer with a clear checkout button, and the cart survives a refresh
- Next to the button: price, delivery estimate, returns in one line, and a size or usage guide if relevant
- Description, benefit bullets and specs written only from the details above; mark anything I need to confirm
- Reviews shown only when real ones exist; never invent them
- A sticky add-to-cart bar on phones
- Checkout created on the server with prices from the server, never from the browser; payment keys stay server-side
- WCAG 2.2 AA, fast images in modern formats, and a title, meta description, share image and Product structured data with price and availability
When you're done, list your assumptions and what's needed to take real orders.