Table Of Contents
WooCommerce Storefront Designer Extension gives you additional style options to further customize the appearance of your Storefront-powered website.
Installation for WooCommerce Storefront Designer
- 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.
Setup and Configuration for WooCommerce Storefront Designer Extension
This extension integrates with WordPress Customizer, giving you new settings in several existing sections.
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 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.
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.
Control text to display in the footer.
Display footer credit
Toggle display of the Storefront credit note/link in the footer.
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 colour setting.
Easy Header Customizations
Choose now from ‘default’, ‘expanded’, ‘central’ or ‘sticky’ header layouts.
- ‘Expanded’ header layout: Features a search and secondary navigation above the site logo.
- ‘Central’ header layout: Centers your logo, description and primary menu navigation– this styling previous required custom coding unless you were using the Canvas ‘Duo’ theme.
- ‘Sticky’ header layout: Header stays at the top of the page even as the user scrolls down.
Easy Layout Customizations
Define a content frame and choose a background colour for that frame. Alternatively, choose a ‘full-width’ layout for your site.