Select Page

One of the best themes for Woocommerce, especially if it’s the first time you’re building an online store is Storefront.

The storefront theme is extremely easy to use but it does have some unique elements to it that people who are used to page builders such as Divi might find confusing.

How header works for Storefront every block you add to the page editor will be held within the featured image and the Storefront theme will automatically add your Woocommerce products and categories beneath the featured image.

For example, I set up an example Storefront page with some example products.

All the product images on the home page were automatically added by the Storefront theme, however, the “Storefront” headline, “This is my motto” Subheadline and the button were added in the page editor.

Featured image

The featured image is the image that is used in the header background on the page all the content that is added to the page editor will be held within the featured image.

As you can see in the image below, the featured image which is in the bottom right hand of the example screenshot is the image used in the above example.

The content added to the page editor has been added to the homepage within the featured image, we can add more content by pressing the plus button in the top left of the screen.

Headline

The headline used for the header is the page title.

This is by default from the Storefront theme so I would recommend naming your homepage the name of your business.

You can change the colour of the headline text by clicking


  • Customize > Typography > Hero heading color
    Choose the colour you want for your homepage header.

Subheadline

To create the subheadline, you can just use a paragraph block.

You can also edit the colour of the subheadline at the same place as the Headline

  • Customize > Typography > Hero text color
  • Choose the colour you want for your homepage header.

Button

The buttons colour can be changed by clicking

  • Customize > Buttons
  • Background colour + Text colour

Under the header

The Storefront Theme will automatically add your Woocommerce’s products and categories.

The stock Storefront theme doesn’t allow you to customise the which Woocommerce categories will show under the header or to reorder them, to be able to achieve this we need to add the Homepage Control plugin.

Adding parralax

The parallax is a great and eye-catching effect that you can add to your homepage.

However, Storefront’s base theme does not have the functionality, but Woocommerce does have a paid plugin that you can use to add it to you website.

You can find the plugin here.

Understanding Storefront

The storefront theme is a little different to other themes that you find for WordPress.

I find it tends to be a lot more restrictive in design customisation that other themes such as Divi.

This is exactly why I think Storefront is the best theme for beginners.

While I’ve seen some amazing Divi websites out there, I’ve also seen some terrible Divi websites.

Because these premium themes have incredible levels of customisation which gives you a massive opportunity to make your website look amazing, it also gives you an equal opportunity to make your website look awful, especially if you are inexperienced.

But themes such as Storefront are hard to make them look bad because they force your website to look a particular way.

If you’re looking at building a storefront website, I have a guide on how to make an online store from the very beginning that is designed specifically for people who have never built a website before.