Last Updated on
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.
Trisna Kurniawan says
November 9, 2016 at 11:43 amThanks for the tutorial !!!
can i ask, how to add action button to the hero image?
Thanks
Nick J says
February 13, 2017 at 7:21 pmHi Trisna. This is a bit tricky to implement but you can you can email us about it at support@wooassist.com so we can discuss how we can add it to your site.
minhaz says
March 11, 2017 at 9:21 pmvery nice and effective tutorial, thnx
Nick J says
March 31, 2017 at 6:49 amThank you, Minhaz! We hope it serves you well!
Todd Wheeler says
January 10, 2018 at 1:40 pmThank you for the very clear instructions and the code. Very nice!
As you mentioned, installing the “My Custom Functions” plugin by Arthur Gareginyan is a great way to add the custom code you provided.
I went the child theme route and uploaded a child theme to my site from Stuart Duff found here:
https://github.com/stuartduff/storefront-child-theme
Thanks and best regards
Rob says
February 27, 2018 at 1:32 pmHi Todd,
Glad to know the post was helpful. 😀
If you might have any questions, feel free to ask.
J says
January 25, 2018 at 4:09 pmI’m new to woocomerce and this tutorial has been fantastic. Thank you. Going to look around the rest of the site now and see what other gems you’ve done 🙂
Rob says
February 27, 2018 at 1:24 pmHi J,
We’re overjoyed whenever we know our posts have been helpful.
Hope our other posts will be just as helpful if not more. 😀
Have a great day!
ags says
February 6, 2018 at 2:52 amVery Good Code and Very Helpful Articles for me! No conflict & still works with the latest version of Storefront Themes, WooCommerce, WordPress and the other plugins on my site.
Awesome, Thank you so much to Wooassist people @Nick J – five stars 🙂
Rob says
February 27, 2018 at 1:07 pmHi ags,
We’re glad to know that our articles have been useful to our followers. 😀
Hope you have a great day!
Aurelien says
March 1, 2018 at 2:27 pmIve been editing my site with your instructions and is working great!
i have a question though. i would like to put a hero banner under the body of my front page, is there away to changethe : if ( is_front_page() ) : , section to like under the body of the front page, is there different “IF” options, could you provide any others options.
if you’d like to take a look
I want the bottom image under the welcome button to be a hero image that doesnt have any margins, is that possible ?
Rob says
April 19, 2018 at 2:01 pmHi Aurelien,
Its actually not the IF statement that you need to change. You have to change where the function for the hero image fires.
The code we provided fires it before the page content.
If you want it to appear before the footer then you need to change the code to:
Let me know how this goes.
stefan says
April 9, 2018 at 1:59 pmGuys/Girls , i used your piece of code and it worked fine. Thanks alot . it Makes the homepage look so much better.
Is it possible to add a or so, on top of the image?
stefan says
April 9, 2018 at 2:00 pma” piece of text ” H2 or so.
Rob says
April 19, 2018 at 1:51 pmHi Stefan,
You could edit the code and insert your H2 like this:
Rory Vorster says
April 14, 2018 at 9:50 pmHI there!
I am looking to replicate the hero image from your homepage BUT without the actual products… I want to use this on any other page – like blog posts perhaps or a simple page.
To be clear I want to have the hero image, the page title overlay on the image and a text element too… so just like the homepage – without the product listings!
Can I achieve this easily?
Thanks!
Rob says
April 30, 2018 at 12:36 pmHi Rory,
Sorry, we’re not quite sure what product listing you are referring to. The codes from the guide only details how to add a hero image so if you are seeing a product listing under it, it is most likely added by your theme. Should you need further help on this, you can email us at support@wooassist.com.
stefan says
April 27, 2018 at 6:50 amHello guys/girls, it works great.
Though, is there a way to add an overlay text to this hero? right now i have done it with photoshop directly on the image, but i’d rather avoid that.
stefan says
April 27, 2018 at 6:53 amOh, You already answerd my question before 😉 , excuse me and thanks alot!!!!!!
You guys are the best!
Travis says
May 6, 2018 at 11:38 pmThank you for the code! It works perfectly on the Storefront Homepage but my question is: how do I get it to display on other pages? Is there a way to get it to work on individual Pages I have created?
For example, I have this code working perfectly on my home page at http://www.kaishostudios.com but would like to have a different hero image also on https://kaishostudios.com/shinju/
Is there an easy solution?
Thank you!
Rob says
May 12, 2018 at 2:35 amHi Travis,
you need to modify this bit: if ( is_front_page() ).
So lets say you want to add the hero image on your shinju page, you would use: if ( is_front_page() || is_page(‘shinju’) )
This basically means that if the current page is the front page or (||) the shinju page then it will do this and that. If you want to add it to multiple pages, you need to use if ( is_front_page() || is_page(array(‘page1’, ‘page2′, page3’)) ). Just enter the page slugs of the pages you want the hero image to be on.
Let me know if that helps.
Nas says
June 20, 2018 at 4:22 amHi, thanks for the awesome tutorial. I have one question, how to remove gap between navigation bar and hero image? Its displayed perfectly on my site if i am using homepage template but if i am using the default template, it have a little gap. Is there any code to display it correctly? Thanks
Rob says
June 26, 2018 at 12:06 pmHi Nas,
This depends on the theme you are using. There should be a margin or padding on an element after the header or before the content. You’ll just need to tweak the value of that element to achieve your desired result.
susan says
July 30, 2018 at 5:41 amHow do i make the image a clickable link to the “shop page”?
Rob says
August 7, 2018 at 11:37 amHi Susan,
We’ve updated the post to include instructions on how to add a link to the hero image.
Hope that helps.
Jason says
January 25, 2019 at 7:13 pmAmazing tutorial, thank you for sharing. Code works perfectly. Is there a way to actually swap the hero image with another image based on screen size? I would like my desktop optimized hero image to change to another image that I is optimized for a mobile screen size.
Rob says
January 27, 2019 at 11:13 amHi Jason,
Changing the hero image based on screen size is complex. We can use media queries to get it done. You can send us an email at support@wooassist.com so we can discuss adding it to your site.