Do you want to create your own online store?

Picture of a phone with Shopify software

Start Your Business with Shopify

Try Shopify for free, and explore all the tools and services you need to start, run, and grow your business.

How to Create a Stunning Website Hero Image

website-hero-images

Browsing through a few online stores, you might notice one major component they all have in common: a large, featured image (or series of images) prominently displayed on the homepage.

These images may be referred to as hero, banner or carousel images. No matter what you call them, website hero images serve a very important role for ecommerce businesses. 

In this post we’re going to look at the importance of hero images, introduce you to some best practices for using them as well as provide some incredible tools and graphic resources to help you create beautiful and persuasive hero images for your online store.

Let’s dig into it.

What is a hero image?

A hero image is a large image that appears at the very top of a webpage. Hero images can appear on different pages throughout a website, but they’re most often used on a website’s homepage, beneath the header and navigation bar.

A hero image takes the biggest of the real estate space on your homepage. In some ways, it performs the same function as a landing page. Your hero image acts as a first impression for your brand, meaning they can be a very valuable asset to your business if used correctly.

moss-botanicals-website-hero-image-example
Via Moss Botanicals

A hero image is a large image that appears at the very top of a webpage. Hero images can appear on different pages throughout a website, but they’re most often used on a website’s homepage, beneath the header and navigation bar.

A hero image takes the biggest of the real estate space on your homepage. In some ways, it performs the same function as a landing page. Your hero image acts as a first impression for your brand, meaning they can be a very valuable asset to your business if used correctly.

What should a good website hero image include?

Great hero images are generally composed of three elements: 

  • An eye-catching image
  • Compelling copy
  • A strong call-to-action (CTA)

A thoughtful combination of each of these elements can lead to a persuasive hero image that compels the visitor to take the action you want them to, helping to boost conversion rates. You’ll see how these elements work together in the hero image examples below.

Let’s take a look at the three essential elements more in-depth:

scent-and-fire-website-hero-image-example
Via Scent & Fire

1. An eye-catching image

The human eye loves big, bold and bright images. Whether you use graphics, photographs, or illustrations is dependent on your brand⁠—but what’s always important is that your images are high-resolution and attention-grabbing. 

Hero images should be the most prominently displayed items on your homepage, which is something to keep in mind when considering your homepage design

All Shopify themes all include a large section for hero images along with a suggested resolution, so you know exactly how to size your hero images. Some themes even include additional functionality options for hero slideshows, banner videos, and on-page animations. 

Still haven’t decided on a theme for your Shopify store? Take our quiz to find out which theme is best for your online store.
Nurilens-website-hero-image-example
Via Nurilens

Stock photo image resources

If you plan on doing your own product photography, you’ll want to make sure you’ve done enough research to know how to take professional, high-quality images. If you’re looking to save some time, you might want to consider using stock photography. 

There are a ton of places to go online to find professional, high-quality images for your website. To help your search, we’ve listed some of the best sources for you to find your next image:

No cost, royalty-free image resources

If you’re looking for free stock photos and graphics, here are a couple of options to consider: 

  • Burst by Shopify: Burst is the stock photo site built by and for entrepreneurs. On Burst, you can find high-resolution product photos and lifestyle images that are perfect for marketing campaigns and social media. If you have a Shopify store, you’ll be able to add photos from Burst directly from your theme editor. 
  • Pexels: Pexels contains thousands of free stock images uploaded by users or sources from free image websites. 
  • Unsplash: Unsplash offers more than 2 million free, high-resolution images from its community of photographers.
  • Pixabay: Pixabay offers images that are free to use for commercial and non-commercial purposes, though it’s important to note that some images are still be protected by trademarks, publicity or privacy rights. 
  • Stockvault: Stockvault offers free stock photos along with web design layouts and logo templates. 
  • Canva: Canva is an all-in-one website design tool that also includes a collection of free and paid stock photos for commercial use. 
  • Stocksnap: Stocksnap offers a wide variety of free stock photos for use on commercial and non-commercial projects. 
Paid image resources

If you have a budget to work with for your hero images, consider some of the better paid resources for higher quality images and photos. 

  • Shutterstock: Shutterstock has an extensive library of more than 300 million images from photographers all over the world, making it the perfect resource for travel photography. 
  • Adobe Stock: Designed to work with Adobe’s suite of design tools, Adobe Stock contains thousands of stock photos, hero image design templates, stock videos, vector art, and illustrations. 
  • Getty Images: Though on the pricier side, Getty Images contains a deep archive of contemporary and historical photographs available for purchase. 
  • iStock: iStock is owned by Getty Images, so you may see some overlap in terms of what photos are available. Still, iStock allows photographers to sell their photos on other platforms, so you will find a wider, more contemporary collection than on Getty. 
  • Dreamstime: Dreamstime offers a variety of stock photos, videos, vectors, and illustrations⁠—both free and paid⁠—with different licensing options.
Hire a freelance photographer

Of course, stock photos will always be just that, stock photos. If you have some time and maybe a bit more of a budget, you might consider hiring a professional photographer and shooting your own photos. 

Here are a couple of other options for exploring freelance photographers: 

  • Hire a Shopify Expert: Use Shopify Experts to browse freelancers and agencies specializing in specific disciplines like photo editing and product photography. You can even hire freelancers based on industry-experience⁠—so if you need a food photographer, you can browse food photographers
  • Fiverr: Fiverr offers a wide variety of freelancers who specialize in everything from product photography to web design. 
  • Freelancer: Freelancer’s database includes experts in a wide range of creative fields, such as photography and illustration. 
  • Upwork: Upwork allows entrepreneurs to post jobs and connect with freelancers who have the experience and skills to help them. 
  • Guru: Guru offers freelance photographers with expertise in all types of photography, like fashion photography, street photography, landscape photography, and a whole lot more.
