Develop Storefront

The official Storefront development blog

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.


Storefront 2.1.3 — September 26, 2016

Storefront 2.1.3

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

2.1.3 is a minor release that includes the following fixes / improvements;

  • Fix – Dropdowns in the main navigation when tabbing through links.
  • Fix – Hide empty labels when using the Advanced Product Labels extension.
  • Tweak – Updated MasterCard logo. Kudos @nishitlangaliya

The main change in this release is a fix to our navigation to ensure that tabbing through the links opens the dropdowns and allows you to navigate them as expected.

Download at

Storefront 2.1.2 — September 8, 2016

Storefront 2.1.2

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

2.1.2 is a minor release that includes the following fixes / improvements;

  • Fix – Fatal errors in the Customizer when using older versions of WordPress.
  • Tweak – blockUI styling on checkout.
  • Dev – Tweaked how Customizer defaults are set so that checkboxes will work.

The main change in this release is to ensure folks don’t run into issues in the Customizer when using older versions of WordPress that do not include Selective Refresh as a feature.

Download at

Storefront 2.1.1 — September 2, 2016

Storefront 2.1.1

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

2.1.1 is a minor release that includes the following fixes / improvements;

  • Fix – Changed some customizer settings transport from postMessage to refresh for live preview of changes.
  • Fix – Secondary navigation dropdown styling.
  • Dev – Restructured the way objects are initiated. Objects are now initiated into an accessible global $storefront for access to hooks. Kudos @jtsternberg.

The biggest change is how we now initiate objects. You can easily access hooks inside objects using the $storefront global. You can find a practical example here.

Storefront 2.1.0 is now available to download — August 24, 2016

Storefront 2.1.0 is now available to download

Screen Shot 2016-08-24 at 12.32.38

Storefront 2.1.0 has just been tagged for release an uploaded to That means it should be available to download very soon!

2.1.0 is a major release and comes roughly 3 months after our last major release 2.0.0. It’s a significantly ‘lighter’ release (although still packed with flavour) which should mean less bugs and less potential for breakage. That said, I’d like to remind everyone that this is a major release. You should not update live sites without adequate testing.

What’s in the box

Rather than repeat myself I’d suggest you read the original 2.1.0 outline 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 – Lots of SEO enhancements.
  • New – Selective refresh on site title, tag line, logo and widgets.
  • New – Integration with Advanced Product Labels extension.
  • New – Integration with WooCommerce Mix and Match extension.
  • New – Integration with WooCommerce Quick View extension.
  • Fix – Product thumbnail size on cart page.
  • Fix – Sticky order review position on RTL stores.
  • Dev – Restructured scss; removed components/typography and added main styles to `assets/sass/base/_base.scss`. Layout styles then added to `assets/sass/base/_layout.scss`. Moved WooCommerce extension integration styles to `assets/sass/woocommerce/extensions/`.

I’m particularly excited about the SEO enhancements we’ve made (major Kudos to Clément) and am keen to see the results. You can read more about what how we’ve improved Storefront SEO in this post.


You can download Storefront now from your dashboard or from


If you’re updating an existing store to Storefront 2.1, 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.0 beta — August 15, 2016

Storefront 2.1.0 beta


TL;DR – Storefront 2.1 beta is here. You can download it here. Please open issues on github.

Storefront 2.1.0 has been tagged for testing on github! At ~60 commits we’ve kept the next major iteration of the Storefront theme a third of the size of the last release. Whilst 2.0.0 was a great release, we’re still keen to streamline our major releases and keep them focused on fewer new features.

The highlights reel of 2.1 looks like this;

  • Lots of SEO enhancements
  • Selective refresh
  • New integrations with extensions

Each of these features is discussed in more detail in the 2.1 outline post.

Things to look out for

As I said, we’ve kept the feature list small to reduce the likelihood of breakage when you update. There is however one change which could potentially cause issues.

Header layout

We’ve tweaked the markup for the site title / tagline / logo so that component is now always wrapped in a the .site-branding div. Previously if a logo was present it wasn’t wrapped. This seemingly minor change improves consistency but can potentially cause issues with your header layout if you’ve added custom css or are using a third party child theme/plugin.

Many of our child themes were affected by this so we’ve released updates for those that were. Before testing this release I highly recommend checking if there’s a child theme update available (if you’re using one of our child themes).


You can download the 2.1 beta here.

I found a bug

As always, please open an issue on github. Assuming this beta goes smoothly we’ll probably go straight to an RC and release fairly quickly.

Storefront 2.1 development begins — August 2, 2016

Storefront 2.1 development begins

Storefront 2.1 development begun last week. Whilst a major release, 2.1 won’t be anywhere near the scale of 2.0. Moving forwards we’d like to keep our major releases smaller, more focused and more regular. That means fewer (potentially) breaking changes per release and more predictability in terms of release dates.

This post outlines the areas we’re planning to work on and improve.

SEO enhancements

Originally, Storefront templates were based almost entirely on the Underscores equivalents which themselves were based on standards in and around the WordPress development community. Much of this is, and has been a good foundation. However, we’d already made many tweaks that should have a positive impact on Storefronts SEO performance. Here’s what we’re doing/have done for 2.1;

Structural outline

Ensure we’re using appropriate tags for content layout. This applies mainly to Storefront specific templates, posts and pages. As a part of this tag review we’ve majorly adjusted widget markup and content wrappers on single posts / pages.

Heading level outline

The headings in Storefront are a little messy to say the least. We’re of the opinion that most stores will want product titles / content to be the most heavily weighted for search so we’re working to ensure that’s the case!

Ergo, lots of content that is currently wrapped in headings such as navigation / widget titles are being wrapped in plain old divs and spans instead. We’ll also be making sure that all pages adhere to the expected heading structure.

By and by this will all make Storefront perform better from an SEO perspective and give Storefront shops a leg-up over the competitors!

New extension integrations

One of the best features of Storefront is the unique integrations with many WooCommerce extensions it provides. In 2.1 we’ll be adding integrations for;

Sass refinement

Finally we plan to tidy up our Sass. This will come in two parts;

Part 1; simplify

We have a lot of .scss files in Storefront. Arguably too many with one for each structural component. This also leads to confusion as each component stylesheet includes a media query providing styles to desktop browsers for that component. But we also have a layout stylesheet which is performing a similar role. To simplify, we’ll be rolling those component stylesheets (most of which are very small) into a single stylesheet and moving the desktop styles for those components into the main layout stylesheet.

Part 2; Dynamize the modular scale

Dynamize is a word, who knew? Anyway, all the values used in Storefront typography and layout are based on a Modular Scale. That’s all those seemingly random instances of 1.618em etc that you will have no doubt noticed if you’ve worked with Storefront before. We plan to introduce modularscale-sass which will allow the use of variables for our entire typographical scale and layout. It will also provide 100% accuracy in values and allow developers to quickly and easily try different scales without doing big find/replaces.

All-in-all these changes will make the Storefront sass much more intuitive to work with.

When will it be ready?

As we did with 2.0 we’ll likely run a short beta for 2.1. Overall we’re aiming for a Q3 release.

As always, if you’re keen to help out with Storefront dev, please get involved on github!