Finding a good theme for your site can be a really difficult task. It’s tempting to go theme hunting before doing anything else in your store, as you want to know how your shop will look. However, you may then discover that your theme doesn’t fully support WooCommerce or the other plugins you’d like to use. This is even worse if you find yourself buying several premium themes to get the look you want for your store.
Today’s review includes a theme that not only includes styles for WooCommerce, but looks fantastic with almost all of the official WooCommerce extensions. You won’t have to buy several different themes to see if they’ll work out for you. In fact, you don’t have to buy it at all. Today we’re bringing you hands-down, the best free WooCommerce theme available: Storefront from WooThemes.
Storefront is a brand-new WooCommerce theme from WooThemes, and it’s just been released for free on the WordPress.org repository. It’s open-source so that anyone can contribute to the development via GitHub, fork it, or report issues.
You’ll benefit from a simple, customizable theme that supports several plugins, including WooCommerce, official extensions, and other plugins while using Storefront. It’s beautiful and simple, but offers lots of customization options for colors and layout.
The main goal in developing Storefront is to provide a rock-solid foundation for your WooCommerce store without extra bloat or features. It’s built using the Underscores theme as a base, which is what many of the WordPress.com-approved themes use as a starting point. Storefront provides just enough options to get your site set up without adding extra options that most users won’t need. It can then be extended through custom code, child themes, or premium add-ons. It’s attractive and flexible without adding bloat to your site.
You can check out the demo to see it in action, and keep reading to see how the base theme works, as well as some very nifty extensions.
Almost all of the Storefront setup will be done via the theme Customizer (under Appearance > Customize). Here’s where you’ll adjust backgrounds, headers, colors and accent colors, and your site title and tagline.
You’ll be able to customize the colors of everything down to your buttons in order to adjust the theme until it suits your brand.
If you’d prefer to use a site logo instead of a title, you can do so with the Site Title plugin. This is now part of Jetpack as well, so you could upload a site logo via Jetpack if you’re already using it (which is the preferred method, as this will be updated as Jetpack is).
Once you’ve configured your options via the customizer, you’ve done the bulk of the work 🙂 . The only things that may be left to tweak is your homepage and add widgets if needed. If you’re using a static homepage, you can add content to the page, then reorganize or add sections using the free Homepage Control plugin from WooThemes.
I finished off my theme setup by adding widgets. There are widget areas for the footer (up to four areas), as well as a sidebar and header area. The “Header” widget area is handy for store notices, such as free shipping thresholds or promotions. You can also take this even further by using something like the free WooSidebars plugin to customize widget areas based on the page, post, post type, etc., being viewed.
My total setup time with Storefront was between 30-45 minutes after playing with all color, homepage, and widget options.
There are tons of WooCommerce themes that improperly style WooCommerce. It’s not the easiest plugin to theme, but many themes go about changing it the “lazy” way. Storefront doesn’t do this; there are no templates overridden and no poor practices implemented. WooCommerce pages blend in with the rest of your site seamlessly and look just as great as the rest of your site.
Shop pages include styling for all product details and WooCommerce widgets, such as the price filter. They also automatically adjust the number of products per page to 12 so that you have a full 4 rows of products.
Single product pages include appropriate WooCommerce styling as well rather than using the default WooCommerce styles, which don’t blend in with many themes. I liked that the product tabs are presented in a vertical layout rather than a horizontal layout at the bottom of the product page, and that the number of related products is changed to 3 to make full use of the space below the product tabs.
When you test out your store, be sure to edit your cart and checkout pages to use a full-width template (I did this on the “My Account” page as well). While the default template with the sidebar will work, the full width template looks far better and removes distractions at checkout.
The checkout template is also great, and it features a two-column layout with customer details on the left, and order details on the right. Typically order details are displayed at the bottom of the page, which forces the customer to scroll to see them. Here the “Place Order” button is always in view, making it easy to complete orders for customers.
Storefront also includes styling for several official WooCommerce extensions that affect the frontend display of your site. I tested Storefront with over 20 official WooCommerce extensions, and almost every single one looked great without any CSS tweaks. The one that I wasn’t happy with was fine, but I changed the margin to display the way I wanted to.
Some extensions even have extensive styling applied to make them fit into Storefront seamlessly. The WooCommerce Bookings extension is one example: the Bookings calendar and time slots adopt all of your color settings automatically.
Even extensions that don’t have specific styling built into Storefront looked great when used in my test shop. Here are a couple of other extensions that affect the frontend of the site for reference:
Most themes (especially free WooCommerce themes) don’t include specific styling for extensions and only pay attention to the core plugin. These additional styles make Storefront a top-tier choice for WooCommerce shops.
While the integration with WooCommerce is tight, the rest of your site won’t be ignored. Blog archives feature the same minimal layout as the rest of the site. The only thing I disliked (personal preference) about the blog archive is that posts don’t automatically display excerpts; the full post is used instead. You can manually force the excerpt to be used by adding the
<!--more--> tag to your post where the excerpt should stop if you don’t want to include the full post.
Single blog posts are consistent with the blog archive page. The layout for a single post isn’t groundbreaking, but I do like that it includes the featured image and that the layout focuses on your content.
There are no built-in shortcodes, page builders, or sliders into Storefront. This is because there are tons of users that won’t need them, or will have another plugin / slider / etc that they already prefer. You can use your own slider, such as WooSlider or Soliloquy, if you need one.
Storefront is also compatible with page builders such as Site Origin PageBuilder, Velocity Page (my personal pick), or Visual Composer. Again, the goal is to provide a solid foundational theme without any bloat that you can then change or extend as needed, so bundling these features into the theme doesn’t make sense.
While Storefront provides pretty much everything you can need for free, there are also some premium Storefront add-ons that can add functionality or styling options to the theme if you need them. Here are the first plugins available for Storefront.
Storefront WooCommerce Customiser – $39
This is my favorite Storefront add-on. While all WooCommerce components are already styled for the theme, the WooCommerce Customizer opens up the ability for you to easily change some of them without any custom code. You can change or adjust:
- labels and number of products displayed in homepage sections
- the shop layout and which product details are shown on shop pages
- customize single product page layouts
The WooCommerce Customizer also lets you remove the product search and cart from the header if desired.
Storefront Designer – $39
While there are already ample customization options in the core theme, you may want to be able to further customize some options without any code snippets. The Storefront Designer plugin adds the ability to change header layouts and make the header “sticky” (remains at the top of the page on scroll), adjust button layouts and styles, and change some typography options.
Storefront Parallax Hero – $19
This plugin creates the ability to add a parallax hero section to your homepage. This can be used to display a message and call to action directly on the homepage, and can use solid colors or a hero image for the background.
You can also add it to other pages on your site using the
[parallax_hero] shortcode. Here’s what it looks like when added automatically to your homepage template:
Unfortunately, this can’t be moved with the Homepage Control plugin yet, but you could use a shortcode on your homepage content and move the homepage content instead if you don’t want this to display directly below the header. However, compatibility for the Parallax Hero and Homepage Control is coming soon.
Storefront Checkout Customiser – $19 (Coming Soon)
The Checkout Customizer adds a few interesting options to your checkout pages, my favorite of which is the “Distraction free checkout”.
- Distraction Free checkout: Removes all header and footer links during the checkout process to drive customers forward in the purchasing funnel. Amazon’s checkout is a real-life example of this in practice.
- Checkout layouts: You can toggle between the default checkout, a one-column full-width layout, or a two-column layout with order details below (like the standard checkout).
- Two-step checkout: Breaks the checkout into two steps: customer details and order review. Some countries require a multi-step checkout for stores, so they may find this helpful.
Since Storefront is a free theme, support is limited. You can post support requests in the WordPress.org forum, and any customers who have purchased a WooThemes product can also get premium support for Storefront. If you don’t have access to support, you can check out the extensive documentation available for Storefront.
If you’ve purchased a Storefront extension, you can also get support via WooThemes and check out the extension documentation that’s available. As the theme is very simple to use and is maintained by the core WooCommerce team, the documentation should be sufficient for any setup questions.
Storefront has excellent structure and provides a great foundation for your WooCommerce site — it’s probably the best codebase out of any WooThemes theme I’ve used (and one of the best for WooCommerce). There are no concerns in terms of updates or future compatibility, as Storefront doesn’t override any WooCommerce templates and properly styles all WooCommerce elements (this is definitely important for the upcoming WooCommerce 2.3 release). The same people that work on WooCommerce core have built the theme, and the Underscores start theme that it uses as a skeleton provides a great, lightweight framework.
You can use the built-in options or premium extensions to make changes to the Storefront styling, and it’s also very easy to customize via child themes or custom code.
Since there are no bundled plugins or options, you can be assured that your chance of experiencing conflicts or issues is minimized. The theme does exactly what it’s supposed to: change the way your site looks. And it does it well.
You can view the source, fork the theme, or contribute back on GitHub.
Storefront is one of the most versatile WooCommerce themes available, whether free or paid, and it’s easily the best free WooCommerce theme I’ve come across. I loved the ability to entirely change the color scheme and to create a homepage focused on my shop. For a free theme, the design and WooCommerce integration is unmatched.
The extensions are useful to take your store setup further and to give you some fine-grained control over your shop, while the compatibility with numerous plugins ensures that almost all users will be able to add the styles or functionality their store needs. Storefront is a great option for end users, and can provide a solid starting point for developers or customizations.