Most online stores andtheme templateshave one major component in common, a large, featured image or series of images prominently displayed on thehomepage.
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 incredibletools and graphic resourcesto help you create beautiful and persuasive hero images for your online store.
Let’s dig into it.
Free Reading List: Online Store Design Tips
Your online store's appearance can have a big impact sales. Unleash your inner designer with our free, curated list of high-impact articles.
Get our Store Design reading list delivered right to your inbox.
Almost there: please enter your email below to gain instant access.
We'll also send you updates on new educational guides and success stories from the Shopify newsletter. We hate SPAM and promise to keep your email address safe.
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 theShopify 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.
2.回答客户问题
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”.
3. To highlight your value proposition
Perhaps the most important use of this space can be to explain your brand'svalue 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.
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.
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.
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 whygreat 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.
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.
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 agreat post谈论这个,他们的建议是ditch the rotating banners all together.
The post referencesone studyby 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.
保持内容简单,这样他们就可以被消化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-designor 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
Burst by Shopify- (Free) This is a brand new photo platform for entrepreneurs. You can find high-resolution product photos and lifestyle images that are perfect formarketing campaignsand social media. Hundreds of new photos are being added every week, so check back often if your niche hasn't been added yet.
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.
亲爱的h 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 400,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(免费的)morgueFile已经存在了很长蒂姆e 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 likeAmos 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 fromCreativeLiveon photography to understand the basics of photography.
You may also want to consider checking out our guide on takinggreat 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.