User Guide

Search limit to:






Circle menu #1 - #2 - #3 - #4

by Admin on Aug 18, 2025

A Circle Menu section is a type of visual navigation that presents products, collections, or other content in a circular or "bubble" format. It's a visually engaging and interactive component designed to improve the user experience and make it easier for customers to find what they're looking for.

1. Section Components

Section Circle menu Display products, collections, or other content in a circular format.
Available block Menu item Add individual product, collection or content to the section.

2. Location & Setup

To add & set up the Circle menu section:

  • Open the Shopify Theme Editor (Online Store > Themes > Customize)
  • Decide where you want to place the new section in Template.
  • Click "Add Section".
  • Select "OT: Circle menu (#number of variant)".

3. Highlight Features

  • Flexible customization options: Adjust headings, fonts, sizes, borders, and colors; fine-tune layouts for both desktop and mobile.
  • Carousel support: Add arrow navigation and pagination for a smooth browsing experience, especially on mobile.
  • Multiple layout variants: Choose from 5 pre-built Circle menu styles (#1 – #4 and default), offering versatility for different store designs.

4. Common Use Cases

🤔 How to set up Circle menu?

STEP 1: Add the section

Add Circle menu section to your desired position.

STEP 2: Add & customize Menu item blocks

Under Circle menu section, add Menu item blocks and open its settings panel:

  • Select an Image for the block item.
  • Paste a URL to redirect customers when clicking on the item.
  • Enter a Title for the item.

STEP 3: Customize general elements

Click on the Circle menu settings panel, then you can:

  • Put some words of the Heading into the square brackets [ ] for text highlight effect.
  • Adjust Heading size, Heading tag, Heading font.
  • Add some Text for further description about the section.

STEP 4: Click "Save" and preview.

🤔 How to customize the look of Circle menu section?

To modify the look of the section, follow this:

STEP 1: Click on the Circle menu settings panel.

STEP 2: Customize the Menu item elements:

Scroll down to Menu item setting group:

  • Choose the font, size, height, alignment, and spacing of the title on each menu item.
  • Toggle "Enable border" and adjust its thickness:
Enable border: OFF Enable border: ON
   
  • Adjust Image & border spacing (the menu item image and border) on desktop and mobile.

STEP 3: Customize Desktop/Mobile layout:

In the Desktop layout and Mobile layout setting groups:

  • Adjust item size and spacing.
  • Choose block width and section width.
  • Adjust padding.

STEP 4: Customize Color for the section:

In the Color setting group, choose colors for section elements such as heading, text, border…

STEP 5: Click "Save" when done.

🤔 How to customize carousel settings for the section?

STEP 1: Click on Circle menu to open its settings panel.

STEP 2:

Scroll down to the Carousel setting group, then:

  • Choose the position of navigation arrows at Show navigation arrows.
  • Select the size for the arrow button.
  • (Optional) Turn on section pagination (for mobile).

STEP 3: Click "Save" when done.

🤔 How to central align all the circles? 

STEP 1: Click on Circle menu to open its settings panel.

STEP 2: Scroll down to the Content Item setting, then select Center. 

STEP 3: Click "Save" when done.

5. Layout Recommendations

The Circle menu section has 5 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us!

📂 Circle menu

Check out demo here.

📂 Circle menu #1

Check out demo here.

📂 Circle menu #2

Check out demo here.

📂 Circle menu #3

Check out demo here.

📂 Circle menu #4

Check out demo here.

6. Support Information

Need help? Contact our support team at Omni Themes Support.