Updated – 14th May 2019
Version 2.5 of the WooCommerce Storefront theme now has in-built support for the new Gutenberg Block editor.
When you first install the WooCommerce Storefront Theme, you’ll get a basic home page layout, that has been built using a selection of blocks
And you can edit the layout of your home page quite easily.
However you are still somewhat limited if you really want to make your WooCommerce Storefront home page really stand out!
And your Storefront home page is one of the most important pages on your website.
Below you can see a much more exciting WooCommerce Storefront Home page
This was built using the three plugins listed below and the new WordPress block editor :)
- Storefront Pro – a plugin that lets you customize the WooCommerce Storefront theme
- Storefront Blocks – beautiful WooCommerce blocks (products slider, masonry grids, carousels)
- WooCommerce Blocks – show WooCommerce products within your pages
This is what it looks like in the block editor
Important – how to customize your WooCommerce Storefront Home page if you didn’t start by installing version 2.5 of the Storefront theme
If you installed Storefront a while ago then you will still be using the old version of your home page.
The WooCommerce Storefront theme came with a home page template that automatically brings your products into a page.
It’s great because it’s automated, however the downside is that you are then stuck with the order and layout of the page.
In my view there is a better way for store owners to build a WooCommerce Storefront home page.
To customize your home page just follow the following steps
- When view the home page click edit page
- Change the template from ‘home page’ to default or full width
- Now add your blocks (as in the first part of the tutorial above)
If you have any questions, please feel free to leave a comment below,