Welcome Storefront 2.0: mobile design updates, typography refresh & more

TL;DR: Storefront version 2.0 has arrived – upgrade via your WordPress dashboard or try it for the first time by downloading a copy here. Enjoy!

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!

mailer

Here’s a closer look at what we’ve added to this update.

Storefront looks better on smartphones

↑ Nach oben

Since 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.

handheld1

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:

navigation

Finally, we’ve improved the mobile cart display to create a richer experience on one of the most important pages on your store.

cart

A typography refresh adds to clearer, cleaner design

↑ Nach oben

The 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.

Open Sans is the font of choice for Storefront 2.0.
Source Sans is the font of choice for Storefront 2.0.

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

↑ Nach oben

In 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

↑ Nach oben

We’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.
A shopping cart as it appears in Storefront 2.0.
A shopping cart as it appears in Storefront 2.0.

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!

Refresh your store with Storefront - a theme built by WooCommerce for WooCommerce
James Koster Avatar

About

31 comments

  1. 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.

    Sandra
    May 10, 2016
    • Hey Sandra,

      If you save your settings in the Customizer this should be resolved.

      Cheers

      James
      May 10, 2016
      • Thank you for the suggestion. I might be blonde, but hey, don’t you think I have tried that?

        But hey, thank you!

        Sandra
        May 11, 2016
        • Please post in support and we can look into this for you 🙂

          James
          May 11, 2016
          • 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

            Sandra
            May 15, 2016
  2. 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

    MIN015
    May 10, 2016
    • 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 🙂

      James
      May 10, 2016
  3. Nice one Woo/James,

    I’ve been looking forward to this and very happy to delve into using the new 2.0!

    John
    May 10, 2016
  4. 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.

    Daniel
    May 10, 2016
    • Nope, we didn’t document every single css change. If you’ve spotted issues please report them on github.

      James
      May 11, 2016
  5. After the last update I can scroll too far to the right and I have suddenly a grey beam in my header. Help!!

    Jacqueline van der Venne
    May 11, 2016
    • This is an issue in Safari and will be fixed in 2.0.1 which will be available very soon.

      James
      May 11, 2016
  6. Hello,

    can i remove the mobile bar with user – search & cart buttons?

    Thank you.

    Christos
    May 11, 2016
    • We have documentation on this here.

      James
      May 11, 2016
  7. Help! I just updated ToyShop and it has broken my site so I can’t log in. Can anyone help me fix this

    apcc0rk
    May 11, 2016
    • 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.

      James
      May 11, 2016
  8. 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.

    Scott
    May 12, 2016
  9. 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.

    Bert Ernie
    May 13, 2016
  10. 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?

    rebsy
    May 13, 2016
    • 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….

      Joshua
      May 14, 2016
    • 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?

      Dennis
      May 15, 2016
      • My only plugin is woocommerce.

        rebsy
        May 16, 2016
    • 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.

      James
      May 17, 2016
  11. Love the redesigned and focus on mobile improvements.

    Reuben
    May 21, 2016
  12. Does this replace woo commerce?

    Katie
    May 22, 2016
    • 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!

      Nicole Kohler
      May 23, 2016
  13. 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 Holden
    May 23, 2016
    • Robin, if you haven’t already, please open a ticket with us for help. Thanks!

      Nicole Kohler
      May 24, 2016
  14. 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

    David Rivera
    May 25, 2016
  15. 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.

    Huiyi
    June 3, 2016
    • 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!

      Nicole Kohler
      June 5, 2016

Stay up to date with WooCommerce emails

View our privacy policy. You can unsubscribe anytime.

Subscribing...

There was an error subscribing; please try again later.

Thanks for subscribing!
Emails will be sent to

You're already subscribed!
Emails are sent to

Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.