Circle Menu is a Shopify theme section in the Section Star library. Turn navigation into a visual experience — showcase your collections and products in a stunning circular layout that shoppers love to explore.
About the Circle Menu section
The Circle Menu section is a versatile and visually engaging component designed to enhance the user experience on your Shopify store. It allows you to display images or videos in a circular format, creating an attractive and organized layout for showcasing products, collections, or any other relevant content. The circles can contain media such as images and videos, with optional text and links, making it ideal for dynamic and interactive displays.
Live demo
Use cases
-
Product Display: Use the Circle Menu to showcase featured products, new arrivals, or top-selling items in an eye-catching circular grid. Each circle can link directly to the product page, helping to drive sales.
-
Collections Overview: Highlight different collections within your store, with each circle representing a distinct collection. Users can click on the circles to navigate to the respective collection pages.
-
Branding and Promotion: Incorporate promotional videos or images with relevant text to highlight sales events, discounts, or new product launches. The circular design adds an element of novelty to your promotional content.
-
Customer Testimonials: Display customer reviews and testimonials in a visually appealing circular format. Embed short video clips or images of happy customers along with their testimonials to build trust and credibility.
-
Event Highlights: If your store is involved in events or trade shows, use the Circle Menu to display highlights, photos, and videos from these events. This can help build community engagement and showcase your brand's active involvement.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Circle Design
Set the design of the section
| Setting | Type | Default |
|---|---|---|
| Circle Alignment | Text alignment | center |
| Subtle Shadow on Circle | Checkbox | On |
| Round Borders on Circle | Range | 50 |
| Show Ring on Circle | Checkbox | On |
| Border on Circle | Checkbox | On |
| Border Color | Color | #fff |
| Circle Size | Number | 150 |
| Mobile Circle Size | Number | 75 |
| Gap Between Images | Number | 25 |
| Mobile Gap Between Images | Number | 15 |
Mobile Display
Set the mobile display
| Setting | Type | Default |
|---|---|---|
| Mobile Display | Select (Scroll, Stacked) | scroll |
| Show Scrollbars | Checkbox | Off |
| Columns (when stacked) | Select (1 column, 2 columns, 3 columns) | 1fr |
Headline
Set text for the headline
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample Headline</b> |
| Text | Inline rich text | Use this block to add a description. … |
| Spacing between Headline and Features | Number | 15 |
Image block settings
| Setting | Type | Default |
|---|---|---|
| Ring Color | Color or gradient | linear-gradient(310deg, rgba(17, 189,… |
| Image | Image | — |
| Optional Text | Inline rich text | Menu Text |
| Optional Link | URL | — |
| Open in New Tab | Checkbox | Off |
Video block settings
| Setting | Type | Default |
|---|---|---|
| Ring Color | Color or gradient | linear-gradient(310deg, rgba(17, 189,… |
| Video | Video | — |
| Optional Text | Inline rich text | Menu Text |
| Optional Link | URL | — |
| Play Inline | Checkbox | On |
| Autoplay | Checkbox | On |
| Loop Video | Checkbox | On |
| Show Video Controls | Checkbox | Off |
| Mute Video | Checkbox | On |
Product block settings
| Setting | Type | Default |
|---|---|---|
| Ring Color | Color or gradient | linear-gradient(310deg, rgba(17, 189,… |
| Product | Product | — |
| Open in New Tab | Checkbox | Off |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Circle Menu”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.