Wooassist

Assistance for Your Woocommerce Store

  • How it Works
  • Pricing
  • Site Maintenance
  • Blog
    • How-To Articles
    • Code Snippets
    • SEO For E-Commerce
    • Theme and Plugin Reviews
    • Wooassist News
    • WordPress/WooCommerce News
    • Interviews
  • About Us
  • Contact
You are here: Home / Code Snippets / How to Add a Hero Image in Storefront

How to Add a Hero Image in Storefront

July 1, 2016 By Nick J 34 Comments

Facebook1
Twitter0
Google+0
LinkedIn0

laptop_Hero-Image

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.

How-to-add-a-hero-image-in-Storefront-Appearance-Functions

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.

how to add a hero image in storefront

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.

People that read this article also liked

  • How to Revert to the Old WooCommerce Product Gallery in WooCommerce 3.0How to Revert to the Old WooCommerce Product Gallery in WooCommerce 3.0
  • How to Change the Number of Related Products in WooCommerceHow to Change the Number of Related Products in WooCommerce
  • How to Fix Blurry Product Images in WooCommerceHow to Fix Blurry Product Images in WooCommerce
  • Improve Website Page Load Speed by Optimizing Images for WebImprove Website Page Load Speed by Optimizing Images for Web
Facebook1
Twitter0
Google+0
LinkedIn0

Filed Under: Code Snippets, How-To Articles Tagged With: admin, best practices, code snippet, conversion optimization, design tweaks, how-to, image optimization, plugins, site speed optimization, Storefront

