Floating Menu is a Shopify theme section in the Section Star library. A persistent floating pill menu that stays on screen as shoppers scroll, highlighting the section they're viewing. Collapses to a fullscreen overlay on mobile.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Position
| Setting | Type | Default |
|---|---|---|
| Position | Select (Bottom, Top) | bottom |
| Alignment | Select (Left, Center, Right) | center |
| Offset From Edge | Number | 24 |
| Side Padding | Number | 16 |
| Z-Index | Number | 9997 |
| Scroll Offset | Number | 80 |
Pill Design
| Setting | Type | Default |
|---|---|---|
| Pill Background | Color or gradient | linear-gradient(164deg, #e9e9e9 0%, #… |
| Pill Radius | Range | 30 |
| Pill Padding Top/Bottom | Number | 8 |
| Pill Padding Left/Right | Number | 12 |
| Pill Border Size | Number | 0 |
| Pill Border Color | Color | #ddd |
| Pill Shadow | Checkbox | On |
| Gap Between Items | Number | 4 |
Links
| Setting | Type | Default |
|---|---|---|
| Override Theme Font | Checkbox | Off |
| Font | Font | sans-serif |
| Text Size | Range | 18 |
| Font Weight | Select (Normal, Semibold, Bold, Extra Bold) | 800 |
| Uppercase | Checkbox | On |
| Letter Spacing | Range | 0 |
| Text Color | Color | #111 |
| Active Text Color | Color | #fff |
| Active Background | Color or gradient | linear-gradient(164deg, #46a05f 0%, #… |
| Link Padding Top/Bottom | Number | 10 |
| Link Padding Left/Right | Number | 20 |
| Link Radius | Range | 22 |
Mobile
| Setting | Type | Default |
|---|---|---|
| Mobile Display | Select (Toggle Button + Fullscreen Overlay, Scrolling Pill) | overlay |
| Mobile Text Size | Range | 22 |
| Mobile Link Color (overlay) | Color | #111 |
| Mobile Item Gap (overlay) | Number | 24 |
| Overlay Background | Color or gradient | linear-gradient(164deg, #46a05f 0%, #… |
| Toggle Button Size | Number | 56 |
| Toggle Background | Color or gradient | linear-gradient(164deg, #46a05f 0%, #… |
| Toggle Icon Color | Color | #fff |
Link block settings
| Setting | Type | Default |
|---|---|---|
| Name | Text | Menu item |
| Link Type | Select (Jump to Section on Page, Custom URL) | auto |
| Custom URL | URL | — |
| Skip Sections | Number | 0 |
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 “Floating 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.