Superstore includes three options for the header's layout. These range in layout, features, and more.
Use the theme editor to access the layout settings, select a layout option, activate the sticky header, and enable full width.
Access the layout settings
Go to Customize > Theme settings > Layout
Select a layout option
There are three Layout options in the Theme settings to choose from: Basic, Traditional, and Minimal.
Basic
The Basic layout provides a stripped-down, simple header.
Take a look at this layout in the
Interior demo
Traditional
The Traditional layout will show the navigation underneath your logo, search, and site action items.
Take a look at this layout in the
Beauty demo
Minimal
The Minimal layout will condense the navigation and site items into a collapsed hamburger-style menu.
Take a look at this layout in the
Fashion demo
Different options for layout
The options within the Header section editor are slightly different depending on whether you select the Traditional or Minimal layout in the Theme settings.
For example, selecting the Minimal layout will reveal the option to have either Left logo with center search bar or Center logo with search icon, but these options aren't included in the Basic layout.
Activate the sticky header
When scrolling down the page, the header can either remain static or scroll along with the customer. This second option is known as a sticky header and can be activated by checking Enable sticky header.
Note: Even if the Traditional layout is active in the Theme settings, the sticky header will use the minimal layout when scrolled.
Enable full width
With the desktop view of Superstore’s header, the width of the header’s content is limited to the width of the rest of the site’s content. To have the header expand beyond this, select Enable full width header. To set the width of the site’s content, head to the Theme settings tab, click on Layout, and look for the Site Width option.