Navigation
Last updated
Was this helpful?
Last updated
Was this helpful?
Navigation elements in Foxify help your customers move through your store easily, whether on desktop or mobile.
Check out our pre-designed sections of Header for quick setup and inspiration.
Learn more: Add a Section
The Menu element lets you display a horizontal or vertical navigation bar on your storefront. It's the main structure for showing key site links like “Home,” “Catalog,” or “About.”
Steps:
In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.
In Advanced elements, select Navigation.
Drag the Menu element onto your canvas.
Make necessary changes.
Steps:
Select the element in the editor.
All the formatting tools for the element can be found in the Inspector panel.
Select a menu from your Shopify admin > Content > Menus to display.
Set to display your menu items horizontally or vertically.
Show nested items: Enable to show nested menu items on dropdowns when hovering.
Decide what you want to design:
Element container
Desktop dropdown
The Menu opener is a compact mobile-friendly navigation element that replaces the standard menu on smaller screens. It displays a hamburger icon which, when tapped, reveals the menu as a drawer.
Steps:
In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.
In Advanced elements, select Navigation.
Drag the Menu opener element onto your canvas.
Make necessary changes.
Allow shoppers to view your site in their local language and currency with the Country/Language selector.
Steps:
In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.
In Advanced elements, select Navigation.
Drag the Country/language selector element onto your canvas.
Make necessary changes.
Steps:
Select the element in the editor.
All the formatting tools for the element can be found in the Inspector panel.
Selector type: Select what you want to show to customers:
Country/region selector
Language selector
To manage your store's regions, check out Shopify Markets:
You can choose to display the currency code and/or flag in your selector.
Add a cart icon to your header. It optionally shows the number of items in the cart and links to either the cart drawer or the cart page.
Steps:
In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.
In Advanced elements, select Navigation.
Drag the Cart link element onto your canvas.
Make necessary changes.
Steps:
Select the element in the editor.
All the formatting tools for the element can be found in the Inspector panel.
Icon: Choose your preferred Cart icon style.
Toggle Show cart count if you want to display item quantity.
Select the Cart action:
Open cart drawer
Open cart page
Tip: Make the cart icon easy to spot – top right is standard.
