What is the header section?
As the first thing a customer sees on your Shopify store, the header is crucial in creating a strong and memorable brand experience.
Symmetry's header will make an impact with its sleek, modern design and intuitive navigation system. It has many layout options, alongside a beautifully designed cart, account and search icons.
Separate guides are available for how to set up the Mega menu, Announcement bar and Search bar.
How to set up the header section
Steps
- Open the Theme Editor, and in the Header Group open the Header section.
- Add your Logo settings, and set your desired Logo width on desktop and mobile.
- There is the option to Enable sticky header. This setting determines whether the header anchors to the top of the browser.
- For a striking homepage, Enable transparent header. Ensure a full-width image section is at the top, such as a slideshow
- Upload a Contrasting logo to stand out against your page's background when the header becomes transparent. Make sure to match your main logo size. This will ensure that when scrolling down the page (with Enable sticky header switched on) the logo will swap seamlessly to your main logo.
- To set up your navigation, please refer to our mega menu guide.
- In Customer accounts, choose an alternative Customer account menu if desired.
- Choose to Enable search. For a richer experience, choose a menu to show as recommendations. These recommendations show when the search is opened and can encourage customers to navigate to these collections in your store.
- In the Icons settings, choose to Show icons on cart and search, on all links, or only icons no text. Choose between 3 different Cart icons.
How to set the transparent header
The transparent header is a design feature in Symmetry where the header has no solid background color. Instead, the background is see-through, allowing the content behind the header to be visible, thereby blending the header more seamlessly in to the rest of the page's design.
The transparent header will be displayed on the homepage when there is a full width section as the first section in the Template or Header Group.
Tip
- Ensure that a full width section is the first section on the homepage.
- In the Header settings, navigate to Transparent header and select Enable transparent header.
- Select an optional Logo and select the Text color.
- In versions 7.5.0 and above, select the Contrast fade color and use the slider to adjust the Contrast fade strength.
FAQs
How do I set up my navigation and mega menu?
Refer to our Mega menu guide which covers this in more detail.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us