Circle Swap Menu is a Shopify theme section in the Section Star library. Make navigation a visual delight — showcase products and collections in a circular menu with a slick image swap on hover that keeps shoppers exploring.
Live demo
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 | — |
| Swap Image | Image | — |
| Optional Text | Inline rich text | Menu Text |
| Optional Link | URL | — |
| 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 Swap 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.