Collection Circle Menu Setup Guide

A circle menu can give shoppers a quick route into the main product groups. This setup uses clear category labels and one destination per item. Build the menu in KOBU after creating the collections, then use images that help customers distinguish the groups before they tap.

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 80 px width, 80 px height, 16 px gap, and 14 px label text. Keep the title visible. Save the theme.

Example settings

• The example uses blue SVG icons on a pale background. Use the same icon style for each item, or replace all icons with consistently framed product images.

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 collections belong together in a circle menu?

Choose categories at the same level. Mixing a broad department with a single product makes the menu hard to scan. Keep a short visible label under each image. An image of one example product should not suggest that the collection contains only that exact item.

1. List the main collections a new shopper needs and remove overlapping labels. Confirm each collection has useful published products.
2. Add the items to a KOBU circle menu and replace the sample paths with your actual collection destinations.
3. Use consistent image framing and keep the category text visible. Avoid packing promotional text into the image.
4. Place the menu where customers begin browsing and check it against the existing main navigation.

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

Check the finished setup

• Tap every item on a phone and confirm the destination title matches the menu label.
• Check that a long translated label does not become unreadable or obscure another item.
• Open a collection with few products and decide whether it deserves a main-menu position.

Common mistakes

• Do not use five visually similar lifestyle photos that hide the category differences.
• Do not add a collection destination that exists only as a draft or has no useful products.

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

• Mobile Navigation Menu Setup Guide
• Collection Subcategory Menu Setup Guide
• Seasonal Collection Menu Setup Guide

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