Choose from multiple header variations to make your Treez Ecommerce site more your own. Below, learn more about what each style looks like, how to enable header variations for your site, and how to set up your preferred style.
Overview of Header Styles
There are five unique header styles to choose from for your Treez Ecommerce website. Check out what each option looks like in both desktop and mobile views below.
Default Header
This is the style that appears on your site if you do nothing to customize your site header.
Desktop view:
Mobile view:
Header with Centered Logo and Nav
Desktop view:
Mobile view:
Header with Centered Logo and Locator
Desktop view:
Mobile view:
Header with Top Locator and Bottom Nav
Desktop view:
Mobile view:
Header with Right Store Locator
Desktop view:
Mobile view:
How to Enable Header Variations
Login to your Treez Ecommerce CMS (content management system), Prismic, and navigate to the main list of published pages and modules.
Find and open the Header module.
On the Header module page, find and click the Add Slice button on the left side.
You should then see the Header slice variations that are available to use. Choose your preferred slice style by clicking on it.
Back on the Header module page, make sure the new Header slice is toggled On (Active should be true).
In the upper right corner, click Save and then Publish.
Voila! You've updated your product card style and enabled yourself to change to another variation as desired.
How to Change Header Styles
From the Header module editing page, find the Header slice on the left side. Click the button with the three dots, then click Change variation.
Click on the header style you want to change to.
Back on the Header module page, make sure the updated Header slice is toggled On (Active should be true).
In the upper right corner, click Save to save your changes.
Then click Publish to publish your changes to your site.
Voila! You've updated your site's header style. Refresh your site to see how it all looks.
Mobile Header Support
You can now configure a separate header style for desktop and mobile — independently.
How it works
If you don't set a mobile header, nothing changes. Your existing setup carries over as-is.
If you do set one, desktop and mobile shoppers can get completely different header experiences — different styles, different layouts, mix and match.
All mobile header slices follow the same naming as their desktop counterparts, just with a
HeaderMobileprefix.
Coming Soon: Horizontal Nav for Mobile
There's a new mobile-only slice for horizontal navigation. It renders as a scrollable nav bar — so if your links overflow the screen, they scroll cleanly instead of wrapping or breaking.
A few things to know before enabling it:
When you enable this slice, each link's visibility will default to match what's already set on your desktop navigation that is configured in your
Main NavigationDocument in your CMS.If you want to customize which links appear on mobile, set up your per-link visibility rules in the
Navigation docfirst — before enabling the horizontal nav slice.Go to you
Main Navigationdocument in Prismic CMSFind the per link visibility configuration
If you enable the slice first and then adjust visibility, you may have unintended menu items on the mobile experience.
This gives you purpose-built navigation for each device type without duplicating your entire setup.