Develop Storefront

The official Storefront development blog

New blog location — January 16, 2018

New blog location

From now on, we will be posting Storefront announcements to the WooCommerce core blog. This will be the last post to be published on this blog.

Storefront is the official theme for WooCommerce and this change should increase the visibility of the project.

By the way, Storefront 2.2.6 was just released. ūüėČ

Storefront 2.2.0 is now available to download — May 22, 2017

Storefront 2.2.0 is now available to download


Storefront 2.2.0 has just been tagged for release an uploaded to That means it should be available to download very soon! This is a major release, you should not update live sites without adequate testing.

What’s in the box

Please read the previous post which includes all of the details of this release.

For the condensed version, here’s the relevant info pulled directly from the changelog;

  • New – Adding a featured image to the homepage template will now create a ‘hero’ component.
  • New – Improved new user experience; WooCommerce installation prompted and added starter content to set up the homepage template, menus, widgets and add some demo products.
  • New – Guided tour in the Customizer.
  • Fix¬†– Remove unnecessary button styling in WooCommerce Quick View extension.
  • Fix – Only make the order review on checkout sticky of the address column is tall enough to make it worthwhile.
  • Tweak¬†– Improved the Bookings calendar styles.
  • Tweak – :focus borders now dotted.
  • Tweak – Default header background color is now white and header text color defaults updated accordingly.
  • Tweak – Various typographical adjustments to match updated header design.
  • Dev – Added actions; storefront_jetpack_infinite_scroll_before, storefront_jetpack_infinite_scroll_after, storefront_jetpack_product_infinite_scroll_before and storefront_jetpack_product_infinite_scroll_after.
  • Dev – Added filters; storefront_footer_widget_rows and storefront_footer_widget_columns to easily control the number of widget rows / columns in the footer.
  • Dev – FontAwesome and icon styles are now enqueued separately to make removing FontAwesome trivial.
  • Dev – Updated FontAwesome to 4.7.0
  • Dev – Upsells columns filterable via storefront_upsells_columns.
  • Dev – Added a column wrapper to product loops. To adjust the layout you now only need to filter storefront_loop_columns.
  • Dev – Homepage product sections only display if products are returned.
  • Tweak – Escape background content color before output. Kudos @pdewouters.
  • Dev – Updated package versions. You’ll need to npm install next time you try to build.
  • Dev – Adds grunt-postcss + autoprefixer to the build process to reduce reliance on Bourbon.
  • Tweak – Doctype in lowercase. Kudos @B-07.
  • Fix – Only output background-image styles for the header and homepage content sections if an image exists.
  • Fix – Translatable aria labels in the homepage sections. Kudos @andreaskian.


You can download Storefront now from your dashboard or from


If you’re updating an existing store to Storefront 2.2.0, as mentioned¬†previously;¬†please test the update in a development environment first. If you are using any additional Storefront products (child themes and/or extensions) be sure to check for updates for them before updating Storefront and test everything in your development environment.

I’ll say it one more time;¬†test the update(s) in a development environment. ūüôā

I found a bug

If you find a bug then as always, please be sure to report it on github. If you have any other problems with Storefront please post on the support forum, or contact us if you’re a WooCommerce¬†customer.

Storefront 2.1.8 — February 17, 2017

Storefront 2.1.8

Hey folks, Storefront 2.1.8 has been tagged for release and will be available to download from very soon.

2.1.8 is a tiny release that takes into account some tweaks made to WooCommerce core with regards to how themes declare support for the new gallery feature;

  • Tweak – [WooCommerce 2.7] – Declare support for the new gallery.

WooCommerce 2.7 is currently in beta and I’d encourage any users to give it a try before it’s released, in a staging environment.

Download at

Storefront 2.2 design refresh — February 9, 2017

Storefront 2.2 design refresh

While the main focus of Storefront 2.2 is the new user experience, we also intend to make small adjustments that improve the overall design.

Homepage hero section

The first design change we’ve made is the treatment of the homepage content when using the homepage template included with Storefront. Currently, if you add a featured image to your homepage you’ll see something like this;


Not particularly inspiring, huh?

From 2.2 onwards, adding a featured image to your homepage will automatically create a ‘hero’ component. The featured¬†image will be¬†used as a background and¬†your homepage content will be overlaid on top of it. It’ll look something like this;


New header colors

You’ll no doubt have noticed that the content section isn’t the only difference between the two screenshots above. The other noticeable¬†change is the header colors.

All Storefront versions prior to 2.2 set the header background to a dark gray/blue color by default. We’ve decided to change this to white moving forwards.¬†Here’s why;

Product priority

With such a vast¬†contrast between the header / content background colors in 2.1 there is a lot of visual competition for attention, especially when pages first load. The eye is generally drawn to the header first. But seeing as the header is right at the top of the page it¬†already occupies¬†an appropriate¬†place in the visual hierarchy and doesn’t need additional focus.¬†In 2.2 we want product imagery to be the star of the show and making the header background white (to match the main content area) facilitates this.

User behaviour / logos

Generally speaking, logos are designed to be placed¬†on lighter backgrounds. I’ve noticed a lot of Storefront users don’t always change the header background color straight away so this will provide a better experience in most cases when first adding a logo.

In fact, a lot of users don’t change the header background at all which suggests that many folks just want to install a theme and go, with minimal set-up shenanigans. Using a more appropriate default background color will improve the Storefront experience for many folks who exhibit those tendencies.

Typography tweaks

Adjusting the header background to be lighter revealed just how heavy our typography styles were. So, embracing¬†the ‘make products images top dog’ mantra¬†from before we’ve lightened font weights here and there. We’ve also adjusted button background defaults and a few typographic treatments when using the full width template. The overall result is a more streamlined / minimal aesthetic.

Below you can see before and after side-by-side:


Hopefully you’ll agree that the new design helps shift the visual focus squarely on to the most important thing at the store – the products!

Backwards compatibility

While the differences are quite visually striking, there’s not a huge difference in the code, so I hope that backwards compatibility won’t be a big¬†issue. Of course, the new header background color will only be applied to existing stores if you’ve not already changed from the old default. The same goes for buttons. If you’ve customised Storefront it’s unlikely you’ll even notice any of the color changes.

The typographical changes can easily be reversed with a few lines of CSS to change the heading weights, if required.

If you’re doing something unique with the product content then the new hero component should be thoroughly tested before updating Storefront core.

When’s it due?

This is all a work in progress and we still have quite a bit to do. But we still hope to release at least a beta by the end of Q1. Stay tuned!

Storefront 2.1.7 — January 17, 2017

Storefront 2.1.7

Hey folks, Storefront 2.1.7 has been tagged for release and will be available to download from very soon.

2.1.7 is a small release that essentially just adds some compatibility tweaks to ensure everything will work smoothly when the next major WooCommerce (2.7) release is available;

  • Tweak – [WooCommerce 2.7] – Ensure all checkboxes function correctly with new markup.
  • Tweak – [WooCommerce 2.7] – Order item meta styling.
  • Tweak – [WooCommerce 2.7] – Don’t display the stock icon when .stock is empty.
  • Fix – Cross-sells layout.

WooCommerce 2.7 is currently in beta and I’d encourage any users to give it a try before it’s released, in a staging environment. But you can rest assured that as of 2.1.7 Storefront is fully prepared for¬†WooCommerce 2.7.

Download at

Storefront 2.2 planning — December 5, 2016

Storefront 2.2 planning

Hey folks! As you probably figured out, 2.2 will be the next major Storefront release. Last week we began fleshing out¬†some features we’d like to include in the release as well as determining an overall ‘theme’ for 2.2.

Today I’m sharing some of those ideas so you can get an idea of how the release will shape up. This is also your opportunity to get involved! Let us know if you like our plans, or if there¬†are any other features you’re desperate to see in Storefront.

Improving New User Experience

The main thing we decided to focus on in 2.2 is improving the new user experience (NUX). For those already familiar with Storefront this might not sound particularly exciting (sorry) but it should still prove useful when creating new stores.

You’re a wizard, Storefront

Each time you create a new Storefront site there are a number of tasks you have to perform. Things like adding widgets, creating the homepage, setting the static home page, adjusting the cart/checkout page template, adding a logo, tweaking colors, creating menus, importing dummy content… the list goes on.

Even Storefront veterans will agree this process is a pain. It should be possible to quickly and easily perform these tasks in one place, straight after activation. Kinda like a wizard.

