Best Free WooCommerce Theme: Storefront Installation and Configuration

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.

Storefront find and install

  • 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!

Storefront with woocommerce

You need to Install and Activate WooCommerce. After successful installation and activation a screen containing Design Your Store (as below) will appear.

Storefront woocommerce

Storefront Customizer Guided Tour

When you click on Design Your Store, you will be taken to a Customizer Guided Tour.

Storefront welcome customizer

Now hit on  Let’s Go! to get started or No thank, skip the Tour.

Site Identity

Storefront add logo

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

Storefront 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

Storefront 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

Storefront 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

Storefront Product page customizer

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

Storefront Starter Content

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:

  1. Go to Dashboard > Pages and create a new page and add any Welcome note.
  2. On the right hand side, you will find “Page Attributes“ meta box.
  3. Select “Homepage” from the “Template” drop-down.
  4. Click on Updateto save the change.

Storefront homepage template

Re-order Storefront Homepage Sections

You can easily re-order Storefront homepage sections using WooThemes Homepage Control plugin.

  1. Download and Install Homepage Control
  2. Go to Appearance > Customize > Homepage Control
  3. Drag & re-order the sections according to your requirement.
  4. 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.

  1. Download and Install Homepage Control
  2. Go to Appearance > Customize > Homepage Control
  3. Un-check the box beside the sections you do not want to display.
  4. 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:

  1. Go to Dashboard > Pages and create a new page and add any Welcome note.
  2. On the right hand side, you will find “Page Attributes“ meta box.
  3. Select “Full Width” from the “Template” drop-down.
  4. 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:

  1. Download and install Storefront Add Slider
  2. Go to Appearance > Customize > Static Front Page
  3. Paste slider shortcode in Slider Shortcode field
  4. 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.

This widget appear to the left or the right of the main site content, depending on which layout you chose.

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.

Leave a Reply