Storefront is the official WooCommerce theme built to the same high standards as WooCommerce itself. Best of all? It’s free!
A Storefront theme review is due. Here’s what’s included in this article:
- Storefront Theme Overview
- Storefront Key Features
- What Makes Storefront Great
- WooCommerce Integration
- Storefront Setup
- Arrival of Storefront 1.5
- Storefront WooCommerce Styling
- Popular Storefront Extensions
- Choosing A Theme
Why WooCommerce?
WooCommerce is still the most popular e-commerce platform.
This open source e-commerce plugin for WordPress was launched in 2011 and is aimed at small-to-medium online merchants already comfortable with a WordPress set up.
There are a lot of free and premium themes to choose from, one of the most popular is – Storefront.
Storefront Theme Overview
Storefront is described as an intuitive, lightweight, and flexible theme offering deep integration with WooCommerce. It has several layout and color options to personalize your shop, multiple widget regions, a responsive design, and much more.
The main goal in developing Storefront is to provide a rock-solid foundation for your WooCommerce store without extra bloat or features.
It comes to no surprise that it reaches up to 3,000 downloads per day:
Integration:
Storefront theme is built and maintained by the same team that developed WooCommerce. This is why the integration between WooCommerce, its extensions, and Storefront is water-tight.
No Conflicts:
For e-commerce sites, uptime is of utmost importance. With the new Storefront, there will be no conflicts between theme and plugin during major WooCommerce updates.
Here’s a glimpse of some of its great reviews:
Solid Foundation:
Based on the popular Underscores starter theme, Storefront features a responsive layout, and schema markup for enhanced SEO performance.
Clean and Simple:
Storefront allows you to customize your store to match your brand by providing a clean and simple design.
Storefront Key Features
Most store owners want their e-commerce theme design to be simple and flexible. Storefront can offer exactly that.
Here are some of the key included features:
WooCommerce Integration
Storefront features an unrivalled deep integration with WooCommerce. Of course, having been developed by WooCommerce authors, this integration is compliant with the latest WooCommerce developments and standards.
Lightweight and Robust Core
Storefront is based on Automattic’s popular underscores starter theme. Its codebase is under constant review ensure it is kept nice and clean to provide as little disruption and conflicts as possible..
Design Customization
Every store owner would want to create a look and feel that matches their business. There are several display settings in Storefront that let you customize the design of your page to meet your requirements. Settings are all accessible in the WordPress Customizer.
What Makes Storefront Great
The Storefront philosophy is to do one thing well and provide a solid foundation for your online store. Although the theme appears to be plain, it’s meant to be a starting place that includes deep WooCommerce integration.
Keep in mind that simple is usually more profitable. Unless you are spending a few grand on a professional designer then the fancy design you try and add yourself will most likely distract the user and lose sales.
No Shortcodes and Page Builders
Shortcodes in WordPress are little bits of code that allow you to do various things with little effort. You only get what you need with Storefront, which means you won’t encounter any superfluous shortcodes and page builders.
The Storefront team believes that not including these features allows you to add them via whichever plugin you prefer. Even if you switch themes later on, all of those features will remain. According to the release announcement, Storefront was built with data portability in mind. This means that users will be able to switch themes without losing their content.
Appropriate Sliders
Whether you should use slider is a highly debated topic. While other WordPress themes bundle sliders, Storefront lets you choose the appropriate plugin for your slider needs if you decide you do want one. It is also compatible with the WooSlider plugin.
WordPress offers many slider plugins to add them to your home page, landing pages, posts, or anywhere you want.
Schema Markup
Schema markup is code that you put on your website to help the search engines return more informative results for users. The content on your website gets indexed and returned in search results. Storefront has valid schema markup for improved SEO performance.
Display Options
In addition to attractive products, the design of your shop is equally crucial. It’s important to make a good first impression with the help of professional design. With Storefront, you can change the look and feel of your store in a few clicks, and see your tweaks in real-time.
Responsive
If your site can’t be viewed effectively on mobile devices, you could be losing almost 50% of your customers.
Storefront on mobile device:
Storefront on tablet:
Non-responsive sites are now considered second-class businesses by Google. Storefront will adapt and display beautifully whether you view your store on a laptop, desktop computer, or handheld device.
Localized and Accessible
Storefront is fully localized and ready for your translations. It also adheres to the strict wordpress.org accessibility guidelines. That is why your store will be accessible to the widest audience possible.
Custom Homepage Template
The homepage template in Storefront has been tested for user experience and conversion. It displays product categories, recent, featured, on sale & top-rated products.
It’s a great start for most small businesses to immerse the visitor in your products, while providing enough flexibility to promote the products that will make you the most profit.
WooCommerce Integration
It includes deep integration for WooCommerce and it’s most popular extensions. This means everything will look nice straight away and you won’t have to hire a professional developer or designer to make things fit in.
Some of the more popular extensions supported are:
WooCommerce Bookings
This extension is perfect for those wanting to offer services, appointments, or rentals. It allows you to sell your time or date based bookings, adding a new product type to your WooCommerce site.
WooCommerce Wishlists
From birthdays to weddings, and everything in between, this extension allows guests and customers to create and add products to an unlimited number of Wishlists.
WooCommerce Brands
This extension for WooCommerce allows you to create brands for your shop; each brand can be named, described and assigned an image.
WooCommerce Subscriptions
WooCommerce Subscriptions is an extension that allows you to introduce a variety of subscriptions for physical or virtual products and services. Create product of the month clubs, weekly service subscriptions, or even yearly software billing packages.
WooCommerce Memberships
WooCommerce Memberships allows you to create a membership system that is tied completely to your WooCommerce Store. It is fully compatible with Storefront theme. You can restrict content to certain memberships classes. You can also turn your store into a membership club by restricting purchases to members. Among other useful features, you can even give members special discounts.
Composite Products
Composite Products allows you to create customizable products for your WooCommerce store. It is now fully compatible with Storefront theme. You can allow your customers to customize certain parts of their order.
Storefront Setup
Almost all of the Storefront setup can be done via the theme Customizer.
The easiest way to install Storefront is through the WordPress dashboard.
- Navigate to Appearance > Themes > Add New
- Hover over the Storefront screenshot and click the ‘Install’ button to install the theme.
- Activate Storefront as you would any other WordPress theme.
To install Storefront manually:
- Download the latest version here.
- Upload the extracted folder to the /wp-content/themes/ directory on your server via FTP
- Activate Storefront from the Appearance > Themes screen in your dashboard
Read more on how to install and use themes here.
Menus
Storefront has two menu locations, Primary and Secondary. If you do not assign a Menu to the primary navigation, it will display each of your pages. On the other hand, the secondary navigation will display nothing.
After activating Storefront for the first time, you won’t see anything in the secondary navigation. Here’s your guide to creating and assigning menus to theme locations.
Page Templates
Storefront comes with just two page templates.
Full Width
This is just a standard page template without a sidebar, allowing the content to span the full width of your site.
Homepage
The homepage template allows you to display a multitude of products and product categories.
Here’s a Woothemes guide on installing and configuring Storefront.
Arrival of Storefront 1.5
After the success of Storefront comes the newly improved Storefront 1.5, which achieves another coveted tag on wordpress.org. Its primary feature? A support for right-to-left languages in Storefront. The traditional RTL support standard overloads an additional stylesheet on top of the primary one.
With Storefront 1.5, if you install WordPress in a right-to-left language, the theme will automatically recognize it. It will then load a different set of stylesheets tailored to that language. This makes Storefront a stronger global theme solution for WooCommerce.
You can also expect the following improvements:
Integration with More Extensions
Storefront 1.5 has increased the number of customer-facing extensions it integrates with to 11. It offers added support for WooCommerce Deposits and Product Bundles.
Revamped 404 Page
Storefront 1.5 is now made to be more useful to folks browsing a shop. The new 404 page now includes a product search box, links to product categories, featured products and popular products.
Featured Images
The previous version of Storefront didn’t cater to adding featured images to pages. Now, once you add a featured image to a page, it will appear on the frontend directly above the page title.
Scrolling Header Cart
Considered a handy feature, the header cart lets visitors access their cart total, and the number of items it contains. It also reveals the carts contents upon hover. Using Storefront 1.5, the cart dropdown now has a set height that scroll as more items are added.
You can check out their awesome video about Storefront here.
Storefront WooCommerce Styling
A lot of themes we see, from Themeforest especially, do not style WooCommerce according to the best practice standards set by the Woocommerce authors.
The most common problem is overriding templates. This causes the cost to update WordPress, Woocommerce and the theme itself to sky rocket down the track. You won’t have this problem with Storefront.
Shop Pages
When it comes to shop pages, you can style for all product details and WooCommerce widgets, such as the price filter. The number of products per page is also automatically adjusted to 12.
Single Product Page
Single product pages include appropriate WooCommerce styling as well. The product tabs are presented in a vertical layout, and the number of related products is adjusted to three.
Cart and Checkout Page
The checkout template features a two-column layout, with customer details on the left, and order details on the right. The ‘Place Order’ button is also always in view, making it easy to complete orders for customers.
And Now, It’s Storefront 2.5
Improved Mobile Design
From Storefront 2.0 and up, the theme now offers an improved mobile design for better mobile experience. The header section has been redesigned so that the content appears further up. This ensures that your visitors see more of the content on your WooCommerce store right away.
New typography
Storefront 2.0 and up introduces a new font. Default font for WooCommerce has been changed from Helvetica to Source Sans. The font change provides users “greater depth and cohesion”. Some other small changes have been made to the design to fit the new font.
Introducing “Best Selling” Products
The theme also now offers a “best selling” products section on the home page. This is separate from product categories, recent products, featured products, top rated products and on sale products. Also, “Recent Products” has been renamed to “New In” and “Featured Products” have been changed to “We Recommend”.
Improved Appearance for Better Overall User Experience
Some other small changes have been put in place for better user experience. These include changes to styles, tables and embeds. The developers have also integrated with WordPress 4.5’s custom logo functionality. Adding a logo to your WooCommerce store is now made easier. Now there’s no need to install a plugin just to add your logo.
Popular Storefront Extensions
While Storefront provides a lot for free, there are some premium \add-ons that can add functionality or styling options to the theme.
Storefront WooCommerce Customiser
Without any custom code you can change or adjust labels and number of products displayed in homepage sections, which product details are shown on shop pages, and more.
It also lets you remove the product search and cart from the header.
Storefront Designer
The Storefront Designer plugin adds the ability to change header layouts and make the header remain at the top of the page on scroll (sticky header). It also allows you to adjust button layouts and styles, and change some typography options.
Storefront Parallax Hero
This plugin can be used to display a message and call to action over the top of an image on your homepage. It has a parallax effect, which means as the user scrolls the text and button appear to move over the image.
Child Themes
What is a child theme? According to the WordPress Codex:
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.
In the case of Storefront, Storefront is the parent theme. You can check out the available child themes here.
Importance of a Child Theme – Easy and Safe Updates
When using a child theme, you will not lose any custom code or any custom styles that you have added to the child theme whenever you update the parent theme. Many website owners have learned the hard way losing custom code they have added to their themes after updating it. If you have a child theme, your custom updates are safe whenever a new version of the parent theme is available. We still recommend creating website backups every time you update your theme though.
Storefront: The Final Analysis
Simple, clear, and customizable, the Storefront theme for WordPress has everything to help you achieve success in e-commerce. For a free theme, the design is simple and no-nonsense and WooCommerce integration is unmatched by any other theme.
It may be too plain for some and if you are one of those, just ask yourself. Is it your personal taste and desire for it to look pretty, or is it a decision based on your user experience and the ultimate profitability of your site? In our experience, often the simpler the site the better is the user experience and the more profitable the website.
However, if you can’t find a Storefront child theme that resonates with you and don’t want the cost of a professional designer you might want to take a look at http://www.studiopress.com. They are the only other theme author we recommend if you don’t want to have troubles down the track when it comes to updates and customizations. It will take a bit more time to integrate with WooCommerce, but they have some lovely designs.
Leave a Reply