So, we’re going to add a wizard.

Where it will live (Customizer vs wp-admin) and how it will look are tbd. But that’s besides the point, the end result will be the same;¬†a really simple tool¬†to get you¬†up and running with Storefront in no time at all. For new users this will be extremely useful and for everyone else it should save a bunch of¬†time setting up new sites! The wizard (who I’m calling Dumbledalf) preliminarily includes these steps;

  • Homepage setup (potentially with different layouts)
  • Branding stuff (logo upload, color specification)
  • Widget setup
  • Menu setup
  • Installation of extra features (Storefront feature plugins)
  • Dummy content import

We’re pretty happy with this list, but it may change between now and launch. If you have any suggestions please let us know!

Other features

The wizard will be the biggest feature in 2.2, but we also plan to add the following small features;

Footer widget rows

Web site footers seem to grow taller every year, especially on eCommerce web sites. While storefront provides 4 columns for footer widgets, there is only one row which can be organisationally troublesome.

In 2.2 we plan to add a filter that will allow you to specify any number of rows, effectively allowing you to create footers like this;


We may expand upon this in Powerpack, including a footer builder much like the header builder.

Ensure the layout honors the storefront_loop_columns filter

Currently, if you filter storefront_loop_columns¬†the first¬†and last¬†classes are changed as expected but the layout breaks. We’ll fix that so you no longer need to add a load of CSS just to tweak the columns products are arranged into.

CSS linting

We’ll add css linting to our grunt task. This will help highlight any issues in our CSS as well as potential areas for improvement.


We plan to start work on development very soon with a planned release in Q1 2017. You can keep up to date with the latest progress on our master branch at github. Feel free to get involved as well! ūüôā

As always, let us know what you think about the latest Storefront developments, we’re always keen to hear your feedback.

Storefront 2.1.6 — November 15, 2016

Storefront 2.1.6

Hey folks, Storefront 2.1.6 has been tagged for release and will be available to download from very soon.

This is a minor release, containing the following fixes / tweaks;

  • Fix – Close dropdowns in the nav when you tap away on touch devices.
  • Fix – Ensure the header cart dropdown works properly on touch devices.
  • Fix – 404 layout.
  • Fix – Javascript error when .site-header-cart isn’t present in the DOM.
  • Fix – Consistent spacing in site title.
  • Dev – Refactored storefront_get_content_background_color() to account for and give priority (over Storefront Designer) to Storefront Powerpack.
  • Dev – Deprecated is_woocommerce_activated() and made it pluggable.
  • Dev – Added storefront_is_woocommerce_activated().

The main issue we’ve addressed is the behaviour of the dropdowns in the navigation on touch devices.

On the development side of things we’ve refactored storefront_get_content_background_color()¬†to check if the content frame option is being used in Powerpack as a priority over the now retired Storefront Design extension which Powerpack replaces.

In addition to this, is_woocommerce_activated() has been deprecated/replaced with a Storefront prefixed version of the same function.

Finally, 2.1.6 has been fully tested against WordPress 4.7 beta 3.

Storefront 2.1.5 — October 24, 2016

Storefront 2.1.5

Hey folks, Storefront 2.1.5 has been tagged for release and will be available to download from very soon.

This is a very small release, containing just a few tweaks;

  • Tweak – Jetpack infinite scroll now works on product archives as well as posts.
  • Tweak – Add styles for WooCommerce 2.7’s new gallery.
  • Tweak – Style the ‘dismiss’ link in WooCommerce 2.7’s ‘demo notice’ feature.

I’m happy to say that Storefront now fully supports Jetpacks infinite scroll feature, not only for posts but for products as well! This means that we’ll be phasing the infinite scroll feature out of Powerpack in favor of Jetpack. If anyone is using that feature we recommend switching over asap.

The release also includes some tweaks in preparation for WooCommerce 2.7.

Download at

Storefront 2.1.4 — October 11, 2016

Storefront 2.1.4

Storefront 2.1.4 has been tagged for release and will be available to download from very soon.

