Blog

Improving the on-boarding experience for self-hosted WordPress themes

Looking for a new theme for your WordPress site can often feel like shopping at IKEA. You go to the store, find that amazing piece of furniture, only to discover that it comes all broken into tiny pieces that will take you hours to put together.

WordPress themes are not so different.

When you look at the demo site for a theme, you are looking at the assembled product. That means that someone took the time to create example content that takes advantage of all the features the theme has to offer, showcasing them in the most perfect possible way.

Not only that, but a lot of themes will also showcase features that are not necessarily part of the theme and will require you to download and configure additional plugins.

At least when you get something from IKEA you know that all the pieces you need are in the box, right?

Meet Storefront

Let me introduce to you Storefront, our default theme for WooCommerce.

Storefront is a flexible and extensible WordPress theme built to be the perfect starting point for any WooCommerce project.

You can look at the WordPress Swag Store for an example of a store that uses Storefront as a foundation.

While it serves developers very well, often everyday customers trying to create a store would find themselves lost.

One of the most common complaints was that Storefront looked nothing like the demo after activation, where the most obvious difference between the demo and a freshly installed version of the theme was the lack of content.

The homepage also looked very different, as it required the manual set up of a custom page template.

Being one of the most popular themes in the WordPress.org Theme Directory, a lot of people shopping for a new theme install it thinking they will get an instant online store, only then realising that they also need WooCommerce.

In Storefront 2.2 we decided to address these issues.

A better on-boarding experience

4.png

As of the latest version, upon activation, users are now greeted with a friendly message that will guide them through the configuration of their Storefront sites.

1_new.png

If WooCommerce is not installed on the site, the theme will let the user know that it is required for any e-commerce related features. It will also download and install WooCommerce.

The next step is the Customizer. This is where users will see a preview of their site for the first time.

screen-shot-2017-05-03-at-12-18-54.png

We included a small tour of the available customization controls in the Customizer. This is where a user can upload a logo or change the colors of the theme.

5.gif

Taking advantage of the new Starter Content feature in WordPress 4.7, we are now able to create example products, set up the homepage template, create Menus, and add widgets to the available regions.

While measuring the impact of these improvements is quite difficult due to the nature of the WordPress self-hosted ecosystem, users seem genuinely amazed when they see that everything has been put together automagically:

When I gave a demo of setting a up shop using Storefront at a meetup in Ypres (Belgium), last week, they were very impressed to see the starter content available in Storefront. Several of the attendees asked if that would be something that could be run in a later phase as well (e.g. WooCommerce already installed with 1 test product).

Job Thomas, Education Lead at Automattic

That’s it! 🙌

By Tiago Noronha

Web Designer, Developer and Computer Geek from Coimbra, Portugal. I work for Automattic.