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

Written by James Koster on May 9, 2016 Blog, News, Product News.

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

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

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

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

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

31 Responses

  1. Sandra
    May 10, 2016 at 9:31 am #

    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.

    • James
      May 10, 2016 at 11:48 am #

      Hey Sandra,

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

      Cheers

      • Sandra
        May 11, 2016 at 9:15 am #

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

        But hey, thank you!

        • James
          May 11, 2016 at 12:01 pm #

          Please post in support and we can look into this for you 🙂

          • Sandra
            May 15, 2016 at 10:33 am #

            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

  2. MIN015
    May 10, 2016 at 4:12 pm #

    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

    • James
      May 10, 2016 at 5:02 pm #

      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 🙂

  3. John
    May 10, 2016 at 8:00 pm #

    Nice one Woo/James,

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

  4. Daniel
    May 10, 2016 at 8:17 pm #

    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.

    • James
      May 11, 2016 at 12:02 pm #

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

  5. Jacqueline van der Venne
    May 11, 2016 at 1:04 pm #

    After the last update I can scroll too far to the right and I have suddenly a grey beam in my header. Help!!

    • James
      May 11, 2016 at 7:51 pm #

      This is an issue in Safari and will be fixed in 2.0.1 which will be available very soon.

  6. Christos
    May 11, 2016 at 1:58 pm #

    Hello,

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

    Thank you.

    • James
      May 11, 2016 at 7:53 pm #

      We have documentation on this here.

  7. apcc0rk
    May 11, 2016 at 6:23 pm #

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

    • James
      May 11, 2016 at 7:56 pm #

      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.

  8. Scott
    May 12, 2016 at 11:16 pm #

    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.

  9. Bert Ernie
    May 13, 2016 at 11:40 am #

    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.

  10. rebsy
    May 13, 2016 at 7:53 pm #

    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?

    • Joshua
      May 14, 2016 at 3:39 am #

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

    • Dennis
      May 15, 2016 at 9:45 am #

      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?

      • rebsy
        May 16, 2016 at 9:42 pm #

        My only plugin is woocommerce.

    • James
      May 17, 2016 at 12:00 pm #

      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.

  11. Reuben
    May 21, 2016 at 6:11 am #

    Love the redesigned and focus on mobile improvements.

  12. Katie
    May 22, 2016 at 6:27 am #

    Does this replace woo commerce?

    • Nicole Kohler
      May 23, 2016 at 3:38 am #

      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!

  13. Robin Holden
    May 23, 2016 at 4:59 pm #

    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?

    • Nicole Kohler
      May 24, 2016 at 5:35 pm #

      Robin, if you haven’t already, please open a ticket with us for help. Thanks!

  14. David Rivera
    May 25, 2016 at 1:53 am #

    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

  15. Huiyi
    June 3, 2016 at 5:40 pm #

    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.

    • Nicole Kohler
      June 5, 2016 at 9:55 am #

      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!