Shopping for a new theme can be exciting, and you can completely refresh the design of your site without sacrificing the way it works. While changing themes isn’t typically a quick and easy process, it can be very valuable in terms of presenting the brand and design that should reflect your business.

However, not all themes are created equal. We’ve discussed what to look for in a WooCommerce theme, but it’s hard to know if the theme you’re buying is as beautiful on the inside as it is on the outside. There are themes that override all WooCommerce templates without updating them and therefore can break with new versions of WooCommerce; there are themes that include shop styles that look nothing like the rest of your site; there are even themes that have broken the WooCommerce REST API because they’re improperly coded.

Choosing a theme from a reputable author can help you avoid issues, and I frequently recommend using Storefront. It’s a free theme that provides an excellent start for customization projects because it’s well-built and extensible. Storefront can be used for many sites as-is, but the extensions available can be a huge help to non-developers while customizing their design.

Storefront Extensions

The extension model for themes isn’t a novel concept, as other authors like Andrew Munro and Theme Foundry (with Make Plus) have built plugins or extensions to add functionality to their themes. However, this is the first time WooThemes has made this move with a theme, and I like that this model supports both developers and non-developers who’d like to customize Storefront themselves.

While Storefront is a great starter theme on which to build custom child themes, the several Storefront Extensions help non-developers tweak their sites to make them their own. Using the built-in options for color and design can help you adjust the way your shop looks, and Storefront-specific extensions can take this further by helping you customize the layout of your product pages or blog posts.

While most Storefront extensions are paid plugins, there are a few new free extensions that will also help you customize site layout. Today I’ll take a look at 3 free Storefront extensions from WooAssist (you may recognize them from the Storefront support forums, as they donate time there occasionally).

While you can add a logo to your site using Jetpack’s site logo, I prefer to use the Storefront Site Logo extension instead.

This plugin adds a “Branding” section to the theme customizer while using Storefront so that you can opt to display your site title and tagline, or use an image for your logo. I liked that the logo image will automatically be resized to the correct width for the theme no matter which size is uploaded.

Storefront site logo

Free Storefront Extension: Top Bar

Storefront includes 2 menu areas that can be used for separate navigation. The primary menu is at the bottom of the header, while the secondary menu is next to the search box.

WooCommerce theme Storefront menus

Many themes will display a secondary menu at the top of the page instead of within the header area, which I prefer to do most of the time so it’s more noticeable. The Storefront Top Bar extension can help you do this by adding a widget area to the top of your site. This can let you add one or two widgets above your site header, and they’re very handy for menus or notices.

For example, here’s a setup using Top Bar to add a menu on the left and a notice on free shipping to the right.

WooCommerce theme Storefront top bar

Storefront has a header widget that will appear below navigation that can be used for notices as well, but Top Bar gives you another display option.

Free Storefront Extension: Title Toggle

Storefront Title Toggle can be used to remove the title from a Storefront static home page or to adjust your blog post layout. This is most useful for the site homepage. Typically, you’ll see it at the top of your homepage content with a bottom border:

Storefront Homepage

Default Homepage: Title displayed

This isn’t really adding much to our site, so we could change it to a welcome message or just get rid of it to focus on our content. Using the toggle, we can remove it:

Remove Storefront homepage title

Now our homepage will simply start with the content on our homepage or the default Storefront sections.

Storefront updated homepage

This can be used on any static page you’d like, so you’re not limited to using the title toggle on the home page.

Typically, blog posts include the title / author information at the top of the page, and will include post meta (comment count, category, etc) to the left of the post. You can also use the title toggle to remove the post title or the post meta.

Storefront blog post

Hiding the post title will remove both the title and author section from the top of the post:

WooCommerce theme storefront no title post

I prefer to use title toggle to remove the post meta from the left side of the post:

Storefront no meta

I don’t like that they post layout isn’t full width after meta is removed, so here’s a quick snippet you can add to your child theme or custom plugin to adjust this style (a bit difficult to do with pure CSS since the same classes are used on the blog archive, where we don’t want to apply this):

function change_content_width() {
    if ( is_singular( 'post' ) ) {
        ?><style>
            .hentry.type-post .entry-content { width: 100%; }
        </style><?php
    }
}
add_action( 'wp_print_footer_scripts', 'change_content_width' );

Once this code snippet is applied, blog posts will display full width when a single post is viewed, but blog archives will remain the same.

WooCommerce theme storefront no post meta - full width

Free Storefront Extensions: Summary

There are more Storefront extensions coming, both from WooThemes and third party developers like WooAssist. There are also child themes in the works, and WooThemes has released their first Storefront child theme already.

While I love the flexibility Storefront provides developers as a starter theme, I think it’s great that non-developers can still customize their sites with Storefront via tailor-made extensions or child themes. As Storefront grows in popularity, I think we’ll see more extensions and child themes (both free and paid) to leverage its foundations as a rock-solid WooCommerce theme.

You can check out the free Storefront extensions we mentioned here:


Note: This post was sponsored by WooAssist, as the product was provided for us to review. The opinions in this article are solely those of the author without bias, and are based on experiences using the product. For more information, please see our editorial policy.
Articles you may also like:

Posted by Beka Rice

Beka Rice manages the direction of Sell with WP content and writes or edits most of our articles to share her interests in eCommerce. Or she just writes as an excuse to spend more time jamming out to anything from The Clash to Lady Gaga. Who knows.

5 Comments

  1. Prabhjas Singh July 9, 2015 at 11:50 pm

    Thanks a lot really helpful to me. As, I am designing online Vegetable website. if there are many more tnigs which we can do to make our website look more goo. Please let me know.
    Once again thanks a lot.

  2. Hi,
    I tried to add this snippet to my CSS plugin, but I get an error. Should I write something before the function?
    Thanks!

    1. Hey Josee, I’d give this a read to determine where to add this. Cheers!

  3. Hello Beka,

    Thanks for sharing this information.

    I have added this code to my child themes style.css but the single blog post still does not go full width after removinge the meta is removed?

    1. Hi Beka,

      Correction for the above post, ofcourse this code should go into the functions.php not the custom.css!!

      My bad! I added it to the functions.php of my child theme now and works fine, thanks was frustrated by that gap for a while now haha.

      Thanks!
      Annie

It's been over 2 years since this post was published, so comments have been closed. Thanks for reading!