Mobile Navigation Menu Setup Guide

A mobile shortcut menu should reduce the work needed to reach common store destinations. This setup uses a small set of routes for browsing, search, cart, and help. Use KOBU’s mobile navigation options and test how the menu sits beside your theme’s existing controls.

Setup tutorial · KOBU · Updated 2026-09-07 · By Activory

Try the storefront example

Select a menu item to inspect its destination. Use Phone width to check the labels and layout. The example paths represent collections or pages you will create in your store.

This example uses KOBU storefront code with sample data and the settings below. Your theme’s fonts and available width can change the result. Example links show their destination; purchase controls use a sample cart. Use the checks below to confirm the finished setup in your store.

Build it in KOBU

1. Create the destination collections or pages in Shopify. Use the labels and paths below as your example plan. Confirm that each destination is published.
2. In KOBU, add each menu item to Group 1. Enter its title and destination. Add an SVG icon or your own image. Publish the items.
3. Open the page template in the Shopify theme editor. Add Kobu - Menu Highlight. Choose menu group 1 and the Circle shape.
4. Set Menu mode to Rows & Columns. Use 44 px width, 44 px height, 12 px gap, and 12 px label text. Set Fixed menu position to Bottom of the page. Keep the title visible. Save the theme.

Example settings

• The example shows a fixed bottom menu inside the example window. In the store it sits at the bottom of the browser window. Set Maximum screen size to Up to 480px when this menu should appear only on phones.

Sample data and content

Use these values for a test. Replace them with checked product data, published destinations, and offers that your store can supply.

Which destinations need a mobile shortcut?

Each shortcut should have a distinct purpose. A home link and a shop link are useful together only when they lead to different tasks. Keep labels short without replacing meaningful words with unexplained icons. Check overlap with chat buttons, cookie notices, and sticky purchase controls.

1. Choose the few routes that serve common phone tasks. Confirm that your store has the required search and support destinations.
2. Create the mobile menu in KOBU and use icons with text labels. Replace the help path if your store uses another route.
3. Configure mobile visibility and inspect the menu on product, collection, and cart pages.
4. Test the full add-to-cart route and make sure the menu does not cover the theme’s checkout or quantity controls.

Read the KOBU setup guide for the full app controls and placement options.

Check the finished setup

• Open the phone keyboard on the search page and check that the menu does not prevent text entry or submission.
• Check a long product page with any chat widget and sticky purchase bar enabled.
• Use each shortcut after scrolling and confirm that the destination remains correct.

Common mistakes

• Do not assume a generic cart link opens every theme’s cart drawer.
• Do not use an icon alone for a destination that customers may interpret in several ways.

Supported use

KOBU links shoppers to the destinations you configure. A menu label does not create a collection, apply a discount, reserve stock, or make a product suitable for a customer. Confirm each destination and its contents. Keep text labels visible so that images are not the only way to understand a link.

KOBU features, current app plans, and KOBU collection display rules explain the supported setup.

Related tutorials

• Collection Circle Menu Setup Guide
• Collection Subcategory Menu Setup Guide
• Sale Navigation Menu Setup Guide

Browse all KOBU tutorials. Read how the examples are made or report a correction.