Do you want to get your service or product in front of the WooCommerce Builder Community? Check this out.

Customize the Post, Archive and Homepage Layout of Your Blog on the Storefront Theme

The Storefront theme from WooCommerce is a very popular and versatile theme. You may want to do a few customizations and are deciding if you need a developer to do them for you. Or maybe use a page builder. But if you want to do just a little customization to your blog archives, blog posts and your homepage, you may not need to go to all that work and expense.

If you are running your WooCommerce online store with Storefront, this is where the Storefront Blog Customizer extension comes in.

Using the Storefront Blog Customizer to Change Your Archive and Post Layouts

Watch this video or continue reading the post…

Once you have installed and activated the add-on, note that your homepage will need to be set for the blog. Now you will have a new tab in your customizer called Blog:

blog tab in customizer

You get options for customizing the archive page, the single post page and the homepage:

options for blog customizations

Post Meta Display for Your Blog Posts in Storefront

You can see your options for where you want your post meta displayed. And for the page layout, you can set it to full width or magazine style.

The settings are the same for both the archive and the single post options. The only difference is that the archive page gives you a Magazine Layout option, which you can see below. For example, you can choose to hide the meta on the archive page but display it to the left of the content on the single post pages.

customizing blog archive

Post Meta Display Options

Here are examples of how it is displayed in each option:

Left of Content

left of content meta

Right of Content

right of content meta

Above Content

above content meta

Beneath Content

beneath content

And of course, if it’s Hidden, you won’t see it anywhere.

Blog Archive Layout Options

As noted, you can toggle on a full width option for just your archive page and/or your post page:

full width page

Your other option is a magazine layout that can be applied to your blog page only. The thing here is that the Storefront theme only shows full posts. So, as you can see here,  using that option is not a good idea.

magazine archive blog with full posts

There is also a way to set your blog archive for excerpts by adding some code if you are comfortable doing that. But a lot of people would rather add a plugin, which is why you might want to use the free plugin Storefront Blog Excerpt.

With this plugin, you will get a Blog Excerpt tab added to your customizer. It will give you the options of selecting the  length of the excerpt pulled from your post and choosing the size of the featured image as set in your theme. If you have already created post excerpts, it will pull those in instead.

blog excerpt plugin settings

As you can see, it is pulling in my excerpts. Depending on whether you show the sidebar or not on your archive page, setting it to full width makes for a cleaner blog archive page.

blog archive page magazine style storefront

Homepage Layout Options

You can also control the look of the blog posts on your homepage. If you create a blank homepage with Storefront, you typically get several sections, including your recent blog posts. If we scroll down, we can now choose to show one, two, or three columns and up to twelve posts. I have it set for three columns and six posts and have the meta hidden:

blog posts on homepage of storefront theme

An Added Tip

If you want to use this and don’t want all those sections to show on your Storefront homepage, you can use the free plugin Homepage Control, which lets you toggle the sections off and on. You can also reorder the sections you want to show with a simple drag and drop.

homepage control plugin on storefront

And lastly, if you are looking to simply add products or product lists to your pages and posts on your site, you can now use blocks to do this.

Ss you can see, the Storefront Blog Customizer add-on gives you enough flexibility and might be all you need and is included in the bundle for Storefront as well.

For more customization on the product side of this theme, check out Customize Your WooCommerce Shop and Product Pages with Storefront.