Navigation
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
Menu
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.”
On mobile, the menu is shown as a drawer.
How to add a Menu element
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.
How to edit a Menu element
Steps:
Select the element in the editor.
All the formatting tools for the element can be found in the Inspector panel.
Main menu
Select a menu from your Shopify admin > Content > Menus to display.
🧐 Not see any menus to select?
Make sure you provide your Storefront password in Foxify Settings > Account.
Direction
Set to display your menu items horizontally or vertically.
Show nested items: Enable to show nested menu items on dropdowns when hovering.
Design
Decide what you want to design:
Element container
Desktop dropdown
Menu opener
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.
You can also replace the default hamburger icon with a text button label.
Country/Language selector
Allow shoppers to view your site in their local language and currency with the Country/Language selector.
How to add a Country/Language selector element
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.
How to edit a Country/Language selector element
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.
To manage your store languages, check out Shopify help center:
Cart link
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.
How to add a Cart link
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.
💡 Tip: Make the cart icon easy to spot – top right is standard.
How to edit the Cart link element
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
Last updated