In this section, you'll find information about different types of navigation and how to configure them in the Header, Menu Drawer, and other sections.
<aside> 💡
To configure navigation in your store, you need to create and manage menus. You can do this in your Shopify admin panel by going to Content → Menus. For detailed instructions on managing menus, refer to the Shopify manual.
</aside>
Learn how to customize the header and tailor it to your business needs.
Upload your store's logo and adjust its size and alignment within the header.
<aside> 💡
Ensure that the uploaded logo file is cropped properly, meaning it does not contain extra space around it. Otherwise, the logo may appear too small.
</aside>
If you’re using an overlap header, add an Overlap logo—it’s typically white on a darkened background.
Alternatively, enter your store name if you are using a text-based logo. If no logo is uploaded, your store name will be displayed in the header by default.
The Volume theme includes six desktop header layouts:
The configuration for the Mobile Header is described below.
Choose between two types of sticky headers or disable the sticky behavior entirely.
The Volume theme offers multiple menu configurations:
A simple approach where the navigation is entirely inside the Menu Drawer. Clicking the burger menu icon opens the drawer.
Note: Menu and Bottom bar have no menus selected, but the Burger menu is enabled.
Refer to the section below for Menu Drawer setup instructions.
A common setup where a single menu is used, with a Shop dropdown containing product categories.
To set this up, select a pre-configured menu from the corresponding menu selector in the theme settings.
Note: Menu with nested items has been added, along with a Mega menu block.
Refer to the section below for Mega menu setup instructions.
Note: The Menu displays a menu with secondary items, while the Bottom menu shows the catalog.
If your store has 2–4 top-level categories (e.g., gender/audience-based: Men / Women / Kids or department-based: Clothing / Shoes / Bags), the Smart Category Menu feature can significantly enhance the UX.
Note: The Use as parent menu checkbox is enabled, while the Bottom bar has no menu selected.
Quick overview
Define your top-level categories—you can base them on gender/audience (e.g., Men / Women / Kids) or department (e.g., Clothing / Shoes / Bags). Next, determine the collections and subcollections that will belong to each top-level category.
Create category-specific landing pages:
Start with the Home page layout:
Use the Home page to build the layout for your first top-level category. Add necessary sections that highlight collections and products from this category (e.g., banners, featured collections, featured products, etc.).
The second top-level category will be based on the collection template.
You can set things up in the Theme Editor section by section (choose Collections → parent-collection-2), or you can copy all the settings from the Home page and then update the sections with the collections and products that belong to the second top-level category.
index.jsonindex.jsontemplates/collection.parent-collection-2.jsonCreate a duplicate of the existing template for the next top-level category to maintain consistency in layout and user experience: go to Collections → Create template, enter a name, and select parent-collection-2 in the Based on dropdown.
Repeat the process for all top-level categories.
<aside> 💡
Optional: You can set up a minimalist Home page template as the hub page that directs users to individual landing pages, and assign all top-level categories to collection templates.
Hub page example:
</aside>
Assign templates to collections: