Introducing the ‘homepage hero’ for Storefront Pro

Feb 21, 2018

—

in WordPress, PootlePress news, Storefront by WooThemes, Storefront Pro, Woocommerce

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.

Featured Products Slider – choose this option and Storefront Pro will use your featured products to automatically create a beautiful slider.
Featured Image hero – choose this option and Storefront Pro will use the featured image of your page and create a full screen hero.
Video hero – choose this option to add a video from either Youtube or Vimeo as your Homepage Hero.
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

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.

Comments

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

Cassandra

February 22, 2018

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?

Reply
1. Jamie Marsland
  
  February 22, 2018
  
  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
  jamie
  
  Reply
  1. Paul
    
    March 28, 2020
    
    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.
    
    Reply
Jason

February 23, 2018

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

Reply
1. Jamie Marsland
  
  February 23, 2018
  
  Hi Jason,
  
  I use about 1500 pixels width 🙂
  
  see me a link once yours are done – i’d love to see some examples,
  
  jamie
  
  Reply
Christina

February 26, 2018

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.

Reply
1. Jamie Marsland
  
  February 26, 2018
  
  Hi Christina,
  
  You can’t move the text, but there is an option to put an overlay behind the text so it is readable 🙂
  
  jamie
  
  Reply
Mark Trimble

June 6, 2018

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.

Reply
1. Jamie Marsland
  
  June 7, 2018
  
  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 pootlepress.com/support-form
  
  kind regards
  jamie
  
  Reply
HYH

February 13, 2020

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!

Reply
1. Jamie Marsland
  
  February 13, 2020
  
  Hi,
  
  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
  
  thanks
  jamie
  
  Reply