Product Hero Section

What it does

This product hero section shows visitors what your product is and the deal on it right now, then sends them to buy it or sign up.

The hero section is the first big block at the top of a page, and visitors decide in seconds if they stay. A sale shown there, above the fold (what they see before scrolling), is seen by everyone who lands on the page and has a better chance to lead to a sale.

It can show:

• your headline and a short line under it
• your offer, with the old price crossed out, the new price and a % off sticker worked out from the 2 prices you added
• a bonus, a guarantee and a countdown or an end date, if you want them
• your product next to it: its real picture, or for an app, a store-style card with its icon, its name and its real rating
• one button to your checkout or signup page

Your rating only ever shows real numbers from your store or review platform, and it stays hidden when you don't have any yet.

Test the preview above and set up your offer with the options. Then copy the prompt (the instructions your AI follows) with the copy button and paste it in your AI (Grok, Replit, Windsurf, whatever you use). It will build the hero in your site's style, colors and fonts, with the options you selected above.

How it works

1. 01

   A visitor lands on your product page and sees your headline, your product and your offer in the first screen, before they scroll.

2. 02

   The sticker shows the saving right away, like 75% off, worked out from the 2 prices you added so it's always accurate.

3. 03

   They see the regular price crossed out next to the offer price, so they know what they pay and how much they save.

4. 04

   Next to it, your product shows what they're buying, as its picture or, for an app, a store-style card with its icon, name and real rating.

5. 05

   The countdown under the button shows the time left, and it runs to your real end date.

6. 06

   They click the button to claim the offer, and land on your own checkout or signup page.

7. 07

   Once the offer is over, the hero says "This offer has ended", and the button turns gray and can't be clicked, so they can't grab a deal that's done.

What you can customize

• Rating: by default, your AI will look for the rating already on your site or your store listing and use the real numbers, and only ask you for them if it can't find any. You can also pick Type it, and the Score (out of 5) and Number of ratings fields show up so you can enter them yourself, or hide the rating.
• Offer: choose to show your running offer, or hide it for a clean product hero with your headline, your product and the button. We show the offer by default.
• Regular price: type the price you really charged before the offer. In the US, the FTC (the Federal Trade Commission, the agency that keeps ads fair) wants a price you charged for a real period of time, and in the EU it must be your lowest price of the 30 days before the offer. Our prompt will have your AI ask you which rule applies to you, and never decide it for you. Or leave it empty and your AI will find your regular price in your project, and only ask you if it can't find it.
• Offer price: type what your visitors pay during the offer, and the sticker works out the % off from both prices. Or leave it empty and your AI will find the offer price in your project, and only ask you if it can't find it.
• Currency: by default, your AI will find the currency your prices already use in your project, and only ask you if it can't find it. If you prefer, pick the US dollar, the euro or the British pound yourself, or choose Other and type yours in the Your currency field that shows up. Or leave that field empty and your AI will find it for you.
• Price period: by default, your AI will check which offers you have (monthly, yearly or a one-time payment) and show the right one, or ask you if it can't tell. You can also pick per month, per year or one-time payment yourself.
• How the monthly price is billed: you show $5 a month, but customers pay $60 once for the year? Pick Billed once a year, and the card adds a small "Billed $60 yearly" line, so they're not surprised by the price at checkout. This choice shows up when you pick per month yourself, and with the default, your AI finds how your offers are billed on its own.
• Bonus line: you can add an extra that comes with the offer and write it in Bonus text, like "+3 months free". Your AI will check that the bonus is really part of your offer before showing it. We hide it by default.
• Guarantee line: you get to decide if a small line sits under the button, with your own words in Guarantee text, like "30-day money-back guarantee". Your AI will ask you to confirm you really offer it. It's hidden by default too.
• Offer end: say when this special offer is going to end, with a live countdown or with the end date written, or show no end date at all. We show the countdown by default.
• End date: pick the last day of your offer in the calendar. Then flip the "Offer running" and "Offer ended" switch on the preview to see what your visitors get once that day has passed. Your AI will adapt it to your time zone, and only ask you for the exact end time if it can't find it.
• Button text: write what the button says, in your own words, so visitors know exactly what they get when they click. Or leave it empty and your AI will write one from what your product is, and ask you if it's not sure.
• Button link: paste the address of your checkout or signup page, so visitors land right where they can claim the deal. There's no payment to set up, since the hero only links there. Or leave it empty and your AI will find the correct page in your project, or ask you directly if it can't tell which one to use.

See this hero in action on our own Black Friday offer page.