If you’re using our Storefront theme for WooCommerce, you’ll be excited to learn that version 2.0 has just become available for download. If you’re not using Storefront already, now would be a great time to take a look at our flagship WooCommerce theme!
Storefront 2.0 is a major release and brings various new features including a greatly improved handheld experience, a refreshed design, a new product section on the homepage, full compatibility with the upcoming WooCommerce 2.6 and more!
Here’s a closer look at what we’ve added to this update.
Storefront looks better on smartphones
↑ Revenir en hautSince releasing version 1.5 last year, we’ve made significant improvements to the responsive design in Storefront 2.0. The first thing we did we completely redesign the entire header section to use space more efficiently.
In Storefront 1.x, the header section took up roughly half the screen’s height, pushing the main content way too far down the page.
We’ve now reduced the header height by ~60%, which brings the main content further up the page and makes it the focus. To do this, we’ve moved the search, cart link and account link into a convenient navigation bar at the bottom of the screen which sticks as you scroll.
This not only saves space, but also ensures that folks are always able to see how many items they have in their cart and can quickly access the checkout from anywhere.
In addition to this, we’ve added an animation to the navigation toggle. This replaces the instantaneous effect seen in Storefront 1.x and makes it clear exactly what is happening when the menu button is clicked. As a secondary effect, the icon on the menu button transitions into an X to illustrate that the menu can be closed by clicking the button again:
Finally, we’ve improved the mobile cart display to create a richer experience on one of the most important pages on your store.
A typography refresh adds to clearer, cleaner design
↑ Revenir en hautThe typographical scheme in Storefront has seen a complete refresh for version 2.0. Helvetica has been replaced by Source Sans, a Google font which offers a wider variety of weights and allows us to provide greater depth and cohesion.
The additional font weights allow us to create more intuitive content regions. We’ve also made use of these new font weights in sections like the blog post meta area.
As well as the typographical tweaks, we’ve made subtle alterations to the design to provide a much cleaner aesthetic overall:
- Borders have been largely removed so that pages don’t feel quite so broken up.
- The breadcrumb and the main navigation are now wrapped in their own content regions, cementing them as unique components.
- Product reviews and comments have seen tweaks to make them cleaner and more scannable.
- Blog post meta has been redesigned to include the author Gravatar.
Feature best selling products & more on your homepage
↑ Revenir en hautIn addition to product categories, recent products, featured products, top rated products and on sale products on the homepage, we’ve introduced a « best sellers » section so that visitors now have immediate access to your best selling products.
These homepage sections now also have friendlier titles. “Recent Products” has become “New In” while “Featured Products” has become “We Recommend. »
Various improvements to design add to the user experience
↑ Revenir en hautWe’ve made many other smaller tweaks throughout Storefront that improve the overall appearance and experience for your visitors:
- Styles have been prepared for WooCommerce 2.6’s tabbed « My Account » section and the average rating widget, so these sections will be properly styled when the next version of WooCommerce is released 🙂
- Tables have a « softer » design treatment (the colors of which are based on the main background color).
- oEmbeds have been styled to match the rest of Storefront (including typography, padding, colors and so on).
- We’ve integrated with WordPress 4.5’s custom logo feature so that you can now add your logo to Storefront without using a plugin.
We believe all of these changes help make Storefront a better theme for your online store.
Give 2.0 a try and let us know what you’d like to see next
Ready to try 2.0? Update via your WordPress Dashboard, or (if you’re new around here) download the theme to give Storefront a try.
A few things to keep in mind as you prepare for the upgrade:
- Having trouble with the theme? Think you’ve found a bug or extension conflict? Visit our support page to open a ticket.
- Thought of a particular feature or product you’d like to see developed for Storefront? Submit it on our Storefront ideas board.
Each of the Storefront extensions and child themes have had minor releases over the last few weeks that provide compatibility with Storefront 2.0. If you’re using one of these products but haven’t updated yet, we recommend doing so before updating Storefront itself.
Please note that we are not able to diagnose or solve potential issues via blog comments. The fastest way to get in touch with us is via one of the methods listed above. But we are always happy to read your feedback in the comments.
Have any questions or comments for us? We’d love to hear from you. Thanks for following the development of Storefront!
About
I am very sorry to say that I haven’t enjoyed Storefront 2.0 ever since I installed the update. The design in the header of my store vanished and I can’t get it back. I tried to fix this by changing the color in the customizer and it shows the right color in the preview but it doesn’t save it.
Apparantly I am not the only person having problems after the update. Just take a look: https://wordpress.org/support/theme/storefront
I’d be very happy if this could be fixed soon. Thank you.
Hey Sandra,
If you save your settings in the Customizer this should be resolved.
Cheers
Thank you for the suggestion. I might be blonde, but hey, don’t you think I have tried that?
But hey, thank you!
Please post in support and we can look into this for you 🙂
My webdesigner has fixed it now.
BUT! Now there is update no. 2.0.1 and I haven’t installed it yet. Due to the earlier problems, I wanted to have a look into the changes. And really, there is nowhere I can find what no 2.0.1 does: bugfixes? which bugs? Have you tested the new update carefully?
Because I am sick of finding out myself wat Storefront 2.0.1 does to my webstore I really hesitate to implement. I have to gain a living out of it, d***! It has to work!
Anyway, a bit more information would really be fine as my confidence in Storefront is not what it used to be.
Thank you in advance for more testing and better communication.
Sandra
I upgraded my storefront to newer 2.0 version and tested. But I most of my customization done through either child theme or theme customization plugin were not executed. How should get my theme customization rules executed like in previous version. I would appreciate any help!
Thank You
Likely the same issue Sandra reported. Just resave your Customizer settings. We’ll be releasing an update that will fix this so that you don’t have to resave settings soon.
If you’re stuck please post in support 🙂
Nice one Woo/James,
I’ve been looking forward to this and very happy to delve into using the new 2.0!
Is there documentation on exactly what CSS changed in version 2.0? We’ve already fixed some new issues in our child theme, but want to make sure we haven’t missed any new issues with the update.
Nope, we didn’t document every single css change. If you’ve spotted issues please report them on github.
After the last update I can scroll too far to the right and I have suddenly a grey beam in my header. Help!!
This is an issue in Safari and will be fixed in 2.0.1 which will be available very soon.
Hello,
can i remove the mobile bar with user – search & cart buttons?
Thank you.
We have documentation on this here.
Help! I just updated ToyShop and it has broken my site so I can’t log in. Can anyone help me fix this
Please post in support and we can look in to this for you 🙂 Be sure to update everything including Storefront, Child Themes and Storefront extensions.
Great work James!
I was curious if there is a way to see how the new Child Theme Hotel handles regular products? Would they look just like the « book now » product?
As well, how does the « shop » look for it? I’d be curious because it looks pretty cool and wonder if it could be used for more than just the presented scenario?
High-Five.
I want to thank you for the update. Yes that header wasn’t the best lookin’ in the older version, but know it’s much better.
I and others have had a problem with the new version. This is the message I’m getting (once i turn on debug, otherwise it’s just a blank page).
Parse error: syntax error, unexpected T_FUNCTION in /home2/fayette3/public_html/wpsite/wp-content/themes/storefront3/inc/customizer/class-storefront-customizer.php on line 74
My only plugin is woocommerce and I have tried it with all different PHP versions up through 5.6 since that’s the highest Bluehost supports.
Any idea what went wrong in the new version for me?
Same issue with me, I’ve yet to receive a response from support. I had to resort to installing an old theme on my site to hold me over until the issue is resolved because my site was inaccessible. Very inconvenient….
It could be a plugin incompatibility? Since you and Joshua seem to be the only two posting about that specific issue.
On another note: When will 2.0.1 be coming out?
My only plugin is woocommerce.
Hey,
The issue is almost certainly your PHP version. Storefront 2.0 requires 5.3+
It’s possible that your host is running the minimum requirements for WordPress which is 5.2.4, but 5.6+ is recommended as stated here.
You may wish to follow along with this thread on WordPress.org which covers the topic.
Love the redesigned and focus on mobile improvements.
Does this replace woo commerce?
Hi Katie, Storefront is our flagship theme for WooCommerce. Like any other theme for WordPress or WooCommerce, it changes the design/appearance of your store, but doesn’t alter its core functionality or replace WooCommerce. Give us a shout if you have any questions!
I just upgraded to Storefront 2.0.1 and it made my site inaccessible. I had to resort to a generic theme just to access the backend. I checked each plugin for compatibility and the problem is the theme. I am using PHP version 5.4.
I am having surgery tomorrow and won’t be able to troubleshoot this for the next couple of weeks (I know I shouldn’t have updated the theme today but I wanted to get my site up to date since I won’t be able to do updates for a while) is there some way I can get a file for a version before 2.0?
Robin, if you haven’t already, please open a ticket with us for help. Thanks!
I need help to remove the space between the header and the first image on the
front page. I am using the theme storefront.
Greetings from Panama
Hi all, the primary menu of my site failed to work when I use iPad to visit my site. The interface on my iPad is not switched to handheld mode. Anybody has the same problem? Who has a solution?
Thanks.
Hello Huiyi, have you by chance opened a support ticket with us? We are unfortunately unable to troubleshoot issues like this via blog comments due to limited information. Cheers!