Storefront is a free theme (with 100,000+ active install), developed & designed by WooCommerce Core Developers and is one of the most downloaded WordPress eCommerce themes. Storefront supports several plugins, including WooCommerce, official extensions, and other plugins. The main goal in developing Storefront is to provide a rock-solid foundation for your WooCommerce store without extra features. Storefront theme also supports the schema markup language that is known to improve SEO.
Installation of Storefront
Automatic Installation
To install Storefront login to your WordPress dashboard. Then,
- Navigate to Appearance > Themes > Add New.
- In the search box type “Storefront” and hit on enter button.
- Click on the “Install” button.
- Finally click on Activate button to activate it.
Manual Installation
For manual installation:
- Download the Storefront latest version from WordPress official website wordpress.org and extract the zip file to a folder.
- Upload the extracted folder to
/wp-content/themes/dir on your server via a File Transfer Protocol (FTP). - Now go to Appearance > Themes in you Dashboard panel to activate Storefront theme.
After successful installation (Automatic or Manual) of Storefront, you will be prompted a message that you have WooCommerce installed.
Now, it’s time to Design Your Store. Click on Let’s Go!
You need to Install and Activate WooCommerce. After successful installation and activation a screen containing Design Your Store (as below) will appear.
Storefront Customizer Guided Tour
When you click on Design Your Store, you will be taken to a Customizer Guided Tour.
Now hit on Let’s Go! to get started or No thank, skip the Tour.
Site Identity
Site Identity have the following options:
Logo: In this field enter your store’s logo (If you have or any other logo that you wish)
Site Title: Enter your site title here.
Tagline: Enter your site description or motto in this optional field.
Site icon: Upload your site icon here.
When all will complete, click on Next to continue.
Header
Under Header you will get the following options:
Current Header: Upload a background image for your header by clicking on the Add new image button. Then, upload a new image or choose it from the Media Library if it was uploaded previously. You can also skip this option to go to the next field.
Background Color: Click on the Select Color button to change your header background color. If you don’t want to change it, you can skip this.
Text Color: Click on the the Select Color button to change the color of your header text.
Link Color: Click on the Select Color link to change the color of linked text.
Now click on the Publish button to save any changes you have made.
Footer
When you click on the Footer link, you will get the following options:
Background Color: To change Background color click on the Select Color button.
Heading Color: Click on the Select color button to change Heading color and choose your color.
Text Color: Click on the the Select Color button to change the color of your header text.
Link Color: Click on the Select Color link to change the color of linked text.
Now click on the Publish button to save any changes you have made.
Typography
You can select Typography in the menu to customize Or Skip This Step.
Under Typography you will get the following options:
Heading Color: Click on the Select color button to change Heading color and choose your color.
Text Color: Click on the the Select Color button to change the color of your header text.
Link Color: Click on the Select Color link to change the color of linked text.
Click Next to continue.
Buttons
You can select Buttons in the menu to customize Or Skip This Step.
You will have the following options to change:
- Background Color
- Text Color
- Alternate button background color
- Alternate button text color
Click on Next to continue.
Product Page
When you click on the product page, you will get two check boxes to enable/disable
- Sticky Add-to-Cart
- Product Pagination
Now Save & Publish whenever you complete the customization for the first time or perform an edit.
Storefront Starter Content
A newly install Storefront theme will automatically perform the following actions for brand new stores with no products:
- Import example products
- Create a homepage with the Homepage template
- Apply a full-width in addition to Homepage template to display the cart and checkout pages
- Remove default widgets to showcase the Storefront widgets
Templates
There are two additional templates in storefront beside the default one: Homepage and Full Width.
Storefront Homepage
The Storefront Homepage template is perfect for store owners. It displays a lot of products and product categories to visitors when they visit your website.
To display Homepage sections, you have to assign the Homepage template to your page.
Follow these steps:
- Go to Dashboard > Pages and create a new page and add any Welcome note.
- On the right hand side, you will find “Page Attributes“ meta box.
- Select “Homepage” from the “Template” drop-down.
- Click on Updateto save the change.
Re-order Storefront Homepage Sections
You can easily re-order Storefront homepage sections using WooThemes Homepage Control plugin.
- Download and Install Homepage Control
- Go to Appearance > Customize > Homepage Control
- Drag & re-order the sections according to your requirement.
- Click on Save & Publish button to save the changes.
Remove Sections from Storefront Homepage
You can also remove or hide any sections (Product category, Recent, Best-selling) from your homepage using Homepage Control plugin.
- Download and Install Homepage Control
- Go to Appearance > Customize > Homepage Control
- Un-check the box beside the sections you do not want to display.
- Click on Save & Publish button.
Full Width
Full width template is a standard page template without a sidebar that allow content to span the full width of your site.
Follow these steps:
- Go to Dashboard > Pages and create a new page and add any Welcome note.
- On the right hand side, you will find “Page Attributes“ meta box.
- Select “Full Width” from the “Template” drop-down.
- Click on Update to save the change.
Add A Full Width Slider To Storefront Homepage
You can add any slider to storefront homepage using Storefront Add Slider plugin. To do so:
- Download and install Storefront Add Slider
- Go to Appearance > Customize > Static Front Page
- Paste slider shortcode in Slider Shortcode field
- Click on Save & Publish button.
Menus
Storefront theme has two menu locations, “Primary” and “Secondary”. The primary menu appears beneath the site logo just before the content. The secondary menu appears to the right of the site logo adjacent to the search box.
Widgets
There are 6 widgets included in Storefront:
Below Header
This widget appear directly before the main site content and beneath the header.
Sidebar
This widget appear to the left or the right of the main site content, depending on which layout you chose.
Footer x 4
There are four footer widget regions that are arranged into equal width columns dependent on how many regions are active.
Storefront is one of the most versatile WooCommerce themes available, whether free or paid, and it’s the best free WooCommerce theme.
