Foxify App
Foxify App
FoxstudioAdd and edit elements

Navigation

4 min read
image

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
image

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:

  1. In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.
  2. In Advanced elements, select Navigation.
  3. Drag the Menu element onto your canvas.
  4. Make necessary changes.
image

How to edit a Menu element

Steps:

  1. Select the element in the editor.
  2. 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.

image

🧐 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.

image
image
  • Show nested items: Enable to show nested menu items on dropdowns when hovering.
image

Design

Decide what you want to design:

  • Element container
image
  • Desktop dropdown
image

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:

  1. In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.
  2. In Advanced elements, select Navigation.
  3. Drag the Menu opener element onto your canvas.
  4. Make necessary changes.
image
image

You can also replace the default hamburger icon with a text button label.

image

Country/Language selector

image

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:

  1. In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.
  2. In Advanced elements, select Navigation.
  3. Drag the Country/language selector element onto your canvas.
  4. Make necessary changes.
image

How to edit a Country/Language selector element

Steps:

  1. Select the element in the editor.
  2. All the formatting tools for the element can be found in the Inspector panel.
image
  • Selector type: Select what you want to show to customers:
    • Country/region selector
    • Language selector
image

To manage your store's regions, check out Shopify Markets:

help.shopify.com
help.shopify.com
→

You can choose to display the currency code and/or flag in your selector.

image
image

To manage your store languages, check out Shopify help center:

help.shopify.com
help.shopify.com
→
image

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:

  1. In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.
  2. In Advanced elements, select Navigation.
  3. Drag the Cart link element onto your canvas.
  4. Make necessary changes.
image

💡 Tip: Make the cart icon easy to spot – top right is standard.

Steps:

  1. Select the element in the editor.
  2. All the formatting tools for the element can be found in the Inspector panel.
image
  • 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

Google map

Previous Page

Product card

Next Page

ON THIS PAGE

MenuHow to add a Menu elementHow to edit a Menu elementMain menuDirectionDesignMenu openerCountry/Language selectorHow to add a Country/Language selector elementHow to edit a Country/Language selector elementCart linkHow to add a Cart linkHow to edit the Cart link element

Was this helpful?