Storefront Designer gives you additional style options to further customize the appearance of your Storefront-powered website.
Installation
↑ Back to top- Download the .zip file from your WooCommerce account.
- Go to: WordPress Admin > Plugins > Add New to upload the file you downloaded with Choose File.
- Activate the extension.
More information at: Installing and Managing Plugins.
Setup and Configuration
↑ Back to topThis extension integrates with WordPress Customizer, giving you new settings in several existing sections.
Header
↑ Back to topHeader 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
↑ Back to topFooter 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 topBackground 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.

Typography
↑ Back to topTypographical 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 topMax 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.