Comments

  1. Trisna Kurniawan says

    November 9, 2016 at 11:43 am

    Thanks for the tutorial !!!

    can i ask, how to add action button to the hero image?

    Thanks

    Reply
    • Nick J says

      February 13, 2017 at 7:21 pm

      Hi 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.

      Reply
  2. minhaz says

    March 11, 2017 at 9:21 pm

    very nice and effective tutorial, thnx

    Reply
    • Nick J says

      March 31, 2017 at 6:49 am

      Thank you, Minhaz! We hope it serves you well!

      Reply
  3. Todd Wheeler says

    January 10, 2018 at 1:40 pm

    Thank 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

    Reply
    • Rob says

      February 27, 2018 at 1:32 pm

      Hi Todd,

      Glad to know the post was helpful. 😀

      If you might have any questions, feel free to ask.

      Reply
  4. J says

    January 25, 2018 at 4:09 pm

    I’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 🙂

    Reply
    • Rob says

      February 27, 2018 at 1:24 pm

      Hi 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!

      Reply
  5. ags says

    February 6, 2018 at 2:52 am

    Very 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 🙂

    Reply
    • Rob says

      February 27, 2018 at 1:07 pm

      Hi ags,

      We’re glad to know that our articles have been useful to our followers. 😀

      Hope you have a great day!

      Reply
  6. Aurelien says

    March 1, 2018 at 2:27 pm

    Ive 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 ?

    Reply
    • Rob says

      April 19, 2018 at 2:01 pm

      Hi Aurelien,

      Its actually not the IF statement that you need to change. You have to change where the function for the hero image fires.

      add_action( 'storefront_before_content', 'woa_add_hero_image', 5 );

      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:

      add_action( 'storefront_before_footer, 'woa_add_hero_image', 5 );

      Let me know how this goes.

      Reply
  7. stefan says

    April 9, 2018 at 1:59 pm

    Guys/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?

    Reply
    • stefan says

      April 9, 2018 at 2:00 pm

      a” piece of text ” H2 or so.

      Reply
      • Rob says

        April 19, 2018 at 1:51 pm

        Hi Stefan,

        You could edit the code and insert your H2 like this:

        Reply
  8. Rory Vorster says

    April 14, 2018 at 9:50 pm

    HI 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!

    Reply
    • Rob says

      April 30, 2018 at 12:36 pm

      Hi 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.

      Reply
  9. stefan says

    April 27, 2018 at 6:50 am

    Hello 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.

    Reply
  10. stefan says

    April 27, 2018 at 6:53 am

    Oh, You already answerd my question before 😉 , excuse me and thanks alot!!!!!!

    You guys are the best!

    Reply
  11. Travis says

    May 6, 2018 at 11:38 pm

    Thank 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!

    Reply
    • Rob says

      May 12, 2018 at 2:35 am

      Hi 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.

      Reply
      • Carolina says

        June 10, 2020 at 7:46 am

        Hola!! Quiero hacer lo mismo pero no comprendo donde poner el link de referencia hacia la segunda imagen:
        En la homepage tengo una imagen y quiero agregar también una imagen de héroe en la pagina contacto (pero distinta a la de la home) , me puedes ayudar?
        Gracias

        Reply
        • Rob says

          August 6, 2020 at 11:46 am

          Hi Carolina,

          We do not speak Spanish but we used Google translate on your comment.

          To add the hero block to other pages change this bit of code:

          is_front_page() to is_page('contact')

          This would depend on your contact page slug though. If your contact page’s link is /contact-us then use contact-us instead of contact.

          Reply
  12. Nas says

    June 20, 2018 at 4:22 am

    Hi, 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

    Reply
    • Rob says

      June 26, 2018 at 12:06 pm

      Hi 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.

      Reply
  13. susan says

    July 30, 2018 at 5:41 am

    How do i make the image a clickable link to the “shop page”?

    Reply
    • Rob says

      August 7, 2018 at 11:37 am

      Hi Susan,

      We’ve updated the post to include instructions on how to add a link to the hero image.

      Hope that helps.

      Reply
  14. Jason says

    January 25, 2019 at 7:13 pm

    Amazing 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.

    Reply
    • Rob says

      January 27, 2019 at 11:13 am

      Hi 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.

      Reply
  15. adnan says

    June 12, 2020 at 6:18 am

    thank you. it works!

    Reply
  16. Cristian says

    June 13, 2020 at 8:27 pm

    Hi, i was looking exactly for this solution, now i tried your snippet and everything works just perfectly i even manage to place a different image for different pages as long as they are conditional tags for woocommerce pages, such as shop, cart, checkout etc…but…..when i tried to place a hero image in a custom page i made, the code does not work for me…..you posted a solution here about that using the “if (is_page(‘your page‘)):” but i can manage to make it work for my contact page……i used the slug “contact” for the page, but is not working.

    Can you give me a hint on how to make it work with custom pages……im from México and hope make myself clear about my problem with my english writing skills.

    My site is down under construction…..

    Reply
    • Rob says

      August 6, 2020 at 11:43 am

      Hi Cristian,

      Since you were able to make it work with your other pages and not your custom page, I am thinking maybe you created a custom template for that page and did not include the proper page hooks on it that’s why the hero image is not appearing. We suggest copying the page template file of your theme and start customizing there instead of starting from scratch.

      Reply
  17. Memo says

    February 24, 2021 at 4:05 am

    Thaks for the tutorial, works great, but how can I add 2 colums inside the banner, because I try it but I can´t do it.

    I try adding this:

    LEAF
    Let´s see
    enter

    But the CSS properties like background image or color doesn´t work.

    Do you have any tutorial?

    Reply
    • Rob says

      March 2, 2021 at 1:37 pm

      Hi Memo,

      Unfortunately, adding 2 columns is not an easy fix. We do offer a support service where we can help with the customizations you need done on your site.

      You can see this link for our pricing.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Woocommerce Support

wooassist-team-in-Iloilo

Get 2 Hours of
FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $70

BUY NOW

Happy Wooassist Customers

Awesome! Fantastic! I just went to our site and I see that our site has been fixed!! We are getting orders again thanks to you all at WooAssist! Our site has not worked and looked this good for many months!! You all are awesome! Thank you so much for fixing our site! You have a customer for life! Thanks for making my day wonderful!

Kenneth Arnold

We have been quite pleased working with WooAssist as they help fill in the gaps of our development needs, all at a great price. They are always timely and communicate great, I highly recommend their services.

James Grasty

My husband and I am EXTREMELY pleased with the WooAssist Team. They provide excellent service, are very knowledgeable, and super easy to communicate with. The team ALWAYS has our company's best interests in mind. I love WooAssist! All of you make my job easier.

Jennifer Taft leetaft.com

Categories

  • Code Snippets
  • How-To Articles
  • Interviews
  • SEO For E-Commerce
  • Theme and Plugin Reviews
  • Wooassist News
  • WordPress/WooCommerce News

Recent Posts

  • Elementor Ecosystem of Plugins Rocked by Vulnerabilities
  • How to Fix Your Website Structure
  • Over 7 Million Elementor Plugin Users Potentially Affected By Vulnerabilities
  • WordPress 5.7 “Esperanza” + WooCommerce 5.1 Released
  • WooCommerce 5.0 Has Landed
Let us support your online store so you can manage your business

Get started today

Get 2 Hours of FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $70

BUY NOW

Free eBook

Your subscription could not be saved. Please try again.
Your subscription has been successful.

YOURS FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales

Quick Links

  • How it Works
  • Pricing
  • Blog
  • Contact
  • About Wooassist
  • My Account
  • Checkout
  • Privacy Policy
  • Cookie Policy
  • Terms and Conditions

Wooassist

Australia:
8 Storie St.
CLONTARF QLD 4019

Philippines:
San Miguel St.
Poblacion, Iligan City 9200

Connect

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Copyright © 2021 · Wooassist

Yours FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales

This site uses cookies. Please read our Cookie Policy for more information.