E-Commerce

Build a Single Product Landing Page with AI

Hero product page with countdown timer, testimonials carousel, feature bullets, and sticky buy button linking to PayPal/Stripe. Showcase a single product with maximum impact and drive conversions with urgency elements and social proof.

Build Prompt

Copy this prompt into Claude Code
Build a single-product landing page as a static HTML/CSS/JS site. Use a dark premium theme with background #0a0a0f, card surfaces #12121a, and accent color #10b981 (emerald green). Load product data from an inline `const PRODUCT = {...}` object with fields: name, tagline, price, originalPrice (for strikethrough), currency, description, features (array of {icon, title, text}), testimonials (array of {name, role, text, rating}), images (array of URLs), stock, badge (e.g. "Best Seller"), and paymentUrl (PayPal.me or Stripe Payment Link). The layout: a full-width hero section with the product name in large bold text, tagline below, price badge showing current price with original price struck through, and a savings percentage badge. Below the hero, a product image gallery with thumbnail navigation (click to swap main image). Then a feature grid (3 columns on desktop, 1 on mobile) with icon, title, and description for each feature. Add a testimonials carousel that auto-rotates every 5 seconds with manual prev/next arrows. Each testimonial shows the quote, author name, role, and star rating (filled stars in gold #f59e0b). Include a countdown timer section with headline "Limited Time Offer" showing days, hours, minutes, seconds. The timer counts down to a date from `PRODUCT.saleEndsAt`. When it hits zero, show "Sale Ended" and disable the buy button. Add a sticky "Buy Now" button fixed to the bottom of the screen on mobile (and floating on desktop) that links to the paymentUrl. The button shows the product name and price. If stock is 0, show "Sold Out" and disable the button. If stock is less than 10, show "Only {stock} left!" urgency text. Include an FAQ accordion section with 4-5 common questions (shipping, returns, warranty, etc.). Add proper SEO: title tag, meta description, Open Graph tags, and JSON-LD Product schema with name, description, price, availability (InStock/OutOfStock based on stock), and review aggregate from testimonials. Make it fully responsive. All tap targets 44px minimum on mobile. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].

Make It Yours

Video Hero

Replace static images with an autoplay product video or GIF demonstration.

Size/Variant Selector

Add size, color, or variant dropdowns that update the price and image.

Social Proof Counter

Show "X people bought this today" with a randomly incrementing counter.

Exit Intent Popup

Show a discount popup when the user moves their mouse toward the browser close button.

Bundle Offers

Add "Frequently Bought Together" section with discounted bundle pricing.

Currency Switcher

Add a dropdown to display prices in USD, EUR, GBP with hardcoded exchange rates.

Update Prompt

Update Prompt — Manage inventory and sales
I sold [N] units of the product. Update the stock count in the PRODUCT data by subtracting [N]. If stock reaches 0, change the buy button to show "Sold Out" and disable it. Also update: the testimonials array if I provide new testimonials, the price if I specify a new price, the sale end date if I want to extend the countdown, or the payment URL if I switch payment providers. Recalculate the savings percentage if prices change. Then redeploy the updated site.

SEO Tips

Monetization Ideas

Related Ideas

Ready to build your Single Product Landing Page?

Copy the prompt above and paste it into Claude Code. Your landing page will be live in minutes.

Get Started