Hero Images: How to Use Yours & Give Your Site Superpowers

Does your site have a hero image? These large, above-the-fold displays are the big trend in web design. A quick look at the Shopify store shows that this technique is used by the majority of the most popular themes. Why are hero images popular? How do they work? What sets the best apart from the rest? Why hero images are popular: valuable real estate A website’s home page is, 99% of the time, its most popular page. That’s why it makes sense to optimise the page with an all-singing, all-dancing i

Written by TheGenieLab

Sep 27, 2015

Join the GenieLab Community

Receive regular updates and inspiration to help your business stay ahead of the game.

Need Assistance?

eCommerce UX Optimisation: How Agencies Identify and Fix Conversion Blockers

Key Highlights Here's a quick look at how TheGenieLab can enhance your online store: TheGenieLab boosts your user e...

eCommerce Agency for a Growing Business: What Mid-Market Companies Need

This guide profiles 10 top eCommerce developers for medium businesses, spanning Shopify/WooCommerce specialists, cust...

Top Companies Building Feature-Rich eCommerce Sites

Feature-rich eCommerce unites conversion-focused design, seamless navigation, mobile-first performance, secure divers...

How to Find and Vet eCommerce Development Experts You Can Actually Trust

Key Highlights Discover where to find reliable experts to build your online store from scratch, from platform speci...

Custom eCommerce Development: How to Choose an Agency for Complex Builds

Key Highlights Here is a quick look at what you will discover in this guide: Custom ecommerce development allows yo...

Shopify Custom Theme Development for Shopify Plus Success

Shopify Plus Custom Theme Development: What Enterprise Brands Need to Know

Key Highlights A custom Shopify theme for Shopify Plus unlocks unparalleled branding and functionality not available...

Does your site have a hero image? These large, above-the-fold displays are the big trend in web design, used by the majority of the most popular Shopify themes.

Why Hero Images Are Popular

A website's home page is its most popular page, so it makes sense to optimise it with an attention-catching image above the fold. A strong hero image results in lower bounce rates, lower exit rates, increased site duration, and better engagement. The best heroes are direct, clear, and uncluttered.

How to Use Your Hero Image

To build a brand: tell your story and demonstrate your USPs, especially useful for lower-visibility or premium brands.

To publicise a special event: since it's seen by the most people, use it to shout about a sale or launch.

To feature specific products: push seasonal trends, high-margin products, or new lines.

To combine features via rotating banners: use with caution — one study found the first hero image on a manually rotating banner received 84% of all clicks, with the rest receiving just 4% each. If you use multiple heroes, keep them to a minimum and rotate automatically.

What Every Hero Image Needs

1. A striking image: high-resolution, bright, bold. Avoid stock imagery — personable, relatable photography conveys trust.

2. Concise copy: convey the quality of your brand in as few words as possible.

3. A compelling call to action: snappy and direct — "shop now," "find out more," or "read on."

Do's and Don'ts

Do: be direct with bold typography, include your brand/logo, ensure it's responsive, use tints and fades for readability, and change images seasonally.

Don't: use garish colour schemes, impede the image with poorly placed copy, use stock photos, or talk too much.

Related reading:

View all blog posts