Introducing the ‘homepage hero’ for Storefront Pro

Version 5.5 of Storefront Pro is a major update and comes with an exciting new homepage hero option. This lets you transform your homepage with a single click. The new homepage hero setting lets you create four different kinds of beautiful layouts. The new option can be found by going to Customize / Header and Navigation / Header Type. 

  1. Featured Products Slider – choose this option and Storefront Pro will use your featured products to automatically create a beautiful slider.
  2. Featured Image hero – choose this option and Storefront Pro will use the featured image of your page and create a full screen hero.
  3. Video hero – choose this option to add a video from either Youtube or Vimeo as your Homepage Hero.
  4. Slider Hero – choose this option to create your own sliders, with your own photos, text and call to action buttons.

See a live demo of each Storefront homepage hero

I’ve built a few live examples so you can see exactly what each WooCommerce Storefront Pro homepage hero looks like for real

  1. Click here to view the Featured Products homepage hero
  2. Click here to view the Featured Image homepage hero
  3. Click here to view the Video homepage hero
  4. Click here to view the Slider homepage hero

How to set up the Storefront Pro ‘homepage hero’ in 1 click

Here’s a video walkthrough of how to set up your own WooCommerce Storefront homepage hero.

To see all the changes in Storefront Pro 5.5 click here to view the Changelog. 




11 responses to “Introducing the ‘homepage hero’ for Storefront Pro”

  1. So excited about this! I do however wonder if there is a way to auto-mute the video homepage hero so that visitors can decide if they want audio or not. Is this possible?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Cassandra,

      That’s a great idea – it’s not possible with this first version, but we’ll be adding improvements as we go 🙂

      kind regards

      1. Define “not possible”.

        I would create a child theme and override whichever file generates the HTML for videos. The time consuming bit is going through someone else’s work to find it but you can usually run a search-all-files-in-folder for a piece of text found in the output, e.g. the video container’s class or id.

  2. Hi Jamie, What is the optimum size for images for the Slider Homepage Hero?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Jason,

      I use about 1500 pixels width 🙂

      see me a link once yours are done – i’d love to see some examples,


  3. Hi Jamie, Will I be able to shift the text on the homepage so that it doesn’t cover an important part of the image? In your example, when the bride’s photo is in horizontal view, it covers part of her face.

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Christina,

      You can’t move the text, but there is an option to put an overlay behind the text so it is readable 🙂


  4. How do a specify a static image to be used in place of my Vimeo video Homepage Hero? Presently a small Vimeo player is displayed on mobile devices accessing my site.

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Mark,

      You can just use the slider option 🙂

      If you have any other questions, then here’s the link to raise a support ticket

      kind regards

  5. Hello,

    In addition to just the storefront pages, can we apply this to static pages as well? For example the About page, FAQ, etc. ?

    thank you!

    1. Jamie Marsland Avatar
      Jamie Marsland


      You can 🙂

      Storefront Pro has a site wide hero option where it takes the featured image as the hero image. The option is found in the customizer in the same panel as the Home page hero


Leave a Reply

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