Almost all websites today have hero banners—huge images that are prominently displayed at the homepage, along with a call to action and most of the time, a button.
Some call it a carousel, while some just call it a banner. For the purpose of uniformity, let us call it a hero banner.
Today, I will teach you what makes up a great hero banner for your store, why it is important, and what tools you can use to make one.
We will cover:
- Why do you need hero banners?
- What are the components of a great hero banner?
- Is a carousel a great idea?
- Where do you get photos of hero banners?
- How do you create a hero banner?
Let us get started!
Why do you need hero banners?
A hero banner for your Shopify store or WooCommerce store is important because it is the first thing that people see on your landing age.
Your website is a piece of real estate, much like it is a restaurant or any physical business. In the physical world, you may have seen tarpaulins or huge posters right in front of the store.
These posters are like hero banners—they have an image and a message. And yes, they also have call-to-action.
For a pizza restaurant, it could be a slice of pizza, and a massive text about an offer. Driving on a highway, you may also have seen huge billboards. These are the equivalent of hero banners for your website.
Read on to see some more reasons why hero banners are crucial for your e-commerce store:
Take a look at the hero banner of Adidas above. This is a perfect example of a banner that is telling a story about a brand. The man is intense in his workout, and it clearly sends a message—athleticism. While the brand’s logo is not there, the shoes and the man’s shirt speak for themselves.
The text and photo also say it all. It is David Beckham—and the message is clear: always being ready for challenges and keeping things cool despite being under pressure.
Are there some things that customers need to know about you? More importantly, what is it that you offer? The hero banner must answer this question. The moment a potential customer lands on your page, the hero banner must provide a clear message as to what your website is all about.
The image above is my hero banner for my other website, where I offer my writing services. The hero banner immediately tells a site visitor that what I offer is freelance writing service and that it is affordable. Before a person even scrolls down, he knows that he is on a website where he can buy the services of a writer.
If you have a sale, the hero banner must say this. If you offer free shipping, the hero banner must tell the site visitor about it.
The best place to make a customer excited about your store or offer is to let him know about it. What is it about your store that should make the site visitor browse your products?
This is also called value proposition—you are proposing something valuable—it can be a discount, free shipping, buy one take one promo, a summer sale—it can be anything. The hero banner is the best place to tell your customer what makes you different from others.
The hero banner is the best place to communicate with your customers or site visitors about an important announcement. This is different from value proposition, as this mainly deals with changes to how your store operates.
Somehow, this can overlap with your value proposition. A sale is an announcement, too. An announcement can be about your store that is now shipping to other countries, or a sale about Black Friday.
Above is an example of an announcement on Fiverr. It tells a first-time visitor, or even a returning one, that there are now courses entrepreneurs can take to make their marketing efforts viral.
The hero banner is also the best place to showcase a new product. It is best used for new product lines that you want people to know about. Without the hero banner, your new items will not get as much attention as they need.
If not a feature or a new product, you must use the hero banner space for advertising those that have a high-profit margin. If you are not a dropshipper and you keep your own inventory, use this space to showcase products that you want to dispose of.
Now that you know why hero banners are important to let us move on and see the important components of an effective hero banner.
What are the components of a great hero banner?
An effective hero banner has three main characteristics. These are eye-catching image, a good copy, and a call-to-action.
Let us discuss this three one by one.
The image you use must be eye-catching. More importantly, it has to be clear. Use big and bright images like the one used in the Adidas hero banner.
Bold images are great because they capture attention. This is where good photography will play a role. If you keep your own inventory, you need to hire a photographer to take a photo of your product.
If you are not great at photography, you can learn photography from great resources, or take your product at a local photography studio.
If you are a dropshipper, then you are in luck. Most dropship suppliers have great product photos. The thing is, most of them use the same white background. Sometimes, a white background will work, but it is always best to use it on another background.
You can do the photo editing yourself, or hire someone from a freelance market place like Fiverr to do it for you.
Copy refers to ad copy or the text that is on the hero banner. It can be a slogan or a simple text announcing what a site visitor can expect from your store.
Ad copy is an important aspect of sending a message across. It supports the hero banner’s image content. Since the hero banner has limited space, the ad copy must be concise. Too much text is painful to the eye.
A great ad copy is always short and direct to the point. There is no need to write full sentences to make a great ad copy. Sometimes, short slogans will do the job. If you go back up and look at the hero banner of eBay, it merely says Your Summer Smartphone. Enjoy Free Shipping.
As you can see, the first sentence is short and sweet, but the message is clear: buy a new phone this summer. The follow-through is Free Shipping, which tells you so much about saving on shipping cost, which is usually a part of buying online.
For short copies like this, I do not recommend that you get the services of a writer. Instead, learn how to do copywriting yourself by getting free books like the one below from Jim Edwards.
I only recommend the services of a writer if you need product descriptions or blog posts.
CTA stands for call-to-action—a text you put inside a functional button. If your website’s theme has no area where you can put a button, you can place your CTA inside the banner, or use CTA buttons below that.
As the term implies, you have to use a verb to make CTAs effective. If you look back at the different examples we had earlier, they used CTAs like Shop Now, Post a Request, Explore Now, or Shop Heat.RDY.
By the way, Heat.RDY is a product line.
A call to action must be short. The longer it is, the less effective it is going to be. The call to action you use depends on your target audience. If you want to learn more about effective CTAs, below is a great article from Shopify that will get you started.
Remember, a hero banner has three important components. These are image, copy, and CTA.
Is a carousel a great idea?
Some hero banners are called carousels. They are called so because there is not one but more than that inside the hero banner. These different banners rotate.
Usually, there are dots within that hero banner that allows a site visitor to click and chose what hero banner he would like to see. If not dots, there are directional arrows on both sides.
See the two examples below:
So, the question is: is this a good idea? If eBay is using it, then it must be great, right?
According to some tests, 84% of clicks from rotating hero banners come from the first banner that the site visitor sees. Many experts believe that you should only use one hero banner. The reasoning behind this is that these banners will be ignored.
Also, they can have a bad impact on your SEO. Experts suggest that if you ever use rotating hero banners, you have to program the website in such a way that your website will show the appropriate hero image based on customer demographics.
If you really love to use rotating hero banners, take note of the following tips:
- Use the same sizes for all banners
- Use the same design concept; go to eBay, and you will see how all banners in the carousel have similarities
- Keep the content short and sweet; use minimalist design techniques, so the image is easy to understand
- Make sure that the images are not too heavy, or the homepage will load slowly
- Maintain three slides and no more than that
Lastly, make sure that your navigation menus are still visible despite having several banners. This is critical, as some banners obscure the navigation links on the page, thus preventing a site visitor from exploring the website.
Where do you get photos of hero banners?
Now, if you are not into photography, where are you going to get images for your hero banner? It would have been so simple if you have a high-end camera and you can take the photos yourself. What if you do not have one?
You can buy them from sites like Shutter Stock, or you can use free ones. If you know how to do graphic arts, you can use your product image and have it edited on Photoshop. If you do not know how to edit images, you can hire someone on Fiverr for at least $5 to do the editing for you.
Here is a list of other free resources where you can get high-quality free photos:
- Burst by Shopify – a brand new photo platform that was put up to help Shopify store owners. You can download medium to high-resolution images from this site, all royalty-free. You can use the images for your hero banners, your social media ads and other marketing campaigns.
- Death to Stock Photo – as the name suggests, this company does not like the idea of photographs used again and again for a fee. You see, you do not own the copyright when you buy stock photos. Well, you can own it, but you have to pay a hefty price.
- PixaBay – there are more than 400,000 photos here that you can download for free. Apart from stock photos, this site offers vectors and illustrations such as icons and clip arts that you may find useful.
How do you create a hero banner?
Now, let us say that you have the photo and it is in PNG format where it has no background. What if you want to do your own design?
Even if you do not know how to use Photoshop, there are free tools out there that can help you create your own hero banners. What I use are Inkscape and GIMP. Both are open-source software that is great for beginners.
Inkscape and GIMP work like Photoshop, CorelDraw, or Adobe Illustrator. If you have no time learning how to use these tools, your other option is to use free drag-and-drop software like Canva.
Canva is free, but it also has a paid version. In the free membership, you can make as many artworks as you want. Here are some examples of what you can do:
- Facebook covers
- Social media posts
The free version has a limitation. There are some icons and photos that you cannot use unless you pay. You can either be a paying member or stay in the free tier and pay $1 per icon or photo that you use.
Now, let us wrap this up. A hero banner is useful to attract your site visitor’s attention and to announce something about your store. It needs a crisp and clear image, a copy, and a call to action. As a last tip, do not get too excited when designing a hero banner. Always use minimalist design techniques when creating one. As the saying goes, less is more.
Share this knowledge!
or Follow me on Social Media!
My Recommended Tools
Why waste time and spend thousands of dollars when I already did? Stop wasting your money testing tools that do not work. I already did that. Check my recommended tools so you get only the best.