When shopping online, you’ve probably already come across stores with unappealing designs.
You’ve found THE product you were looking for, but when it came time to visit the site, a chaotic navigation or a sloppy presentation made you leave as quickly as you arrived. What a shame!
When you sell products, it is in your best interest to present them in their most beautiful setting so that your visitors don’t run away.
And this is not an easy task, because finding a WordPress ecommerce theme is sometimes a real obstacle course. Indeed, some themes are full of superfluous features. So it’s not easy to find a theme with the bare minimum.
This is where the Storefront theme comes in, the heart of our topic today! Are you ready to see what it has in store
front? Here is today’s menu:
Originally written in June 2015, this article was updated in April 2021. The version of Storefront from the official directory tested in this article is 3.5.1.
Your best WordPress projects need the best host!
WPMarmite recommends Bluehost: great performance, great support. All you need for a great start.
What is the Storefront theme?
The Storefront theme is a free and flexible online store theme. If its name rings a bell, it’s normal: it has made a name for itself in the ecommerce world.
Designed by Automattic, the company that develops WooCommerce, the Storefront theme promises perfect compatibility with WooCommerce and its plugins. So you won’t have to pull your hair out at the next update.
The Storefront theme being free, it allows you to customize the main parts (styles, logo, layout with or without sidebar). But you can also customize your store with paid plugins, which we’ll take a closer look at in the rest of this article.
On its official page, the Storefront theme presents itself as a responsive theme optimized for accessibility, which will attract a large and varied audience. Featuring a flexible and nestable grid system that adapts to the different screen sizes of your users, the Storefront theme allows you to shape the display of your site without needing to be a code or web design genius.
We can see on the WordPress directory that the Storefront theme is already deployed on more than 200,000 sites. And to say the least, it is very popular, as it has a nice rating of 4.5 out of 5 stars.
Did this presentation whet your appetite? Let’s find out how to set up your store with Storefront!
To get started, install Storefront via the Appearance > Themes menu in the WordPress interface. You can also find it on the WordPress directory.
After thanking you kindly, a notification will ask you to install and activate the WooCommerce plugin, and then configure it if you haven’t done so already. Having trouble with this step? Check out our article on this topic.
Now, let’s get back to the point. In the Appearance > Storefront section, you’ll be prompted to activate the Storefront homepage template, which we’ll talk about in detail later in this article, and to add sample products.
Indeed, a store without products is not imaginable. It would be like a sandwich without bread or like WooCommerce without WordPress!
Once you’ve added material to your store, we’ll be able to customize it.
Storefront theme Customization
Ready to start customizing the Storefront theme? Go to the Appearance > Customize section of the WordPress interface.
As you can see, thirteen tabs are available. A basic, but wide range for a free theme. This is where you can change the colors of your site, the typography and the layout.
Storefront widget areas
Storefront has six widget areas. Here you can place content that will be displayed on all pages, such as a banner below the header or customer reviews in the footer. This will make your users’ mouths water.
The homepage template
Storefront also comes with a homepage template. It displays product categories, recent products, featured products and top rated products.
As far as the design is concerned, we notice that it is particularly basic. If you’re looking for something to express your creativity through amazing CSS effects, the Storefront theme might not be for you.
You can see it in action below:
To activate this template, go to the Pages section, create a new page, add your content to it (it will appear above your products), and then select the Homepage template. Don’t forget to publish your page.
To set it as your homepage, head to Settings > Reading, then check a static page in Your homepage displays and select your newly created page from the drop-down list.
Save the changes, and voilà! Your site’s homepage now has a new look!
We already talked about the importance of using a child theme in this article. You can’t ignore it if you want to keep the changes you made to your site after the updates of your parent theme.
A child theme is a kind of sub-theme that inherits all the features of the parent theme. To learn more about it, check the dedicated page in our glossary.
That said, using a child theme can also be a good idea if you don’t like the basic design of Storefront. In fact, WooCommerce offers no less than fourteen ready-to-use Storefront child themes, each designed for a specific type of project.
So you can adopt a different design without getting your hands dirty.
All these child themes are compatible with Storefront plugins, which we will discover in the next part. They come with documentation and FAQ as well as one year of updates and support from the date of purchase.
At the time of writing, two of these fourteen child themes are free: Deli and Boutique. Unfortunately, we notice that their design is still very basic.
- Deli is a child theme with earthy colors, suitable for stores selling natural, organic or handcrafted products.
- Boutique is a simple and elegant child theme, designed for a jewelry or luxury products website.
Other Storefront child themes cost $39 and are tailored to different niches. Among them, we find:
- Petshop, a child theme with nature colors, thought for stores dedicated to our furry or feathered companions.
- Hotel, which is aimed at businesses offering accommodation services and promises perfect integration with the WooCommerce Bookings and Accommodation Bookings plugins.
- Bookshop, which offers stores selling books and other collectibles a homepage highlighting different products and product categories.
Find the full list of Storefront child themes on the WooCommerce website.
Do you find Storefront’s customization options disappointing? That’s normal, they are voluntarily limited in order to leave room for a dozen of paid extensions to customize your site.
It’s a shame to have to pay to take advantage of these options, especially when other WordPress themes offer more flexibility in their free version. OceanWP, for example, allows you to customize your 404 error page, as well as the blog part of your site, the header and the footer in a much more advanced way than Storefront.
The Kadence theme, on the other hand, offers more advanced options for layout and style modulation, and in particular for header and footer customization, thanks to the Header & Footer Builder.
This intuitive drag-and-drop builder is also found with the Astra theme, which allows you to customize the buttons, the location of the breadcrumb trail, and the layout of the blog in a more sophisticated way, all directly from the customization tool.
Join the WPMarmite subscribers
Get the last WPMarmite posts (and also exclusive resources).
That said, if you’re interested, there’s The Storefront Extensions bundle available for $69, which you can find at any time in the Appearance > Storefront menu of WordPress.
Without further ado, here is the full menu:
- Storefront Powerpack – $59 per year
- Storefront Homepage Contact Section – free
- Storefront Hamburger Menu – free
- Storefront Product Sharing – free
- Storefront Footer Bar – free
- Storefront Mega Menus – $39 per year
- Storefront Reviews – $19 per year
- Storefront Pricing Tables – $19 per year
- Storefront Product Hero – $19 per year
- Storefront Blog Customizer – $19 per year
- Storefront Parallax Hero – $19 per year
Let’s turn the spotlight on a few extensions from this list and see if they can be useful for you.
Storefront Powerpack – $59 per year
Storefront Powerpack provides the options for customizing your store. You can change the header display, homepage, payment page and many other features of your site:
- The Design tab offers a nice set of CSS effects that can be easily applied through buttons that allow you to adjust the location of elements on your pages, the font style or even the colors.
- The Product Details tab allows you to manage the display of product pages.
- The Shop tab allows you to adjust the display of product blocks.
- The Messages tab allows you to change the background color of information, validation or error messages.
Storefront Blog Customizer – $19 per year
Storefront is an ecommerce theme, but you can also use it on your blog.
The Storefront Blog Customizer extension allows you to change the layout of your blog and your posts. You will be able to choose where to place the title, the sidebar (and even delete it) and the layout of your posts (classic or magazine format).
Not many options, but they can be useful if you have a blog.
Storefront Pricing Tables – $19 per year
The Storefront Pricing Tables extension allows you to create pricing tables. A shortcode generator button will allow you to present some products to highlight the most advantageous offer to your customers. The problem is that this button is only accessible from the old WordPress editor, the so-called “TinyMCE”.
If you want to integrate a price table from the current WordPress editor, you will have to type the appropriate shortcodes by hand in the page or post of your choice:
- First, define the number of columns and their alignment as follows:
[pricing_table columns="3″ alignment="left"][/pricing_table]
- Then, copy this shortcode as many times as there are columns in your table:
[pricing_column id="43″ title= "" features="Feature 1|Feature 2|Feature 3″ image="true" highlight="false"]
Here you set the product ID, choose a title or leave it blank to retrieve the product name, specify the product features, separated by vertical bars “|”, choose to include the product image or not, and finally highlight the product you want by changing the last parameter to “
As this shortcode system is archaic to say the least, an integration of the pricing table to the new editor through a Gutenberg block would be more than appreciated.
Once you have integrated your pricing table, go to the Customize > Pricing Tables section to set the number of columns, the table alignment and the background colors of the different products displayed.
Storefront Product Hero – $19 per year
Storefront Product Hero allows you to showcase a product on a banner. This banner can also be placed inside a page using a shortcode:
In the Customize > Product Hero menu, you can customize the display of this banner. In particular, a parallax effect is available on the background of the banner, which means that you can scroll the banner as the user of your page scrolls.
This extension can be useful to highlight a product on sale in a few clicks, for example.
Storefront Parallax Hero – $19 per year
Storefront Parallax Hero adds a banner to the homepage template. It can be configured in Customize > Parallax Hero.
To add it and configure it on another page, you will need to use a shortcode (yes, another one!). You can change the text, the image or the background video, and adjust the parallax effect.
We regret once again this dated and not very intuitive system.
Compatibility with plugins
Storefront is obviously compatible with all the extensions offered on the WooCommerce website. The official documentation even provides a list of plugins that are designed to work perfectly with Storefront.
It doesn’t point out any incompatibility with an official WordPress plugin, so no particular problem is expected, captain!
To go further on the subject, don’t hesitate to check our selection of the 25 best plugins that could be used on any type of site (blog, store, portfolio, etc.).
We have finished exploring the possibilities of customizing your site with Storefront. Now let’s move on to three more main elements of the theme.
Performance, SEO, responsive: zoom on 3 major aspects
The loading time of a website has a significant impact on the user experience and, to a lesser extent, on the search engine ranking of your website, which we will talk about in more detail in the next section.
Thus, providing users with a smooth browsing experience will decrease your bounce rate by keeping users on your site and eventually make them come back (that would be ideal, wouldn’t it?). The loading speed of your site therefore has a direct impact on your brand image.
And this should be emphasized since a smooth navigation contributes greatly to a positive user experience. On the other hand, a difficult navigation will encourage your visitors to go see if the grass is greener on your competitors’ sites.
According to a study published on WP Rocket’s blog, the Storefront theme is ranked in the top ten fastest WooCommerce themes, a nice performance!
SEO, acronym of Search Engine Optimization, is a set of techniques aimed at ranking a web page at the top of the search engine results. It is essential to work on it in order to give visibility to your site and thus expand your audience.
Many parameters affect the positioning of your site, including the quality of content, incoming links (also called backlinks) and the structure of the code.
When it comes to code structure, it is the theme you have chosen that will play its role, and Storefront is one of the best in this area. It doesn’t have dedicated SEO options, but claims to offer improved performance. One of the things we notice is that the title hierarchy is well implemented.
A website is said to be responsive when its display adapts to the user’s device (be it a computer, a tablet or a cell phone).
The Storefront theme is a fully responsive, especially thanks to some options like the secondary menu, which is fixed at the bottom of the screen on tablet and mobile. It includes three buttons allowing the user to manage their account, search for a product, and validate their cart.
So with the Storefront theme you should be able to satisfy mobile users without any problem.
And as there are more and more mobile users, it’s in your best interest to have a responsive website.
Documentation and support
If you encounter any difficulties when using Storefront, WooCommerce provides detailed documentation for all its themes and plugins. And if you followed the beginning of this article, you know that Storefront is one of them.
You can find it at any time by going to Appearance > Storefront in WordPress.
In case of any problem during the installation or configuration of the theme, you will find a detailed guide on the dedicated page. For any other questions, you can check the FAQ.
If you use a child theme or a paid WooCommerce plugin, you will have access to a support interface where you can open a ticket in case of a glitch.
In the end, what to think about Storefront?
If you’re looking for a no-frills free theme, Storefront can definitely satisfy your appetite.
First of all, this theme was designed by the creators of the WooCommerce plugin. To say the least, they know WordPress inside and out. By using a child theme, you are guaranteed to get Storefront updates as well as patches and new features.
In short, Storefront is an ecommerce WordPress theme that provides a good foundation to quickly design a custom online store.
Thanks to its paid extensions, you can customize Storefront with new features, without necessarily being a code expert. However, we regret that these extensions are not free, as this type of options can be found with other free themes, such as Astra, Kadence or OceanWP.
Another important point to emphasize is that Storefront’s default design is unfortunately basic. If you’re dreaming of a state-of-the-art storefront in terms of graphic design, I advise you to skip it.
Or rather turn to a page builder like Elementor, which will allow you to go much further in customizing your site. Keep in mind, however, that getting to grips with the famous page builder requires a learning curve.
Have you tried Storefront? Did this article make you want to try it? Tell us what you think. 🙂
Receive the next posts for free and access exclusive resources. More than 40,000 people have done it, why not you?