totem-design-house-website-hero-image-example
Via Totem Design House

2. Compelling copy

In advertising and marketing, copy describes the written material of a piece of media. For entrepreneurs, copywriting is a useful skill to have in your arsenal. 

Users only glance at your hero image for a moment before moving on, so you only have a few seconds (at most) to grab the user's attention. Good copy should address customer needs in a way that’s easy to understand. 

Here are some quick tips for writing compelling copy: 

  • Be concise: Long-form copy has its place, but a banner image is not it. Banner copy should be punchy and to-the-point. 
  • Avoid hard-to-read fonts: Rarely-used fonts can take more time to read. Though the additional time may be minimal, every millisecond counts when it comes to banner image copy. 
  • Replicate the tone of your customers: Users tend to be more receptive to language that feels familiar to them. Consider the language your target audience uses on social media and use it to inform the style of your writing.
  • Focus on benefits, not features: Instead of saying, “Our customer support team is available 24/7 to answer any questions”, say “Get answers fast with 24/7 customer support.”
  • Don’t be afraid to test different copy: Hero images are prime candidates for A/B testing, since different word-choices have the potential to drastically alter how your visitors interact with your hero image design. 
  • Avoid marketing buzzwords and cliches: Users' eyes tend to gloss over commonly used advertising slogans like, “act fast”, “huge savings”, and “satisfaction guarantee”.
royalty-soaps-website-hero-image-example
Via Royalty Soaps

3. Strong Call-To-Action

Finally, all hero images should feature a prominent call-to-action (CTA). A CTA is the text that tells the reader the action you want them to take, usually accompanied by a button that takes that action. Examples include “Shop now”, “Sign the petition”, or “Learn more”.

How you write your call-to-action depends on which segment of your marketing funnel you’re addressing. If you’re addressing top-of-funnel users, you might ask them to “Learn more”, whereas for bottom-of-funnel users, the CTA might be a more direct “Buy here”.

alivia-website-hero-image-example
Via Alivia

Understand the purpose of your hero image

You can use this valuable piece of real estate for several purposes depending on your business and goals. Let’s take a look at some of the most common approaches for using hero images below:

1. To help build your brand and tell your story

One potential use of your website hero image might be brand storytelling. Brand storytelling is the use of narrative to communicate the unique selling proposition of your brand. Storytelling is a very effective method of brand-building, because a good story tends to be memorable.

girls-chronically-rock-website-hero-image-example
Via Girls Chronically Rock

2. To answer customer questions 

Another common approach is to feature answers to a commonly asked question. You might address a common customer pain-point or use the space to answer time-sensitive questions your visitors may have.

quartz-and-rainbows-website-hero-image-example
Via Quartz and Rainbows

3. To highlight your value proposition

Brand storytelling isn’t the only way to present your unique selling proposition. Your brand will be more memorable to visitors if they understand what makes it different from competitors. What better place to tell your customers your value proposition than right on your homepage, where the majority of visitors land.

partake-foods-website-hero-image-example
Via Partake Foods

4. To make an announcement

Your homepage banner is a key piece of real estate for promoting sales, events, product launches, and other important announcements. Banner images get most of your website visitor’s attention, so any announcement you want to be widely-seen is a good candidate for banner image content.

allbirds-website-hero-image-example
Via Allbirds

Optimize your website with a stunning hero image

There you have it, the reason, purpose and uses of a hero image on your homepage. Changing these images up frequently keeps your store feeling fresh to repeat visitors, keeps it lively and drives visitors to take the actions that are most inline with your conversion goals.


Website hero image FAQ

How do I add a hero image to my website?

If you’re using a Shopify theme, you can add your hero image in your theme editor. Log-in to your Shopify store and go to Online Store > Themes and select “Customize” next to your current theme. 

Most themes have space for a banner by default, but if you need to add it, select “Add section” at the bottom of your right-hand menu, then select the hero section element. This element may be labeled hero image, banner image, or slideshow⁠—depending on the theme you’re using.

Also note that website hero images do not transfer between themes like product images and in-line blog images. Hero images must be added directly into each theme separately, and will only appear on-page if you add them to your current theme.

What size should a hero image be on a website?

You can add PNG and JPEG files that are up to 20 MB, but it’s a good idea to keep the file size low to ensure reasonable page load times. Exact image sizes will depend on the theme you’re using, but typically, hero images should be at least 2048 pixels wide to show in sharp resolution when viewed in full screen. 

Keep in mind that themes are responsive, meaning the space reserved for hero images changes depending on the screen sizes the website is being viewed on. Make sure to leave space around the frame of your image to account for parts that may be cut-off. 

You also want to avoid putting your copy and CTA directly into the image. Instead, use your Theme editor to overlay copy and CTA buttons that will float in front of your image, and adjust independently from your image.

What is the purpose of a website hero image?

Website hero images serve a wide-range of purposes, but generally they’re great for any announcement you want to make to the most visitors possible. Common purposes include the announcement of sales, to highlight your brand values, or to announce new products.

What should a hero image contain?

A website hero image should contain a large, attention-grabbing image along with concise, compelling copy and a strong call-to-action.
Topics: