Most online stores and theme templates have one major component in common, a large, featured image or series of images prominently displayed on the homepage.
These images are often referred to as hero, banner or carousel images. No matter what you call them, they’re the same and serve a very important role for online 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.
Location, Location, Location.
A hero image takes the majority of the real estate space on the most seen page of your entire site, the homepage. This is prime real estate in the online world, and means hero images can be a very valuable asset to your business if used correctly.
These big, images are everywhere, just take a look at some of the most popular themes in the Shopify Theme Store. The majority feature a prominent hero image:
The Purpose of Hero Images
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 homepage hero image space is to help build your brand. This method can be particularly effective your business and products have a great story that add to the . Use your prime real estate for this method involves featuring key information that educate your visitors on your brands story.
Example: Johnny Cupcakes is an extremely popular line of clothing and they have a unique story that’s inherently part of their brand. To emphasize and promote their story, they use one of their hero images to direct people towards their story so that their customers understand their brand better and what they are buying into.
In another example, Beardbrand also uses some of the homepage hero real estate to feature their blog/online magazine, The Urban Beardsman, which is a core part of their brand and content strategy.
2. To answer customer questions
Another common approach is to feature answers a commonly asked question. This could be answer your most common objection, or to address a time sensitive questions your visitors may have. For example: “FREE Shipping to USA”.
Example: The Chivery used their hero image space just before the holidays to let customers know exactly when the cut-off dates are for shipping in order to receive it before Christmas.
3. To highlight your value proposition
Perhaps the most important use of this space can be to explain your brand's value proposition. Your value proposition explains exactly to your customers the value your product(s) deliver them. What better place to tell your customers your value proposition than right on your home page where the majority of visitors land.
Example: Luxy Hair, an online hair extension retailer effectively uses their homepage to feature their value proposition along with a clear and concise call-to-action - Longer, fuller hair than ever before - SHOP NOW.
4. To make an announcement
One of the most prominent uses of this key space is to feature an announcement like a sale. The homepage hero image is a great place for sale notifications since it will reach the most number of visitors.
Example: FoxyMango hair and skincare is currently using they homepage hero image for announce a big sale for 35% off.
5. To feature a product or product line
Finally, another popular uses of hero images is to showcase a product or a particular product line. This can be perfect for when you launch new products and want them to receive the most amount of attention, as well as featuring products with the highest profit margin or products you are trying to liquidate.
Example: Greats uses their prime real estate to feature beautiful images of a featured product, The Royale shoe.
No matter what you choose to do with this space, there are several things a good hero image should include. Let’s take a look at the most important elements of a hero image.
What Should a Hero Image Include?
There three elements to making a great hero image. 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, in line with your conversion goal.
Let’s take a look at the three essential elements below:
Eye-Catching Image - The human eye loves big, bold and bright images which is precisely why great product photography is so important. The hero image is no different. Your hero image should feature graphics, images or photos that are high resolution and catch the eye. Almost all themes will have the suggested image resolution listed so you know exactly what size to make your hero images. Here’s an example from one Shopify theme:
Catchy Copy - Your copy is the words you use to communicate your message. Due to the nature of the image and the time you have to communicate your message, your text should be kept very concise and to the point.
Strong Call-To-Action - Finally, all hero images should feature a prominent call-to-action. Text or a button that tells the reader the action you want them to take. Some examples include SHOP NOW, READ OUR STORY, FIND OUT MORE etc.
If we take a look at Luxy’s hero image again we can clearly see all three elements working together. There's a bold, eye-catching image that immediately catches your attention, concise copy that supports the image and a simple call-to-action that falls in line with their conversion goals.
Should You Rotate Your Hero Images?
You’ll notice that many themes and sites will feature a rotating hero image which will rotate several images every few seconds. This feature if typically beloved by designers as it features a big, gorgeous piece of real estate to display their great designs, however usability experts have been frowning upon them for a while due to the distracting nature of the constantly moving images that are generally out of the control of the viewer.
There have been some tests done that show that rotating hero images beyond the first one almost never get clicked. ConversionXL put out a great post talking about this and their recommendation was to ditch the rotating banners all together.
The post references one study by Notre Dame University showing that the first image out of five images received 84% of all clicks.
The general consensus is that instead of featuring several hero images on rotation, you should instead focus on one single image. However, rotating images may be right for your business, and with some planning, they may work very well for you.
If you want to use rotating hero images for your store, consider the following:
Use a consistent style across all hero images.
Keep the content simple so they can be digested by your reader quickly.
Keep the images as small in file size as possible so as to not slow down the load time of your website.
Keep the number of slides to a minimum and only feature what’s really important.
Make navigation obvious and controllable for the reader.
How To Create Hero Images For Your Online Store
Perhaps the biggest hurdle for new, non-design or tech savvy store owners is creating beautiful new hero images on a regular basis. However, in recent years, there has been a variety of tools that have come out that can make this process easy for even the least tech savvy entrepreneur.
Where to get images from:
There are an infinite number of places to go online to find images for your website hero images. Some are better than others though. 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
The Stocks - (Free) The Stocks brings together all the best royalty free stock photos from the top resources in one, clean, easy-to-navigate website. Not everything is searchable, so you may have to spend some time searching through all the resources to find good fits for your brand.
Death To Stock Photo (Free) These free images are only available by email. Because these photos are sent you you by email once per month, it's a good way to start building your own collection of unique images you can use in the future.
Pixabay - (Free) Over 300,000 free photos, vectors and art illustrations.
Graphic Burger - (Free) A great resource with photos and images free for commercial use.
PicJumbo - (Free) PicJumbo is a really good resource for high quality, free stock photos. A huge selection and all categorized makes great images easy to find.
morgueFile - (Free) morgueFile has been around for a long time and has thousands of free stock photos that are all searchable.
Paid Image Resources
If you have a small budget to work with for your hero images, consider some of the better paid resources for higher quality images and photos. Because these are paid for, there are fall less people using them on the web, making your hero images more unique.
Creative Market - (Paid) One of the best marketplaces for images and graphics. The quality standards are high here and prices are reasonable.
500px Prime - (Paid) An incredible resource for high-end, beautiful and unique photos from photographers from all over the world.
Dollar Photo Club - (Paid) Just $1 per image and a great selection of premium photos.
Stocksy - (Paid) Another great resources of curated images from curated photographers. Images range from $10 for small images, $25 for medium sized images and $50 for large images.
Of course, stock photos will always be just that, stock photos. If you have some time and maybe a bit more of a budget, consider shooting your own hero image photography like Amos Brand.
Shooting your own photos doesn't have to be expensive or complicated. You'd be surprised at the quality of photos you can get from your smartphone. To get started, check out one of the free online classes from CreativeLive on photography to understand the basics of photography.
You may also want to consider checking out our guide on taking great photography with your smartphone. Many of the tips in this post can also be used for taking beautiful hero images for your homepage.
How to put together a hero image:
Adobe Photoshop ($9.99/month) is the program of choice amongst graphic design artists and photographers, however, it carries a fairly steep price and a big learning curve. The good news is that there are several alternatives that are much more user friendly and free.
Pixlr - (Web-Based, Free) A free web-based and downloadable image editor. If you have some familiarity with image editing, you’ll find Pixlr to be pretty easy and intuitive to pick up. Unfortunately, with no prior experience to image editing, you may still find Pixlr a little difficult to navigate. Try starting with the web-based editor.
Pixelmator - (OSX App $29.99) Pixelmator is a feature rich and powerful image editor for OS X that comes at a nominal cost of $29.99.
Canva - (Web-Based, Freemium) Canva is a fairly new web based image editor app, and it goes beyond simple image editing. Their goal is to make design simple for anyone. The app makes it easy to select the image size you're looking to produce, and includes design elements like built-in including stock photographs (free and paid) and fonts.
PicMonkey (Web-Based, Free) PicMonkey hides its power behind a simple and intuitive interface. Although PicMonkey is free, there is a premium version that provides a lot of extra for a small monthly charge.
Conclusion
There you have it, the reason, purpose and uses of a hero images on your homepage. Changing these images up frequently keeps your store feeling fresh to repeat visitors, keeps it lively and drives visitors to takes the actions that are most inline with your conversion goals.
Tell us in the comments if we missed a great resources for putting together great hero images.
About The Author
Richard Lazazzera is an ecommerce entrepreneur and Content Strategist at Shopify. Get more from Richard on Twitter.
