The idea of using hero images came about because of issues caused by homepage sliders. Using a homepage slider is discouraged as it will slow down your WooCommerce store and it doesn’t have good conversion rates. If your WooCommerce store running on Storefront has sliders and you are looking for a good alternative, you should consider using a hero image instead.
What is a Hero Image?
To better explain what a hero image is, let’s define what is the “fold” and “above the fold content”. Originally, the fold is a term used in the newspaper industry. Since newspapers are normally folded in half, the upper half of the front page will be the part of the newspaper that is exposed. This is where the most important content is featured, hence the term “above the fold content”. In web design, this is the area of the page that can be seen without scrolling down.
A hero image takes up most of the space above the fold. The trend is to make it large, attractive and relative to the content of the entire site.
It is important that you provide a complete overview of what your company/site is about with just a glance of your hero image. 90% of the time, the hero image has a large text in the center that is related to the branding of the site.
Preparing Your Images
Before you add your image, make sure you have it optimized for web use. You’d want to have the best image quality for the hero image, but you have to take into account the image size as well. As of 2016, the most common screen resolution is 1920x1080px. You should try not to go over this mark. Any excess is just a waste of page size and will just slow down your page load time.
Once you get the right resolution, try to further reduce the image size by down-scaling the image quality. You can actually reduce the image quality without having noticeable pixelation in the image. This is because the human eye can only see limited minute differences in the color changes. Try to strike a balance between having a small image size and having a good looking image. Check out this other post on how to optimize images. Once you are done preparing your image, just upload it to your WordPress site.
Adding a Hero Image in Storefront
To add a full-width hero image in Storefront, we need to use Storefront’s extensive hooks. We’ll just need to insert a few lines of code.
If you are comfortable working with code, you can paste the code below in the functions.php of your child theme. If you are a novice user, we recommend using My Custom Functions plugin to insert the code. Note that one error can cause your entire site to crash.
Copy and paste the code below. Just replace the “/wp-content/uploads/imageurl.jpg” with the URL of the image you uploaded earlier. Width set to 100% makes your image responsive to different screen sizes.
add_action( 'init', 'woa_add_hero_image_init' );
function woa_add_hero_image_init () {
add_action( 'storefront_before_content', 'woa_add_hero_image', 5 );
}
function woa_add_hero_image() {
if ( is_front_page() ) :
?>
<div id="hero-image">
<img src="/wp-content/uploads/imageurl.jpg" width="100%">
</div>
<?php
endif;
}
Your hero image should now appear on your homepage below the main navigation.
If you want to add a link to the shop page or any other url on your image, copy and paste the code below. Just replace the “http://change_me_to_your_url” with the URL you want to link to.
add_action( 'init', 'woa_add_hero_image_init' );
function woa_add_hero_image_init () {
add_action( 'storefront_before_content', 'woa_add_hero_image', 5 );
}
function woa_add_hero_image() {
if ( is_front_page() ) :
?>
<div id="hero-image">
<a href="http://change_me_to_your_url"><img src="/wp-content/uploads/imageurl.jpg" width="100%"></a>
</div>
<?php
endif;
}
Final Notes
Hero images are more effective than sliders in terms of aesthetics. You don’t have to keep using sliders if it’s slowing down your site. Explore more options. Keep your site simple and fast.
If you are still using sliders, you are most likely hurting your site speed. And a slow WooCommerce store will convert less. Your Google rankings could also suffer as a result. It’s time to do away with the slider. Go with a hero image instead.
Was this tutorial helpful? If you have any questions or anything you’d like to add, please let us know in the comments.
By default, Storefront theme uses the Helvetica Neue font. This default font is simple and simple is good. However simple may not always fit the design that you are aiming for. You may want to use a different font. But how do you go about changing the theme’s font? In this post, we’ll teach you how to change fonts in Storefront theme using Google Fonts.
Let’s break down the difference between Serif’s and Sans-serif type fonts.
So what font should you use for your WooCommerce store? The correct answer would be a sans serif font and this is true in most cases. However, you should not let this limit your design choices. If you think a serif font will work towards your purpose, then use it by all means.
