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.