1. Documentation /
  2. Storefront Designer

Storefront Designer

Note: This product has been retired. Documentation is no longer being updated. Some of these features have been migrated to the Storefront Powerpack extension but some have not. See the Storefront Powerpack documentation for full details.

Storefront Designer gives you additional style options to further customize the appearance of your Storefront-powered website.

Installation

↑ Back to top
  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New to upload the file you downloaded with Choose File.
  3. Activate the extension.

More information at: Installing and Managing Plugins.

Setup and Configuration

↑ Back to top

This extension integrates with WordPress Customizer, giving you new settings in several existing sections.

Header

↑ Back to top

Header layoutsf-headers

Choose a different preset header layout.

  • Default – How Storefront displays the header by default.
  • Expanded – Moves the secondary navigation and search bar above the logo/title/tag line.
  • Central – Aligns everything to the midline and works best when not using a secondary navigation, potentially hiding the search bar.
  • Inline – Removes the secondary navigation/search box and displays the site title, main navigation and cart link in a single horizontal line.

Sticky header

Gives you the option to lock the entire header or only the navigation to the top of the page as the user scrolls. Be aware that sticky navigation only works in conjunction with ‘Expanded’ or ‘Compact’ header layouts.

Footer

↑ Back to top

Footer Text

Control text to display in the footer.

Display footer credit

Toggle display of the Storefront credit note/link in the footer.

Buttons

↑ Back to top

Background style

Choose a solid fill background (default), a gradient background or transparent background. If you select gradient, the gradient is automatically generated based on the button background color setting.

Buttons with gradient affect applied.
Buttons with gradient affect applied.
Buttons with transparent setting applied.
Buttons with transparent setting applied.

Button Radius

Specify the border radius of your buttons. Choose squared (default), small or full. Small will result in slightly rounded corners, full will result in fully rounded buttons.

Screen Shot 2014-09-29 at 13.30.37
Buttons with rounded affect applied.

2D

Removes the default 3D effect applied to buttons by Storefront.

Buttons with 2d affect applied
Buttons with 2d affect applied.

Typography

↑ Back to top

Typographical scheme

Allows you to change the type face used throughout the site to one of 3 presets:

  • Helvetica – The default Storefront typeface
  • Lora – A serif typeface
  • Roboto Slab – A slab-serif typeface
  • Courier – A monospace typeface

Typographical scale

Changes the global font size which by association adjusts the entire web site scale. Choose from default, smaller or larger.

Layout

↑ Back to top

Max width

Makes website content span the full width of the browser window rather than having a maximum width.

Content frame

Wraps the site content in a “frame”, offsetting it from the background of the web site.

The content frame setting in action.
Content frame setting in action.

Content background color

Defines a background color for the content frame, separate from the body background color.

WooCommerce

The most customizable ecommerce platform for building your online business.

  • 30-day money-back guarantee
  • Support teams across the world
  • Safe and secure online payment