In the first screen, a visitor decides whether to stay. Users spend 57% of their page-viewing time above the fold (NN/g, 2018), and they form a first impression of a page's visual appeal in about 50 milliseconds (Lindgaard et al., 2006). The hero section isn't the top of the page; it's most of the decision. Most Shopify stores fill it with a mood and bury the message.

This is the tutorial for building a hero that earns the scroll: the four jobs it must do, and what to cut. It sits inside the Shopify PDP architecture guide and pairs with the deeper PDP optimization checklist.

I run Skuology and build Upsellr. This comes from 80+ Shopify projects and over $100M in combined eCommerce revenue.

Key Takeaways

  • The first screen carries the decision: 57% of attention is above the fold (NN/g, 2018) and opinion forms in ~50ms (Lindgaard, 2006).
  • A hero has four jobs: say what it is, who it's for, why it's better here, and what to do next.
  • The headline is for clarity, not cleverness; the F-pattern front-loads the top line and left edge (NN/g).
  • One hero, one image, one CTA. Carousels and competing buttons split the attention you can't afford to lose.
  • On mobile the hero is one screen: benefit, image, price, CTA, in that order.

The four jobs of a hero

A hero that sells answers four questions in the first glance: what is this, who is it for, why is it better here, and what do I do next. Miss any one and the visitor has to work to understand the page, and with attention forming in milliseconds, most won't bother. The hero is not decoration; it's the answer to "should I keep reading."

Most stores get this wrong by optimizing the hero for atmosphere instead of clarity. A beautiful lifestyle image with a three-word poetic headline looks like a brand and communicates nothing. The buyer who can't tell what you sell in the first screen leaves, and the 57% of attention that lives above the fold is spent on confusion.

So treat the hero as a job to be done, not a canvas. Each of the four elements below maps to one of those four questions, and each earns its place only by answering clearly.

The headline: what it is and who it's for

The headline's job is recognition, fast. Say what the product is and who it's for in plain words a first-time visitor understands instantly. "Merino base layers for cold-weather runners" beats "Engineered for the elements" because it tells the buyer what they're looking at and whether it's for them. Clever is the enemy here; clear wins.

Placement matters as much as wording. Users scan in an F-pattern, so the top line and the left edge get disproportionate attention (NN/g, 2017). Put the meaning at the start of the headline, not after a wind-up. The first few words carry the recognition; everything after them is read less.

The test is the same one I use for any first screen: could a stranger tell a friend what you sell from the headline alone? If not, it's too vague to convert.

The hero image: show the product or the outcome

The image's job is to show what the headline names. A clear shot of the product, or of the outcome it delivers, does more than any mood photography. The buyer wants to see the thing they might buy, so lead with it. Atmosphere can come later; the hero image earns its space by being informative, not just attractive.

Crop for mobile first. Most of your traffic is on a phone, where the hero is a single small screen, so an image composed for a wide desktop banner often shows nothing useful on mobile. Compose so the product reads at phone size, and the same image will work everywhere.

The deeper rules for product imagery sit in the PDP optimization guide. In the hero, the point is narrow: show, don't suggest.

The value proposition: the one reason to buy here

The value proposition line is the why. In one sentence, give the single most important reason to buy this product from this store. Not a list of features, not three benefits, one. The buyer skimming the first screen can hold one clear reason; a paragraph of selling points reads as noise and gets skipped.

Specific beats generic every time. "Ships free and arrives in two days" or "Made to order, guaranteed for ten years" tells the buyer something real. "Premium quality you'll love" tells them nothing and signals filler. The value proposition is where you earn the click, so make it concrete enough to be believed.

If you have a genuine differentiator, this is where it goes. The store with a real reason to buy here, stated plainly in the hero, converts the visitor who would otherwise leave to compare.

The primary CTA: one clear action

The hero needs exactly one primary call to action, visible without scrolling, named for the action it triggers. "Add to cart," "Shop the collection," "Start your order." One button, one job. Competing CTAs in the hero (buy now and learn more and watch the video and sign up) split the decision and lower the odds the buyer takes any of them.

Make it look like the action it is. The primary CTA should be the most visually prominent interactive element in the first screen, in the brand accent, large enough to tap on mobile without aiming. Everything else in the hero supports it; nothing competes with it.

This is the moment the hero hands off to the rest of the page or to the cart. Get the four elements right and the CTA gets pressed; bury the message and it doesn't matter how good the button looks.

What to cut from the hero

Most heroes underperform because of what's in them, not what's missing. Cut the rotating carousel: sliders split attention, move your best message off-screen on a timer, and rarely get engaged past the first frame. Cut the second and third CTAs. Cut the dense navigation and the announcement bars stacked three deep that push the actual hero below the fold.

The hero is the most valuable screen on the page, so it should hold the fewest, clearest things. Every element you add competes for the 57% of attention that lives there. Subtract until only the four jobs remain, and each one gets the space it needs to land.

Restraint is the technique. The store that says one clear thing in the first screen beats the one that says five blurry things, every time.

Mobile: the hero is one screen

On mobile the hero is a single screen with no room to spare, and engagement keeps falling year over year (Contentsquare, 2026). So order the mobile hero by what drives the decision: the benefit or headline first, then the product image, then the price, then the primary CTA. Trust signals and detail go below, where the buyer scrolls only if the hero earned it.

That order isn't arbitrary; it's the sequence a buyer needs to decide. What is it, can I see it, what does it cost, how do I get it. Match the hero to that sequence and the small screen stops being a constraint. The full mobile picture is in the mobile conversion rate guide.

The Shopify hero section: FAQ

What should a Shopify hero section include?

Four things: a plain headline that says what the product is and who it's for, a hero image that shows the product or its outcome, a value proposition line giving the one reason to buy here, and a single primary call to action. Everything else can wait below the fold; the hero exists to earn the scroll.

How important is the first screen on a Shopify store?

Decisive. Users spend 57% of their page-viewing time above the fold (NN/g, 2018), and they form a first impression of a page's visual appeal in about 50 milliseconds (Lindgaard, 2006). If the first screen doesn't say what the product is and why it matters, most visitors leave before seeing anything else.

Should the Shopify hero have a slider or carousel?

No. Rotating sliders split attention, push your best message off-screen, and rarely get clicked past the first slide. The hero has one job: communicate the single most important thing. A static hero with one headline, one image, and one CTA outperforms a carousel that tries to say five things at once.

What makes a good hero headline on Shopify?

Clarity over cleverness. Say what the product is and who it's for in plain words a first-time visitor understands instantly. The F-pattern means the top line and left edge get the most attention (NN/g), so front-load the meaning. A headline that could sit on any store is too vague to convert.

How should the hero be ordered on mobile?

Mobile shows one screen, so order by what drives the decision: the benefit or headline first, then the product image, the price, and the primary CTA. Trust and detail come below. With engagement and scrolling down year over year (Contentsquare, 2026), the mobile hero has to carry the sale almost on its own.

What to do next

No guaranteed lift. How much a stronger hero moves your numbers depends on your product, traffic, and how buried the message is today. What I can promise is that the first screen carries more of the decision than any other, and most stores spend it on atmosphere.

The Baseline Framework rebuilds the first screen around the four jobs, in the order a buyer decides. If you want to know what your hero is failing to say, book a free 30-minute call and I'll walk through your first screen and what it's costing you.