Are Your Hero Sections Helping or Hurting Your Conversions?
Hero sections are the first things site visitors see when they land on your ecommerce website and as they navigate from page to page in your Shopify store. And you know what they say about first impressions: There are no second chances to make a good one.
Why are hero sections important?
An attractive hero section with well-written copy isn’t necessarily what makes the best first impression. The one that’s tailored for your target audience, builds trust and deepens interest in what your offer does.
Hero sections impact user experience (UX)
A hero image or video can communicate your value proposition visually; for example, by showcasing appealing product photos. Your headline can instantly clarify what problem you solve or the benefits visitors would get access to by becoming customers. A button with a relevant call-to-action (CTA) can make site navigation easier and direct visitors to webpages that will pull them deeper into the sales funnel.
See where we’re going with this? There are many positive ways heroes can affect your site’s UX. The bad news? The opposite can also be true if your hero sections aren’t well-thought-out.
Hero sections can promote conversions
When user experience suffers, so do conversion rates. It’s not hard to see why. If the copy is unclear or not consistent with messaging on other parts of your site, it could confuse and frustrate shoppers. If the imagery you use is low-quality or there’s no clear connection to what you sell, it could make you look less-than-professional. There are a million scenarios we could run through, but the point is the same.
All the above can deter would-be customers from taking actions that lead to conversion, such as signing up for email promotions.
What should a hero section contain?
There are exceptions but, for the most part, you’ll find four common elements across well-done hero sections.
1. A meaningful and attractive hero image
You’ll want a high-quality and aesthetically pleasing image or video. But the background of this section is not just there for looks. It can and should convey something about your brand and/or the people it’s for. That could mean showing off your products, showing or depicting customers, or conveying the mood your brand or offers evoke.
2. Compelling headlines and subheadings
Sometimes you’ll find heroes that don’t have a prominent heading, such as this one from Vitaly. The lack of a headline can work in cases like this one, where you’re asking people to make purchases that are more emotional than logical (i.e., Vitaly is selling customers on the look of the products and the vibe of the brand rather than on the functional uses of chains, rings, and so on).
However, in many cases, you’ll want a visually prominent headline. That headline should grab attention and let visitors know they’re in the right place (either by stating what you offer and for who, the problem you solve and how, or the goal you help customers reach).
Bonus points if it also gives a glimpse into your brand personality.
3. Research-backed and intentional website copy
Even a few words can be the difference between more sales or lost sales. We’ve seen this proven repeatedly while working with brands like BestSelf. We boosted sales by 27% with just a few tweaks to its product page headline based on our qualitative research.
If these results can be achieved by adjusting only a headline, imagine the potential of a full page of copy that’s informed by deep, ongoing customer research. You can bet that it’ll convert better than copy that’s based on outdated or no research.
4. Consistent, attractive, and recognizable branding
Ideally, both the looks of and the language in your website hero sections should feel branded, and for good reason. Consistent branding prevents several issues:
- Damage to your brand image if you use overused stock photos, uncustomized page designs, and generic copy
- Confusion about your messaging or what your brand stands for due to inconsistencies across sections and pages
- Lack of memorability
All of the above can not only cost you sales today but also reduce the potential that people will engage with or buy from you in the future. In contrast, solid branding and the other three elements we’ve chatted about will help you make more sales, increase average order values, reduce customer acquisition costs, and more.
Data-driven web design is the only way to go
The kind of heroes that deliver seamless user experiences and guide people to conversion don’t come about by chance. And they don’t even come from basic web design processes that are limited to creative brainstorming, persona creation, mood board creation, wireframing, and then adding content. In addition to those things, what does a more robust design process include? What steps are missing from processes like these?
- Analysis of your website analytics to understand the strengths and weaknesses of your site
- Usability testing to identify issues with your site’s functionality or the user experience
- Conducting polls and surveys to gather intel on their questions, objections, and conversion triggers, as well as to gather voice of customer information
- Prioritizing what needs, desires, questions, and concerns need to be addressed on-site to drive conversions
- Strategy development not only to drive revenue but also to increase average order values (AOV)
- Cross-referencing your wireframe with data points from usability studies to reduce the incidence of usability issues
- More usability testing to validate your website design
- Ongoing testing and optimization to maximize your return on investment from your ecommerce site
In other words, conversion research, testing, and conversion optimization are often forgotten, even by many web design agencies.
But we know it takes a lot more than an eye-catching hero or a good-looking website to drive sales. That’s why our process at SplitBase includes all of the above so that you can not only make money but also maximize the amount of money you make.
5 Shopify hero sections we love and what they do well
Now that we’ve talked about how to lay a proper foundation for your hero sections and larger web design, let’s see some examples of these tips out in the wild.
Plant People
First up is one of Plant People’s landing pages, which made it into our growing collection of direct-to-consumer (DTC) swipes. What did this health and wellness brand do right in this hero?
The high-quality product image is one of the first things that catches the eye, giving landing page visitors a good idea of what they can expect the landing page to be about. The headline is also an attention-grabber. Not only is it clear about the benefits customers can expect to get from the product but it also alludes to the ease with which they can achieve those results, i.e., instead of struggling to meet New Year’s resolutions months into the year, Plant People asserts that they can start the year already feeling better and healthier.
The text details how Plant People’s supplement delivers on the promise in the headline and the call-to-action encourages immediate action. This hero is basically a compact (but not pushy) sales pitch.
Broya
Broya—an organic bone broth brand—provides another good example. It has many of the same elements as the ones above.
While the headline is clever, it doesn’t sacrifice clarity. You can easily gather that Broya sells a drink that promotes gut health. The text underneath then clarifies what it is and how painless the buying experience is to reduce any hesitation to buy. Broya also reduces hesitation using social proof, mentioning the brand’s thousands of satisfied customers.
Additionally, rather than just a general “Buy Now” call-to-action, Broya primes site visitors to buy more with the CTA “Try All Four Flavours.” All four being pictured with the flavors clearly labeled also helps to entice them to try the variety pack instead of buying just one broth.
Dropps
Sustainable household cleaning brand Dropps has a simple but effective hero section on its homepage.
Unlike the other examples we’ve seen so far, Dropps has used a bit less text. But what’s there is straight to the point: It makes clear what the brand sells (cleaning supplies) and what the value proposition is (no bad stuff). The copy even uses “Zero B.S.” to hook visitors’ attention and drive home the value prop.
Additionally, there’s an attractive shot of the products, which reiterates the brand’s values in a few ways:
- It’s clear that the product packaging is eco-friendly.
- Blue is a color often associated with nature and used to convey desirable qualities like integrity.
- Green is associated with nature, health and healing, transparency, and prosperity.
All of the above either directly or indirectly drive home Dropps’ core message immediately when people land on-site.
ZitSticka
Up next is the skincare brand ZitSticka. Its homepage hero is of the temporary sort and uses time pressure to influence the behavior of website visitors.
Both the mention of a “summertime refresh” in the headline and the limited-time offer in the text box highlight the importance of acting fast to get this deal. But the headline also gives site visitors a more compelling reason to want the products pictured. It states a clear benefit that aligns with the target audience’s seasonal desire to look and feel their best. The discount is just an added incentive! Of course, there’s a “Shop Now” CTA also to get more people to start shopping right away.
Every Man Jack
Every Man Jack is a men’s personal care and grooming brand whose website runs on Shopify. Its homepage hero section does a few things well.
For one, the background image showcases the great outdoors, which connects to the main headline. But it also showcases some of the brand’s products. The headline and text both use a casual voice that’s likely similar to the language Every Man Jack’s laid-back, nature-oriented target customers would use. And the call-to-action doesn’t just encourage shopping but it encourages shopping for bundles, which, of course, means better average order values.
How well do your ecommerce website’s hero sections work?
At the end of the day, you’re not running a hobby website. You’re running an ecommerce site that’s meant to make you as much money as possible. Every element on your site can either inch it closer to that goal or serve as a blocker—your hero section design included. So data-driven web design, continuous testing, and ongoing optimization should be your best friends. They’ll help you hone in on what’s working so you can do more of it, and they’ll identify what’s not serving you so you can figure out what will.
If you think you might like a hand with the conversion research, design, and testing process, hit us up and we’ll get you a free proposal.
