Hero images could be deadly

By Ilana Davis

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.

Sonya Dakar screenshot of their hero image on both desktop and mobile. This before photo shows text and button in the image.

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.

Sonya Dakar screenshot of their hero image on both desktop and mobile. This after photo shows text and button on the image with a white background.

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.

JSON-LD for SEO

Get more organic search traffic from Google without having to fight for better rankings by utilizing search enhancements called Rich Results.

Linking Llama

Link discontinued products to their best substitute. Keep discontinued products published on your website and continue to benefit from traffic to these pages.