2.1.4 is a minor release but is a bit bigger than our last couple of patches. It includes the following fixes / improvements;

  • Fix – Product/category title size in loops (WooCommerce 2.7 compatibility).
  • Fix – Star rating selector when WooCommerce lightbox is disabled.
  • Fix – Dropdowns can now be closed on iOS.
  • Fix – PHP 5.2 compatibility.
  • Tweak – Structured data sanitization and other minor adjustments.
  • Tweak – Header cart dropdown now only scrolls if it renders beyond the current window height.
  • Tweak – Star rating selector styling.
  • Tweak – Widget region order. Addresses the issue of widgets being added to an unexpected region on default installs.
  • Devstorefront_post_thumbnail() is now hooked in to storefront_post_content_before.
  • Dev – Added storefront_post_content_before and storefront_post_content_after actions.
  • Devstorefront_post_thumbnail() now provides a default size.
  • Dev – Updated FontAwesome to 4.6.3.

No ground-breaking changes here. The two highlights are probably the header cart and the featured images for posts.

We know that not everyone loves the scrolling cart dropdown in the Storefront header, but we believe it’s a useful feature. To address concerns we’ve now made it so that the dropdown will only scroll when it must. Therefore most of the time you won’t even see this feature as it is a contingency for a fairly rare occurrence.

Previously the featured image for posts was loaded directly in the storefront_post_content()¬†function which meant that if you wanted to move it you’d have to plug or remove that entire function. Now you can simply unhook storefront_post_thumbnail()¬†directly. The addition of the new hooks before and after post content should be useful for developers as well.

Download at


Storefront Skins: Import/Export for Powerpack — September 27, 2016

Storefront Skins: Import/Export for Powerpack

You may have already seen or heard about our latest Storefront extension; Powerpack. If you’re familiar with it already you can skip the next paragraph, if not please read on…!

Powerpack adds a bunch of features to Storefront, most notably a Header Layout Configurator and the ‘Designer’ which lets you customise the look and feel of a whole bunch of display elements.¬†See how it works in the video below;


Child themes vs Skins

Child themes allow us to create radically different Storefront designs but they do have some drawbacks;

  • Increased¬†overhead – it’s another product to purchase, install and keep updated
  • Stops you from creating your own child theme (WordPress doesn’t allow¬†grandchild themes out of the box and probably¬†never will)
  • The more a¬†child theme changes Storefront core design, the trickier it becomes for it to remain compatible with all core/extension options – we know this can be frustrating

A lot of the time a child theme is simply overkill for most customers.

Considering these drawbacks we’ve often thought about¬†how we might offer¬†different designs to our customers that are easier to set up/use and are more lightweight.

Storefront Skins

Skins to the rescue!

What’s a skin? In this case it’s a preset style that you can apply to your Storefront. It changes the look and feel of your site (to potentially dramatic effect), but¬†doesn’t change the layout or add any features. Most importantly you don’t have to install anything extra to use it.

Using Powerpack to create, use and share skins

The most exciting part of this is that we could use Powerpack to both serve our own skins and allow you to create and share your own. That means you could get access to dozens of Storefront designs (skins) just by installing Powerpack. No child theme required.

How does that work?

With Powerpacks two core features; the Header Layout Configurator and the Designer, anyone can quickly and easily create an entirely new Storefront design or “skin”.

Whilst this is currently just an idea, if there’s enough interest we’d like to add the following features to Powerpack;

  • Save Customizer states¬†– Save specific¬†Customizer configurations¬†as¬†states (skins).
  • Manage¬†skins¬†– Save multiple skins¬†and quickly switch between them via dropdown. Easily edit, delete or add more skins.
  • Import/export¬†skins¬†– Import someone else’s skins or export your own.
  • Bundle skins¬†– Create¬†and bundle our own designs for you to (optionally) import and use.

Those new features combined (particularly the last one) would allow us to provide customers with a multitude of designs, created to suit a variety of different niches / industries. Perhaps even better you’d be able to create your own skins and open source them (if that’s your thing).

You might wonder why a single store would need access to more than one design. Well, you might create seasonal skins. Apply a black and orange color scheme for Halloween, for example. But the main benefit is that you’d have access to all those designs via a single plugin. If you’re building a lot of¬†WooCommerce sites the value here should be obvious.

What do you think?

As I said, currently this is just an idea and we’d like to gauge interest before working on it. If this is something you’d be interested in please share your thoughts and vote on the ideasboard.