Navigation
This guide describes the Navigation section.
In the demo store, this section is used to display the main collections. You can click on any collection to view its products. One of the key advantages of this layout is that when customers navigate to a collection from this section, they still see links to other collections. This keeps all collections visible and easily accessible, which can help increase sales.
Adding Collections via Metafield
Check article how to create metafield - Adding standard metafield definition
Select the part of your store that you want to add a metafield to - Add metafield in the Collections part.
Add a definition
Enter the metafield name, select the type, and specify the item count: the minimum and maximum number of items that can be added to the collection navigation.
In the Theme Customizer, navigate to the Navigation section on the collection page. Click on Collection List block, and in the Collection List metafield, enter the name of the metafield you created—for example, Collection Navigation in the demo store. Without this metafield, the metafield navigation will not be displayed.
After this, navigate to the Collections section on the dashboard and click on the specific collection where the navigation items should be added through the metafield.
For example, in the demo we created the collection “All Products.” After the product list in this collection, we added which menu should appear in the navigation for All products collection.
Here we can see All Products as the main collection, with created collections - categories Runners, Athleisure, Performance, and Editions, which contain both Women’s and Men’s sneakers together.
We created the Women collection, which contains all women’s sneakers, and the Men collection, which contains all men’s sneakers.
Then we created the collections Runners W, Athleisure W, Performance W, and Editions W (Women sneakers), as well as Runners M, Athleisure M, Performance M, and Editions M (Men sneakers), and added the related collections to Women and Men collections in the Collection Navigation field created through the metafield.
Here we can see the Women main collection and all collections that contain women’s sneakers.
Here we can see the Men main collection and all collections that contain men’s sneakers.
Adding Collections via Menu
Collections in this section can be added through a menu:
- Create a menu in the admin panel.
- Add the desired collections to that menu.
- Select this menu in the Menu List block.
The collections will then be displayed the same way as in the demo store.
Adding Collections via Collection List Block
You can also add collections using the Collection List block. This allows you to select collections directly from the list inside the customizer.
Using the Link Block
The Link block can be used to display a collection page that includes all products.
Simply add a link to the desired collection page and set a title, for example:
- All
- All Products
Navigation for Pages
This section is not limited to collections — it can also function as a navigation menu for pages.
Pages can be added through the Menu List block in the same way as collections.
If you want to achieve the same behavior as with collections — where users can clearly see which page they are currently on and easily navigate to other pages — you should duplicate this section and add it to all pages included in the navigation menu.
This way, when a user opens any of those pages, they will still see the full navigation and can easily switch between the other pages.
Availability
This section can be added to any template except the password page.
How to access the Navigation section
Access this section through the theme customizer:
- Navigate to Online Store > Themes
- Select “Customize” on your active theme
- On any theme template, click “Add section”
- Search and select “Navigation”
To insert a new section between existing ones, follow the steps in the article "Sections and blocks" and locate the section titled “How to add a section”.
How to configure the Navigation section
Basic Components
The “Navigation” section consists of two primary components:
- General settings – These control the overall settings of the section.
- Block – Each block has its own individual settings.
Available block types include:
- Link
- Menu list
- Collections list
General settings
Color scheme
Read Color scheme article to learn more about color schemes.
Top divider
| Setting | Description |
| Show divider | Display a top divider line to visually separate this section from the content above. If this option is enabled you will see other related options. |
| Line opacity | Adjust the transparency of the divider line. |
| Thickness | Set the thickness (height) of the divider line. |
| Top | Adjust spacing above the section (desktop). |
| Bottom | Adjust spacing below the section (desktop). |
| Top mobile | Adjust spacing above the section on mobile devices. |
| Bottom mobile | Adjust spacing below the section on mobile devices. |
Bottom divider
| Setting | Description |
| Show divider | Toggle to display a line at the bottom of the section. If this option is enabled you will see other related options. |
| Line opacity | Adjust the transparency of the divider line. |
| Thickness | Set the thickness (height) of the divider line. |
| Top | Adjust spacing above the section (desktop). |
| Bottom | Adjust spacing below the section (desktop). |
| Top mobile | Adjust spacing above the section on mobile devices. |
| Bottom mobile | Adjust spacing below the section on mobile devices. |
Header
Subheading
| Setting | Description |
| Subheading |
Enter your text in this field. Use the top menu to style the text with bold, italic, or link, or apply preset options. You can also use the Dynamic Source button to insert dynamic content. After adding the subheading, additional options will appear for further customization. |
| Setting | Description |
| Preset (Heading, Caption, and Paragraph) |
In Theme Settings → Typography → Fonts, you can set font settings for Heading, Caption, and Paragraph. Choose which style to apply in this block.
|
| Preset (Subheading) |
In Theme Settings → Typography → Fonts, you can set font settings for Subheading. Subheading: This style is used for text that appears below a main heading, typically smaller or less prominent than the heading, but still visually distinct from body text. |
| Icon (Subheading preset) |
Choose the subheading appearance in this block:
|
| Font |
In Theme Settings → Typography → Fonts, you can select a font family from the list and choose the font weight at the end of the list separately for Heading, Body, and Accent text. Based on these settings, each block allows you to choose which font style is applied.
|
| Color |
Each color scheme includes Heading, Text, and Accent color settings. Use this dropdown to select which color to apply. The available options may vary depending on the selected block color scheme.
|
| Text style |
Choose text style for preset:
|
| Bottom space | The 'Bottom space' option appears when you add a heading or description. It lets you adjust the space below the subheading. |
| Bottom space mobile | Adjust the space below the subheading specifically for mobile devices. |
Heading
| Setting | Description |
| Heading |
Enter your text in this field. Use the top menu to style the text with bold, italic, or link, or apply preset options. You can also use the Dynamic Source button to insert dynamic content. After adding the heading, additional options will appear for further customization. |
| Setting | Description |
| Preset (Heading, Caption, and Paragraph) |
In Theme Settings → Typography → Fonts, you can set font settings for Heading, Caption, and Paragraph. Choose which style to apply in this block.
|
| Preset (Subheading) |
In Theme Settings → Typography → Fonts, you can set font settings for Subheading. Subheading: This style is used for text that appears below a main heading, typically smaller or less prominent than the heading, but still visually distinct from body text. |
| Icon (Subheading preset) |
Choose the subheading appearance in this block:
|
| Font |
In Theme Settings → Typography → Fonts, you can select a font family from the list and choose the font weight at the end of the list separately for Heading, Body, and Accent text. Based on these settings, each block allows you to choose which font style is applied.
|
| Color |
Each color scheme includes Heading, Text, and Accent color settings. Use this dropdown to select which color to apply. The available options may vary depending on the selected block color scheme.
|
| Text style |
Choose text style for preset:
|
| Bottom space | The 'Bottom space' option appears when you add a description. It lets you adjust the space below the heading. |
| Bottom space mobile | Adjust the space below the heading specifically for mobile devices. |
Description
| Setting | Description |
| Description |
Enter your text in this field. Use the top menu to style the text with bold, italic, or link, or apply preset options. You can also use the Dynamic Source button to insert dynamic content. After adding the heading, additional options will appear for further customization. |
| Setting | Description |
| Preset (Heading, Caption, and Paragraph) |
In Theme Settings → Typography → Fonts, you can set font settings for Heading, Caption, and Paragraph. Choose which style to apply in this block.
|
| Preset (Subheading) |
In Theme Settings → Typography → Fonts, you can set font settings for Subheading. Subheading: This style is used for text that appears below a main heading, typically smaller or less prominent than the heading, but still visually distinct from body text. |
| Icon (Subheading preset) |
Choose the subheading appearance in this block:
|
| Font |
In Theme Settings → Typography → Fonts, you can select a font family from the list and choose the font weight at the end of the list separately for Heading, Body, and Accent text. Based on these settings, each block allows you to choose which font style is applied.
|
| Color |
Each color scheme includes Heading, Text, and Accent color settings. Use this dropdown to select which color to apply. The available options may vary depending on the selected block color scheme.
|
| Text style |
Choose text style for preset:
|
| Header bottom space | The 'Header Bottom Space' option appears when you add a subheading, heading, or description. It lets you adjust the space below the last content block before elements such as buttons, media, cards, bundles, and more. |
| Header bottom space mobile | Adjust the space below the content block specifically for mobile devices. |
Navigation
| Setting | Description |
| Preset |
In Theme Settings → Typography → Fonts, you can set font settings for Heading, Subheading, Caption, and Paragraph. Choose which style to apply in this block.
|
| Font |
In Theme Settings → Typography → Fonts, you can select a font family from the list and choose the font weight at the end of the list separately for Heading, Body, and Accent text. Based on these settings, each block allows you to choose which font style is applied.
|
| Color |
Each color scheme includes Heading, Text, and Accent color settings. Use this dropdown to select which color to apply. The available options may vary depending on the selected block color scheme.
|
| Text style |
Choose text style for preset:
|
| Show products count | Show the product count. It should display the number of products next to each collection. |
| Preset |
In Theme Settings → Typography → Fonts, you can set font settings for Heading, Subheading, Caption, and Paragraph. Choose which style to apply in this block.
|
| Font |
In Theme Settings → Typography → Fonts, you can select a font family from the list and choose the font weight at the end of the list separately for Heading, Body, and Accent text. Based on these settings, each block allows you to choose which font style is applied.
|
Padding
Padding is the space inside a section that separates the content from the section’s edges.
See this article to set paddings: Section padding