Add a category browser to your Shopify mobile app

A category browser lets shoppers find any collection in your Shopify mobile app in a couple of taps, and in MobiCart you add it to Home with no code. This tutorial covers every setting in the Builder and what shoppers see on iPhone and Android.

In short: on the Home page of the Builder, add the Category Browser block, pick the store menu it reads, style the chip row and the All button, set up the sheet, then preview and publish.

Watch the video tutorial #

Prefer to watch? This video walks through every step below, in the Builder and in the app.

What the category browser is #

The category browser is a Home block in two parts:

• A chip row of your categories, with an All button pinned on its left. Tapping a chip opens that collection.
• The All sheet, which opens from the All button: a search bar, a side rail of your top categories, and the selected category’s subcategories beside it.

It reads your store’s own menu, the same kind you build in Shopify for your website’s header. It is made for big catalogs: a store with hundreds of collections gets one tidy row on Home instead of a long list.

The category browser at a glance #

Setting	Options	Default
Menu	Any menu in your store	Main menu
Chips show	The menu’s top level, or Collections you pick (up to 20)	The menu’s top level
All button label	Your own text, up to 20 characters	All
All button icon	Grid, List, Menu, Dots	Grid
All button shows	Icon and label, Icon only, Label only	Icon and label
Shrink to its icon on scroll	On or off	On
All button style	Accent color, Like the other chips, Outline	Accent color
Chip content	Image and name, Name only, Image above the name, Image only	Image and name
Chip shape and style	Pill, Rounded, Square; Soft tint, Filled, Outline, Plain	Pill, Soft tint
Chip size and spacing	Small, Medium, Large; 2 to 16 pt	Medium, 6 pt
Sheet title	Up to 30 characters	Categories
Search bar	On or off, with a hint of up to 40 characters	On, “Search categories”
Rail	Width Narrow, Medium, Wide; selected item Accent bar or Tinted; images on or off	Medium, Accent bar, off
Subcategories	Banner on or off; 3 across, 2 across or List; images Rounded square, Circle, None	Banner on, 3 across, Rounded square
“Shop all” link, counts	On or off	Both on

Part 1: Set up the category browser in the merchant dashboard #

Step 1: Add the block to Home #

Open MobiCart from your Shopify admin and go to the Builder. On the Home page, click Add blocks and choose Category Browser.

While its settings are open, the phone preview shows the chip row and, under it, the All sheet, so you can see both parts as you change them.

Step 2: Choose the menu it reads #

The first setting is Menu. It starts on Main menu, the menu Shopify creates for every store. Pick another one if you keep a separate menu for the app.

Under the menu, the Builder sums up what the app can show from it, for example how many top-level categories it has and how many levels deep it goes. Edit your menus in Shopify admin under Online Store and then Navigation.

What the app takes from a menu:

• Collection links become categories, up to three levels deep.
• Product links open the product page.
• Links to pages or websites are left out.

If the menu links to no collections, the block stays hidden in the app.

Step 3: Decide what the chips show #

Chips show has two options:

• The menu’s top level: the chips follow the menu. The row shows up to 30 chips, and the All button opens the rest.
• Collections you pick: choose up to 20 collections for the row yourself, for example your best sellers. The All sheet still shows the whole menu.

Step 4: Set up the All button #

The All button sits on the left of the chip row and opens the sheet.

• All button label: up to 20 characters. “All” by default.
• All button icon: Grid, List, Menu or Dots.
• All button shows: Icon and label, Icon only, or Label only.
• Shrink to its icon on scroll: with Icon and label, the label hides once shoppers scroll the chips, and the button stays pinned on the left.
• All button style: Accent color, Like the other chips, or Outline.

Step 5: Style the chips #

• Chip content: Image and name, Name only, Image above the name, or Image only. Images come from your collections.
• Chip image shape: Circle or Rounded square.
• Chip shape: Pill, Rounded or Square. Chip style: Soft tint, Filled, Outline or Plain.
• Chip size: Small, Medium or Large. Chip spacing: 2 to 16 pt.
• Chip name width: Fit the name, Up to a width, or Same width for all. With a width, choose what Longer names do: cut off with …, or wrap to 2 lines.
• Chip color and Name color: From the color theme, which follows the app in light and dark, or Custom, which is used in both.

