ZEST theme
Try Zest freeResourcesOther solutions
  • What is Zest theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Zest theme
    • Set up my store as Zest demo
    • Update Zest theme
    • Theme license & Transfer
  • build for success series
    • Landing page like puravida
  • Page's global sections
    • General settings
    • Announcement bar
    • Banner logo 🔥
    • Header
    • Footer
    • Menu
      • Add a banner to mega menu
      • Add products to mega menu
      • Add collections to mega menu
      • Add custom cards to mega menu
      • Customize a hovering menu
    • Mobile navigation bar
    • Age verifier pop-up
    • Pop-up
  • Theme sections
    • Auto-scrolling promotion
    • Before/ After image slider
    • Blog posts
    • Collage tab
    • Collapsible tab
    • Collection list
    • Collection list slider
    • Collections showcase 🔥
    • Collection tab
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid & HTML
    • Favorite collection 🔥
    • Favorite products
    • Featured product
    • Featured product slider
    • Featured collection
    • Gallery images
    • Handpicked products
    • Highlight text with image 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider
    • Layered images 🔥
    • Logo list
    • Lookbook
    • Map
    • Mixed image cards 🔥
    • Multicolumn
    • Newsletter
    • Products bundle
    • Product tabs
    • Promotion banner 🔥
    • Press
    • Rich text
    • Slideshow
    • Testimonials
    • Video
    • Video hero
  • Theme settings
    • General settings
    • Animations
    • Cart
    • Checkout
    • Color swatches
    • Colors & Color schemes
    • Currency format
    • Cookies banner
    • Layout
    • Product card
    • Product quick view
    • Search
    • Social media
    • Theme style
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Product description
      • Breadcrumbs
      • Product information
      • Recently viewed products
      • Product recommendations
      • Quick order list 🔥
    • Collection page
      • Collection template
      • Collection sections
        • Collection banner
        • Product grid
    • Collections list page
  • Languages & Countries/Regions
    • Languages
    • Countries/ Regions
  • Other pages
    • 404 page
    • About us
    • Blogs
    • Blog posts
    • Cart & Checkout
    • FAQs page
    • Password
    • Search page
  • FAQs
    • Generic
      • Add custom fonts
      • Add custom CSS
      • Add custom badges to the product card and product page
      • Add gift wrap option to my cart
      • Add product review apps to my theme
      • Change the copyright text at the footer
      • Compare Zest with other Shopify themes
      • Does Zest support RTL languages?
      • JavaScript events for developers 🔥
      • How to migrate your Zest theme to version 7.0.0
      • My store has a low speed score - How can I improve it?
      • Show Payment icons on the Footer 🔥
    • Product page
      • Add a size chart to your product page
      • Add recipient fields to my gift card product
      • Edit product breadcrumbs using metafields
      • Set up quantity rules and volume pricing 🔥
    • Shopify functions
      • Combined listings app 🔥
      • Does Zest support Section groups?
      • Get to know dynamic checkout buttons
Powered by GitBook
On this page
  • What is the mobile navigation bar?
  • How to customize your mobile navigation bar?
  • Blocks settings
  • Section settings
  • Custom link settings
  1. Page's global sections

Mobile navigation bar

A guide to enable and customize the mobile navigation bar

PreviousCustomize a hovering menuNextAge verifier pop-up

Last updated 1 year ago

What is the mobile navigation bar?

The mobile navigation bar is a fixed navigation menu that remains visible at the bottom of the mobile screen as the users scroll up/down. A navigation bar helps your users navigate through your website with ease on limited mobile screens. It is different from the sticky header that appears on the top.

This article will help you set up the mobile navigation bar for your Shopify store.

How to customize your mobile navigation bar?

Steps:

  1. In the theme editor (Customize), click Mobile navigation bar

  2. Edit the settings

  3. Save.

Blocks settings

This section has four pre-built blocks: Home, Products, Search, and Cart. You can choose to show/hide one particular block based on your store's objectives.

  • Home: Get back to the home page.

  • All products: Redirect customers to the all product page.

  • Search: Let customers search for products.

  • Cart: Let customers check the items they have added or check out.

Section settings

You can show/hide the button labels by checking/unchecking the box.

You can also choose the cart type (drawer/page) and cart icon (shopping cart/shopping bag) for your mobile navigation bar. Locate Mobile navigation bar, choose Theme settings and make necessary changes.

Custom link settings

To show a custom link, you can follow these steps:

1. Block settings

In Mobile navigation bar section, choose Add block > Custom link.

2. Link settings:

In the custom link block, you can edit three elements:

  • Title: Fill in the title of the section you want to add to the mobile navigation menu (this will be shown as the button label).

  • Link: Paste a link or choose the section you want to add to the mobile navigation menu.

  • Icon: Choose your favorite icon.

Custom link: Redirect customers to an attached link page as desired, see more .

here
An example of the mobile navigation bar in Zest