Call them hero images, banner images, above the fold attention grabbers, or even giant image. Their purpose remains the same.
They’ve actually been around for decades. You would have seen them on the font page of a newspapers and magazine covers. On your website, this is usually where the story begins yet also where many Shopify sites miss their mark.
A hero image is a very large image that serves to catch the readers eye. Eye candy if you will.
The deadly side of a hero image is when the store owner or marketer focuses on their own needs and not their visitor.
Keep the focus on them
As with any content on your site, your images should tell a story that solves your visitors problems, not your own.
For example, the hero image could
- answer common customer questions,
- explain what makes your product better than your competitors, or
- make an announcement such as the current sale.
Another great option, is to use the hero image to show customers what your products look like in real life.
If you sell furniture, give your customers a glimpse of what the sofa could look like in their home. If you sell clothing, show customers what it looks like on a real person. If you sell makeup and want to highlight the skin tone variety, use a diverse group of models.
Text can make or break you
Danger lurks if you’re not strategic about the text on your image. This is the most deadly of all.
Avoid putting text in the actual image if you can. Not all images will resize properly from desktop to mobile. You’ll run the risk of important information getting cutoff or being too small to read.
If you must include text in the image, make sure your alt text includes the words so that visually impaired users and Google can read it.
The example below was from Sonya Dakar, a Shopify site in the skincare industry, during their holiday sale. The image, focuses on the holiday sets, but missed the story telling. Who are these sets for and why should I buy a set?
Knowing the issues that text in the image poses, they coded in the ability to use an alternative image on mobile. They chose to add code and opted to use text and a fake button in the image itself instead of thinking through different, more simple options.
The best thing to do is use text over the image which is often built into quality themes such as Turbo or Flex.
This can be a bit tricky and can still get you into hot water.
Ensuring the text is readable is also important. When words are on top of or covering the image, it can be difficult to see the letters with the background.
Use a solid background where the text will be. If that’s not possible, add strong contrast by adding a background color to the text box.
Using Sonya Dakar’s latest hero image, you’ll now notice the text looks quite different. Now they are focusing on a problem their customer has; cold-weather skin.
They are also using proper HTML text and button on top of the image. The image now resizes on mobile without adding an alternative image. They also included a semi-transparent background color, ensuring the text is still legible when placed over the image.
I recognize the amount of information I threw at you is a lot. Never fear!
We cover all this and more in the Website Rescues. During the Website Rescues, we’ll look at your hero image and discuss ways to use your imagery to improve not only SEO but also your users experience.