How to create this lovely full screen slider effect for your WooCommerce Storefront home page

How to create this lovely full screen slider effect for your WooCommerce Storefront home page


Introduction

This is one of my favourite effects that is possible using our Storefront Pro plugin and it's really easy to do and will only take a few minutes to set up. 

Tools that are needed

  1. Storefront Pro ($49)
  2. Pootle Pagebuilder (free version)
  3. Pootle Slider (free version)


Step 1 - create the slider and insert into your page

Create your slider using Pootle slider and insert it into your home page 

Step 2 - customize the header

There are just a couple of steps to get the slider looking great behind the header. 

  1. Click customize page in the admin toolbar, and then select 'Make header come over content'.
Customize storefront header


Step 3 - make the header transparent

Now you just need to click select colour and then make the header colour transparent (so that the slider will show through it).

When you click on the colour selector, you'll see two colour sliders. The left hand one is for the base colour, the right hand selector sets the transparency for the colour. The further down you slide the right hand slider the more transparent the header will be. 

make storefront header transparent

Conclusion

Once you publish your page you should now see the slider nicely showing through the header. In the example above, I've set the menu to be aligned right, but this will work with the other navigation options with Storefront Pro

One thought on “How to create this lovely full screen slider effect for your WooCommerce Storefront home page

  1. I am very excited to get this set up and looking nice on my site, but when I go to the page customizer and click “Make Header Come Over the Content” I am not given the option to adjust the opacity, only a simple text bar where I can enter color code. Any ideas?

Leave a Reply

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