Sidebar navigation

The sidebar nav is a fixed-width navigation panel that sits to the left of the main page content on desktop. It shows a hierarchical category tree with optional links to specials, new products, brands, and static pages. It's off by default and has to be explicitly enabled.

Enabling the sidebar

The sidebar is controlled by a global setting, not a section placement alone. You need to turn it on before it appears on the live storefront.

In the Template Configurator, go to Global Settings → Sidebar.
Set Enable sidebar to true.
Optionally adjust Max width (default: 340px). This controls the fixed width of the sidebar column.

With the sidebar enabled, every page gets a two-column layout on md breakpoints and above: the sidebar column on the left, page content on the right. On mobile, the sidebar is hidden entirely — it doesn't collapse into a hamburger or drawer.

Adding and configuring the sidebar section

The sidebar's content is managed through a dedicated section type called Sidebar Navigation. This section lives in the Header template slot in the Template Configurator — not in the page body. The layout engine picks it up from the header data and renders it into the sidebar column.

To set up the sidebar:

Open Template Configurator → Header.
Add a Sidebar Navigation section.
The section will only appear in the sidebar column, not inline in the header itself.

In the Template Configurator preview, the sidebar layout activates automatically the moment a sidebar_builder section exists in the header template — even if the global Enable sidebar setting is still false. This lets you design and preview the sidebar without affecting the live storefront.

Section settings

The sidebar_builder section wraps all its blocks and controls the sidebar's overall appearance.

Setting	What it does	Default
Background color	Background of the entire sidebar	Inherited from page
Text color	Default text color inside the sidebar	Inherited from page
Border width	Thickness of the sidebar border (px)	1px
Border color	Color of the border	`#e5e7eb` (light grey)
Border side	Which side the border appears on	Right
Padding	Inner spacing (top/bottom/left/right)	16px top and bottom
Margin	Outer spacing	None
Custom class	CSS class added to the section element	—

Border side accepts: right, left, both, or none. The default right border acts as a visual divider between the sidebar and the main content area.

The Sidebar Menu block

The main content inside a sidebar section is a Sidebar Menu block. It renders the full category tree and optionally appends links for specials, new products, brands, and static pages.

Content options

Setting	What it does	Default
Always expanded	Open all category branches on load	Off
Max depth	Limit how many levels deep the tree renders (0–3, or unlimited)	Unlimited
Show specials	Append a link to the Specials page	Off
Show new products	Append a link to the New Products page	Off
Show brands	Append a link to the Brands page	Off
Show static pages	Append links from the static pages menu	Off

When Always expanded is off, parent categories that contain subcategories show a chevron toggle. Clicking the chevron expands or collapses that branch. Categories along the path to the current page expand automatically regardless of this setting.

The active category (the one matching the current page) is highlighted in bold. You can customise what "active" looks like with the colour settings below.

The Max depth setting (megamenu_no_lvl) controls how many levels render. Setting it to 0 shows only top-level categories. 1 shows one level of subcategories. Leave it at initial (the default) to render the full tree.

Static page links use the label names from the site's menu configuration. Specials and new products labels respect the overrides in Global Settings → General (specials_menu_name, news_menu_name) if set.

Colour settings

Setting	What it does
Hover text color	Link text colour on hover
Hover background	Link background on hover
Active text color	Text colour for the currently active link
Active background	Background for the currently active link

All four default to inherit/transparent if not set.

Per-level typography and indentation

Each of the four depth levels (0–3) has independent controls for font size, font weight, text colour, and left indent. This lets you visually distinguish depth — for example, larger bold text for top-level categories and smaller grey text for subcategories.

Level	Default font size	Default indent
Level 0 (top)	0.9rem	8px
Level 1	0.85rem	24px
Level 2	0.8rem	40px
Level 3	0.75rem	56px

Indent is the left padding applied to each link. It increases with depth to create the visual hierarchy. You can set it anywhere from 0 to 60px in 2px increments.

Mobile behaviour

The sidebar is hidden on screens narrower than the md breakpoint (768px). There's no mobile fallback — the sidebar simply doesn't appear. On mobile, customers navigate through the existing mobile menu instead.

If you need navigation on mobile, keep the header's mobile menu configured separately. The sidebar and mobile menu are independent.

Tips

You can add more than one block to a sidebar_builder section. The allowed block types are Sidebar Menu, Heading, and Paragraph, so you can add a heading above the menu or a short text block below it.
The sidebar column width is fixed — it doesn't flex with the content. Set max_width to a value that works across your typical category tree depth and font size.
If the sidebar looks correct in the Template Configurator preview but doesn't appear on the live storefront, check that Enable sidebar is set to true in Global Settings.
The sidebar section must be in the Header template slot. Adding it to any other template slot (footer, page body etc.) won't reder it in the sidebar column.