Storefront Installation & Configuration

Storefront is our official WooCommerce theme, and it’s free to use.

There is an installation prompt, and a Customizer guided tour that walks you through setup of key theme elements, as of version 2.2.

Installation ↑ Back to top

The fastest way to install Storefront is through the WordPress dashboard.

  1. Go to: Appearance > Themes > Add New.
  2. Type ‘storefront’ in to the search box and hit enter.
  3. Hover over the Storefront screenshot.
  4. Select the ‘Install’ button.
  5. Activate as you would any other WordPress theme.

To install Storefront manually:

  1. Download the latest version of Storefront from wordpress.org then
  2. Upload the extracted folder to the /wp-content/themes/ dir on your server via FTP.
  3. Activate Storefront from the Appearance > Themes screen in your dashboard.

More info at: Using Themes.

Storefront and WooCommerce ↑ Back to top

On installation of Storefront, a prompt ensures that you have WooCommerce installed.

If WooCommerce is installed, it’s time to Design Your Store. Select Let’s Go!

If WooCommerce is installed but not activated, or not yet installed, you need to Install and Activate WooCommerce:

Once WooCommerce is installed and activated, Design Your Store (as above) appears.

Customizer Guided Tour ↑ Back to top

The Customizer Guided Tour starts after the Design Your Store prompt and walks you through steps to help brand your store and make it yours.

Select Let’s Go! to get started or Skip the Tour. If you skip it, the tour will be unavailable later.

Site Identity ↑ Back to top

Upload a Logo.

Enter a Site Title.

Enter an optional Tagline, e.g., A description of your site or motto.

Upload a Site Icon.

Select Next when ready to continue.

Typography ↑ Back to top

 

Select Typography in the menu to customize. Or Skip This Step if you’re fine using default options or want to come back to this later.

Select colors for:

  • Heading
  • Text
  • Links

Select Next when ready to continue.

Buttons ↑ Back to top

Select Buttons in the menu to customize. Or Skip This Step if you’re fine using default options or want to come back to this later.

Select colors for:

  • Background
  • Text
  • Alternate button background color
  • Alternate button text color

Select Next when ready to continue.

Product Page ↑ Back to top

Select whether to enable/disable:

  • Sticky Add-to-Cart
  • Product Pagination

Save Changes ↑ Back to top

Save & Publish whenever you customize an option for the first time or perform an edit.

Guided Tour Complete ↑ Back to top

A Setup Complete page appears when the guided tour is done, and offers further options for Storefront, such as add-ons, our special Storefront bundle and child themes.

Starter Content ↑ Back to top

A fresh install of the 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 (described in the next section) and set it as the static landing page in WordPress settings
  • Apply a full-width template to display the cart and checkout pages
  • Remove default widgets so as to showcase the Storefront widgets

Templates ↑ Back to top

Storefront comes with two extra page templates in addition to the default one: Homepage and Full Width.

Homepage ↑ Back to top

The Homepage template is perfect for store owners, as it displays a lot of products and product categories to visitors as soon as they land on your website. This is the page template used on the Storefront Demo and is used by default on a fresh install for brand new stores.

To manually set this up on an existing store, create a new page and add any Welcome content you wish, which is displayed above products. Then in the Page Attributes meta box, select Homepage from the Template dropdown. Publish or Update the page.

storefront-homepage-template

Assuming you added some products to your store, you should see links to them and links to the top level product categories when visiting the page. Rearrange or hide sections using the Storefront Homepage Control plugin.

To set this as your homepage, go to Settings > Reading in the dashboard. In the “Front page displays” section, select the “static page” option and select the page you just created from the dropdown. Save the settings.

That page you created and added the homepage page template is now loaded when anyone visits your website homepage.

wordpress-reading-settings

Remember, if you want to have a page to display your blog posts too, you need to create another page (leave the content blank) and set that as the Posts Page in the same settings section as above where we created a blank page titled Blog on our site and set that as the Posts Page.

The product categories are displayed in accordance to the order they appear in the dashboard. Change the order at Products > Categories, then drag and drop the categories to suit your preference. If you’re comfortable with code, there are hooks and filters to further customize these homepage components.

If you’d like to reorder the components on the homepage, use our free Homepage Control plugin. You can further customize the homepage template (product columns, titles, toggle components etc), and much more with the Storefront WooCommerce Powerpack.

Full Width ↑ Back to top

The full width template is a standard page template without a sidebar, allowing content to span the full width of your site.

While it’s not necessary to do so, it’s probably a good idea to enable the Full Width template on the Cart and Checkout pages of your WooCommerce website to remove the sidebar from these.

storefront-car-full-width

*Storefront is purposely lean and mean which makes set up a breeze. None of the following is mandatory.

Menus ↑ Back to top

Storefront has two menu locations, “Primary” and “Secondary”. The primary navigation appears beneath the site logo just before the content. The secondary navigation appears to the right of the site logo adjacent to the search box (assuming WooCommerce is active).

You must assign a Menu you created in WordPress to the primary navigation, or it displays each of your pages. The secondary navigation, however, displays nothing if you do not assign a menu. Therefore after activating Storefront for the first time, nothing is shown in the secondary navigation when viewing the front end of your website.

More info on creating and assigning menus to theme locations at: WordPress.org Codex: Menu Guide.

Color scheme ↑ Back to top

In addition to Site Identity, Typography and Buttons from the Guided Tour above, the Customizer allows you to create a unique color scheme for your store. More info at: Storefront Customizer Settings.

Gain complete control of your Storefront design with Storefront Powerpack, which has even more display options for the Customizer.

Widget Regions ↑ Back to top

Storefront includes six widget regions.

Below Header

Widgets placed in the header region appear directly before the main site content and beneath the header.

Sidebar

Widgets placed in the sidebar appear to the left or the right of the main site content, depending on which layout you chose.

Footer x 4

The four footer widget regions are arranged into equal width columns dependent on how many regions are active. For example if you have widgets in the Footer 1 region and widgets in the Footer 2 region, they are organized in two equal-width columns while Footer 3 and 4 won’t display.

WooCommerce integration ↑ Back to top

Storefront has been built to make it more straightforward in creating a professional appearance for your WooCommerce-powered store. It will degrade gracefully and function perfectly well as a blog theme without WooCommerce.

Assuming you are building a store, Storefront offers deep integration with WooCommerce. You need not do anything in Storefront to set it up beyond installing WooCommerce. More at: WooCommerce.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top