A hero section is the first full-width block a visitor sees at the top of a web page, before scrolling.
It usually holds a headline, a short supporting line, a hero image or video, and one primary call to action, and its job is to tell visitors what the page offers and where to click next.
The term covers homepages, product pages, collection pages and landing pages.
On ecommerce product pages it often means the whole top block: image gallery, title, price, reviews and Add to Cart.
Why the hero section matters in A/B testing
The hero gets more attention than anything else on the page.
In a 2018 eyetracking study, Nielsen Norman Group found that 57% of page-viewing time was spent above the fold and 74% in the first two screenfuls.
That makes it a high-traffic place to test, and a risky one.
A change there reaches every visitor who lands on the page, so wins and losses both show up fast.
Common hero tests swap the headline, change the image, add social proof, add or remove a CTA, or shrink the block so products appear sooner.
For the wider question of what belongs in the first screen, see our guide to above-the-fold optimization.
Hero image
A hero image is the large photo, illustration or video that fills the hero section.
In tests, the image's message tends to matter more than how polished it looks.
Dave Diederen replaced a homepage hero video with a static image and a benefit callout and recorded +52.67% revenue per visitor.
In another test, Dave Diederen swapped the hero image for one matched to buyer intent, for +7.50% revenue per visitor.
Results don't always carry across devices. Blend Commerce simplified an apparel brand's homepage hero and saw +26% desktop conversion while mobile fell.
Segment hero tests by device before rolling them out.
Hero banner
A hero banner is a hero section built around a wide promotional image, often with an offer or campaign message on top.
Many stores rotate several banners in a carousel.
Banners that look like ads can be ignored, a pattern known as banner blindness.
Swapping trust content for promotions can also backfire: Clean Commit replaced a trust-focused hero with a sales carousel and conversions fell 46.2%.
A big banner can also push products out of view.
Conversion Fanatics shrank the Dr. Axe homepage hero and moved best sellers higher, for +26% conversion.
@DaveDiederen@DaveDiederen
Blend Commerce
Conversion Fanatics
Clean CommitClean CommitExample: a typical hero test
A store's homepage hero has a lifestyle photo, the brand tagline and a "Shop Now" button.
The variant keeps the layout but changes the headline to the outcome the product delivers and adds a star rating under the button.
Both versions get equal traffic, and the test measures revenue per visitor rather than clicks on the hero.
Not every hero change wins. Clean Commit tested benefit statements in the homepage hero and saw +7.7% conversions, but the result never reached significance.
Treat a hero idea as a hypothesis until your own test confirms it.
Related terms
- Above the fold: the part of the page visible without scrolling. The hero usually takes up most of it.
- Value proposition: the promise the hero headline should state. See value proposition tests.
- Banner blindness: the habit of skipping content that looks like advertising.
- Landing page: a page built for one campaign goal, where the hero carries most of the message.
For every hero test in the database, see hero section tests, or browse more definitions in the glossary.