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.