Storefront Designer

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

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.

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

Header layout

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 Text

Control text to display in the footer.

Display footer credit

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

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.

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.

2D

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

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.

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.

Content background color

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