Storefront 2.0.0 has been tagged for testing over on GitHub. This release has been in the works since January and has seen ~150 commits changing ~130 files in the codebase.
In addition to the general tweaks and bugfixes you’d expect expect in any Storefront release, 2.0.0 includes the following major changes:
The first change you’ll notice is the design refresh we’ve applied to Storefront in 2.0. The most significant change in that regard is the typography. We decided to replace Helvetica with Roboto, mainly due to the fact that Roboto offers a variety of font weights. Given the plethora of content-types Storefront has to theme, the additional font weights allowed us to create a typographical scheme with more depth and cohesion.
We’ve also tweaked the following:
- Overall site scale increased slightly
- Borders have been generally removed to create a smoother aesthetic
- Where borders remain, we’ve made them consistent in color and weight
- The header padding has been adjusted to provide more balance with the content below
- WooCommerce messages now reside beneath the breadcrumb rather than above it
- The breadcrumb itself now has a proper home in the design and matches the header thematically rather than being the floating island it was before.
- The homepage product section titles have been ‘humanized’. “Recent Products” becomes “New In”. “Featured Products” becomes “We Recommend”. etc.
- Tables have been given a softer design treatment
- Buttons/inputs increased in size slightly
- Checkout order review style tweaks
We’ve been conscious to stay true to the original Storefront design overall, but hope that the new design gives it a fresher, more unique appearance.
Mobile Commerce continues to grow rapidly. Many retailers in fact are seeing more sales coming from handheld devices than desktops. While Storefront has been ‘responsive’ since version 1, we decided to take the time to review that and make improvements.
All Storefront pages will look quite different upon upgrading to 2.0. Not only due to the design refresh, but also due to the re-imagination of the header section of the theme which is illustrated in the image above. The header section of Storefront 1 pushed the main page content down a frankly unforgivable ~370 pixels. That’s practically half the screen on an iPhone 6. We’ve reduced that by ~60% ensuring that the page content is clearly the focus, as it should be.
We achieved this by relocating the cart link and the search form into a ‘toolbar’ at the bottom of the screen, and by moving the menu button to the right of the site title instead of beneath it. Whilst also saving space, this ensures that important points of interaction such as the cart link and the search form are clearly visible on all pages without impeding the main content in any way. The toolbar also provides scope for us to add other useful links like the login/my account link. We’re now delivering more useful content whilst taking up less space – that’s efficiency!
To further improve the browsing experience on handheld devices we’ve added subtle animations to the menu toggle. In Storefront 1, the menu instantly expands / collapses which can feel quite jarring and can potentially be confusing if you happen to blink when you tap the menu button!
The animation helps to make it clear what is happening when the button is clicked. In addition to this, the icon on the menu button changes to a cross when the menu is open so that visitors can easily anticipate what would happen if they were to tap the button again.
Finally, we’ve updated the cart appearance to provide an overall more intuitive experience on one of the most crucial pages of any eCommerce web site.
There are other minor improvements to the handheld design such as the tabs on product pages.
So far all the changes I’ve described are design focussed, but we’ve made significant changes under the hood as well. First of all we’ve separated templates and logic into separate classes where appropriate. In addition to that we’ve totally re-organised the file structure which should make working with Storefront much more intuitive for developers.
- All sass, css, js and images now reside in the /assets/ dir
- All css is now minified where appropriate
- Template functions reside in storefront-template-functions.php / storefront-woocommerce-template-functions.php respectively, and are all pluggable
- New classes for WooCommerce, Jetpack and Customizer integrations
- Support for WordPress 4.5’s Custom Logo feature
- Added a storefront_header_styles filter to customise the header image treatment (and other styles)
- Various functions have been deprecated
Other cool new stuff
A few other new features not outlined above:
- oEmbeds have been styled to match the general Storefront look and feel
- Styling for WooCommerce 2.6’s tabbed my account area
- New “Best Sellers” section on the homepage pulls in and displays your best selling products. This is added automatically but can easily be removed with the Homepage Control plugin
- The welcome screen is now dynamic and will pull in new products to display automatically
- Redesigned the blog post meta section
- Support for WordPress 4.5’s Custom Logo feature
Plus many other minor bug fixes and improvements.
- Check the page templates / layouts
- Check that the Customizer settings behave as expected
- Look out for any design quirks / general bugs
- Activate your Storefront Child Themes and Extensions (if you have any) – but please be sure to update them to their latest versions before doing so.
If you spot any issues, please open them on GitHub.
Hopefully this goes without saying: Do not use this beta release in a live production environment 🙂
The Beta 1 testing period begins today (March 23) and will run in to April. Assuming there are no show-stopping bugs we’d like to release towards the end of April.