Foxify - Smart page builder
Try Foxify freeResourcesOther solutions
  • About Foxify
    • What is Foxify?
    • Account & Billing
      • Free trial
      • Pricing plans
      • Use discount code
      • Change your plan
      • Uninstall Foxify
    • Changelog
    • Terms & Policies
  • Getting started
    • How to install Foxify
    • Quick start guide
    • Analytics
    • App extensions
      • Age Verifier
      • Ajax Add to Cart
      • Countdown Timer
      • Inventory status
      • Product Options Swatches
      • Quick View
      • Recently Viewed Products
      • Storefront Filters
    • Global styles
    • Pages list
      • Templates
      • Save a page as a template
      • Create a Home page
      • Create a Product page
      • Create a Collection page
      • Create a Landing page
      • Create a Blog post
    • Import & Export pages
    • Translation
  • FoxStudio 🔥
    • What is FoxStudio
    • FoxStudio editor
    • FoxStudio tools
      • Autosave
      • Grids guide and Snap lines
      • Pan & Zoom mode
      • Inspector panel
      • Layers
      • Layout template 🧩
      • AI responsive ✨
      • Prettify
      • Keyboard shortcuts
      • Undo & Redo
      • SEO checker
    • Working with Pages
      • Page settings
      • Edit a Section
      • Add a Section
      • Animations
      • Save and re-use Assets
    • Working with Elements
      • Add and Edit Elements
        • Text
        • Button
        • Image
        • Video
        • Countdown timer
        • Marquee text
        • Newsletter form
        • Contact form
        • List items
        • Slideshows
        • Tabs
        • Collapsible content
        • Testimonials
        • Navigation
      • Cells and grids
      • Constraints
      • Frame Elements
      • Resize an Element
      • Stack Elements
      • Copy & Paste Elements
    • FoxTransfer - Clone web design to Foxify
  • 🔥Figma to Shopify with Foxify
  • Legacy editor
    • Page Editor
      • General settings
      • Styles settings
    • Sections & Presets
      • Before/ After slider
      • Blog posts
      • Collapsible content
      • Buy Now button
      • Collection list
      • Collection tabs
      • Countdown timer
      • Custom section
      • Favorite products
      • Featured product
      • Featured collection
      • Google Map
      • Handpicked products
      • Image banner
      • Image cards
      • Image with text
      • Lookbook
      • Multicolumn
      • Product tabs
      • Scrolling promotion
      • Slideshow
      • Tabs
      • Testimonials
    • Foxify layout
      • Menus
      • Link menus to Foxify layout
    • Advanced features
      • Custom code
      • Check SEO score
      • Keyboard shortcuts
      • Page revisions
      • Undo & Redo
  • Section design
    • Create a Theme Section
  • AI-powered fox magic
    • What is Fox Magic? ✨
    • All about credit
  • Build for Success series
    • Home page 🔥
    • Product page 🔥
    • Landing page 🔥
    • Custom sections with Legacy editor
      • Video hero section like Swarovski
      • Featured collections showcase like Puma
      • Multi-column section like SkinnyTeatox
      • Newsletter section like Emmabridgewater
      • Scrolling promotion like Elementmatcha
      • Testimonial section
  • FAQs
    • Foxify Free plan is sunsetting
    • How to report an issue
    • How to change the app language 🌍
    • Pick a theme to work with Foxify
    • Does Foxify work for all the pages in my store?
    • How to get API Secret key in Foxify
    • Completely remove Foxify code from my Shopify theme
    • Foxify Gen 2 Beta Test
    • How to join Foxify giveaway 2022
    • Edit your pages
      • Add custom font
      • Add custom icon
      • Change my page title and URL
      • Change the product prices' color
      • Create an anchor link
      • Create a parallax background
      • How to make rounded buttons
      • Set a page as Home page
      • Schedule your page to publish at a future date
      • Should I use Pixel, Rem, or Em?
      • Change the page background
  • Troubleshooting
    • Liquid error: Could not find asset snippets
    • Published page is not visible on live store
    • Compare-at prices do not show in live store
  • Shopify Apps Integrations
    • Air Product Reviews
    • DingDoong: Delivery + PickUp
    • Loox Product Reviews
    • LAI Product AliExpress Reviews
    • Wide Bundles - Quantity Breaks
    • Ai Loyalty, Email, Review, SMS
    • FoxKit AIO Upsell Cross-sell
    • Yotpo ‑ Product Reviews
    • Judge.me Product Reviews
    • BON Loyalty Program & Rewards
    • Kaching Bundles Quantity Break
Powered by GitBook
On this page
  • Menu
  • How to add a Menu element
  • How to edit a Menu element
  • Menu opener
  • Country/Language selector
  • How to add a Country/Language selector element
  • How to edit a Country/Language selector element
  • Cart link
  • How to add a Cart link
  • How to edit the Cart link element

Was this helpful?

  1. FoxStudio 🔥
  2. Working with Elements
  3. Add and Edit Elements

Navigation

PreviousTestimonialsNextCells and grids

Last updated 21 days ago

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

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:

  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.

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.

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:

  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.

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:

  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.

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.

  • 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:

  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.

How to edit the Cart link element

Steps:

  1. Select the element in the editor.

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

💡
Learn how to manage your store's menu in Shopify.
💖
👀
2. Store with a password
International sales toolsShopify Help Center
Managing languagesShopify Help Center
Logo
Logo