Articles on: Quizell Smart Search & Menu

Styling & Configuring Your Mobile Menu

Introduction

Once your menu items are in place, you can fine-tune how the menu looks and behaves — its colors, layout style, sizing, scroll behavior, page visibility, and animations. This guide covers the Style, Size, and Behavior tabs of the menu editor.

(Adding and arranging menu items is covered in Building Your Mobile Menu.)

The mobile menu is part of Quizell Smart Search & Menu, a separate Shopify app from Quizell. It displays on mobile devices only, not desktop.

Where to find it

In your Shopify admin, open Apps → Quizell Smart Search & Menu → Menus
Click Edit on your menu to open the editor
Use the Style, Size, and Behavior tabs along the top

A live phone preview sits on the right and updates as you make changes.

Style tab

Color scheme

Choose Scheme 1, 2, or 3 for a quick preset.
Add Scheme to create your own.
Import website colors to pull your store's palette automatically — the fastest way to match your brand.
Adjust colors to fine-tune any scheme.

Pick the layout that fits your store from the available presets:

Most Popular, Highlight, Floating, Rounded, Boxed, and the Spotlight styles (Floating, Popup, Inner).

These are the same layout presets offered when you first create a menu — you can change your choice here at any time.

Submenu options — Depth Indicators

Choose the icon used to signal a submenu or nested level, so shoppers can tell which items expand.

Size tab

The Size Options sliders control the dimensions of the menu's elements (in pixels):

Icon/Image Size — the size of each item's icon or image
Text Size — the label text
Counter Size — the badge that shows cart count
Collapse icon Size — the expand/collapse control on items with submenus

Keep these legible on small screens — very small text or icons are hard to tap.

Behavior tab

Display Options

Show Menu Name — display item labels alongside icons
Hide when scrolling down on Mobile — hide the bar as the shopper scrolls down, then reveal it again; set the scroll distance with Hide the menu when the user scrolls down pixels (e.g., 150)
Show Parent Rounded — round the parent item's appearance

Control where the menu appears:

All pages — show everywhere
Exclude — show everywhere except the pages you list
Include — show only on the pages you list

Animations

Menu Animation — how the menu appears (e.g., Fade-in-Bottom)
Cart Counter Animation — how the cart badge reacts (e.g., Shake)

Custom CSS

The editor also has a Custom CSS tab for menu-specific styling tweaks. For app-wide custom code and settings, see App Settings, Custom Code & Languages.

Previewing your changes

The phone preview reflects your styling in real time. Use it to check how the menu looks before publishing, and remember to verify on an actual mobile device, since the menu doesn't appear on desktop. Use Reset to revert your changes.

Best practices

Import website colors for an instant, accurate brand match.
Choose a menu style intentionally — Spotlight styles draw attention to one key action; Floating and Boxed suit different layouts.
Keep sizes tappable. Don't shrink text or icons so far that they're hard to use on a phone.
Use hide-on-scroll to give shoppers more screen space while browsing.
Use page visibility to show the menu only where it helps — for example, excluding checkout.
Preview on mobile before considering it done.

Important notes

The mobile menu is mobile-only and does not display on desktop.
The Menu style presets here are the same ones offered in the creation wizard — change them anytime.
Manage menu visibility controls exactly which pages show the menu.
For advanced or app-wide custom code, see App Settings, Custom Code & Languages.

Troubleshooting

The menu's colors don't match my store

Use Import website colors, pick a different Scheme, or fine-tune with Adjust colors.

The menu shows on pages where I don't want it

Go to Behavior → Manage menu visibility for pages and use Exclude or Include.

The menu covers my content while scrolling

Enable Hide when scrolling down on Mobile and tune the pixel threshold.

Text or icons are too small or too large

Adjust the sliders on the Size tab.

What's next?

With your menu built and styled, it's ready to help mobile shoppers move around your store.

Updated on: 10/06/2026

Was this article helpful?

Thank you!