Step 6: Set up the All sheet #

• Sheet title: up to 30 characters. “Categories” by default.
• Search bar: searches the menu and every other collection in your store. Search hint is the text in the empty box, up to 40 characters.
• Rail width: Narrow, Medium or Wide. Selected rail item: Accent bar or Tinted. Images in the rail: on or off.
• Banner for the selected category: uses the collection’s image.
• Subcategory layout: 3 across, 2 across, or List. Subcategory images: Rounded square, Circle, or None.
• “Shop all” link: opens the selected category with everything in it.
• Show how many subcategories: a count above the subcategories.

Step 7: Preview, save and publish #

1. Save as Draft. A draft is only visible on your preview device.
2. Live preview. Scan the QR code with your phone to open your app in MobiCart Preview, then tap through the chips and the sheet.
3. Publish. This pushes the page live to your customers’ apps.

Building and previewing are free. See pricing for which platforms and features each plan includes. For the full launch steps, read Preview and publish your app.

Part 2: How the category browser works in the mobile app #

The chip row #

The chips sit on Home in the order of your menu, or of your picks. A tap opens that collection’s page, or the product for a product link in the menu. The row scrolls sideways; the All button stays on the left.

The All sheet #

The All button opens the sheet over Home:

• The rail on the left lists your top categories. Tapping one shows its subcategories beside it, with its banner, its count and the “Shop all” link.
• Tapping a subcategory closes the sheet and opens that collection.
• Search filters the menu as shoppers type, and from two letters it also looks through your store’s other collections.

Fast on big catalogs #

The app saves the menu on the phone, so the chips and the sheet open at once and refresh in the background. On a big menu it loads a category’s subcategories when a shopper selects it, so the sheet stays quick with hundreds of collections.

Colors and languages #

Chips, the All button and the sheet take your app’s color theme unless you set custom colors. The app’s own words, such as the sheet title and the search hint, follow the phone’s language; text you type yourself can be written per language with the Builder’s Languages control.

Recommended setups #

Store type	Menu	Chips show	Chip content
Fashion or lifestyle, with photos	Main menu	The menu’s top level	Image and name
Large catalog, many departments	A menu made for the app	The menu’s top level	Name only
A few hero collections	Main menu	Collections you pick	Image above the name
Seasonal promotions	A menu made for the app	Collections you pick	Image and name

Two rules hold for every store. Keep the All button visible, because it is the way into everything else. And give your collections images if you show them: an empty chip image looks unfinished.

Troubleshooting #

Problem	Cause	Fix
The block doesn’t show in the app	The menu links to no collections	Add collections to the menu in Shopify admin under Online Store, Navigation
A menu item is missing	It links to a page or a website	Link it to a collection or a product instead
A collection is missing	It isn’t published to the MobiCart sales channel	Publish the collection to MobiCart in Shopify
The Builder says the menu is no longer in your store	The menu was deleted in Shopify	Pick another menu
Chip images are blank	The collections have no image	Add an image to each collection in Shopify
Changes show on your phone but not for customers	The page is saved as a draft	Publish the page

Frequently asked questions #

Where does the category browser get its categories? #

From one of your Shopify store menus, Main menu by default. Collection links become categories, up to three levels deep.

Can I choose which chips appear on Home? #

Yes. Set Chips show to Collections you pick and choose up to 20. The All sheet still shows your whole menu.

How many chips does the row show? #

Up to 30 from the menu’s top level. The All button opens everything else.

Can shoppers search for a category? #

Yes. The sheet’s search bar searches the menu and every other collection in your store.

What is the difference between the category browser and Category Chips? #

Category Chips is a simple row of collection images. The category browser adds the All button and a full sheet with search, a rail and subcategories, read from your store menu, so it suits big catalogs.

Do I need to rebuild my menu for the app? #

No. It can read the menu your website already uses. Make a separate menu only if you want the app to show something different.

Does it work on iPhone and Android? #

Yes. One setup in the Builder drives both.

Need a hand? #

Book a free 30-minute demo and we will set up your category browser with you.