Section Nav is a Shopify theme section in the Section Star library. Add navigation between sections. Automatically navigates and updates selected based on screen position.
About the Section Nav section
The Section Nav is a versatile and customizable navigation section for your Shopify store. This section adds a secondary navigation bar, which is perfect for creating an intuitive and informative user experience. The navigation bar can feature various icons, customizable text and colors, and a sticky behavior that ensures the navigation stays accessible while scrolling pages.
Live demo
Use cases
- Product Catalogs: Improve the browsing experience by providing direct links to different product categories like "New Arrivals," "Best Sellers," and "Discounts."
- Special Promotions: Highlight sections for limited-time offers, seasonal sales, or exclusive deals, making it easy for customers to navigate to these sections.
- Customer Service: Add quick links to sections such as "Shipping Information," "Returns," "Customer Support," etc., to assist customers in finding essential information quickly.
- Multi-step Forms: Use it for navigating between steps of a multi-step form, enhancing the user's journey in complex processes like product customization or service registration.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Font
Set the fonts for your section
| Setting | Type | Default |
|---|---|---|
| Override theme fonts | Checkbox | Off |
| Text Font | Font | sans-serif |
| Text Size | Range | 15 |
| Mobile Text Size | Range | 15 |
| Text Color | Color | #111 |
Section Design
Set the display of section
| Setting | Type | Default |
|---|---|---|
| Show Section | Select (All Devices, Mobile Only, Desktop Only) | all |
| Background | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
| Background when Fixed | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
Container Design
Set the design for your inner container
| Setting | Type | Default |
|---|---|---|
| Container Background | Color or gradient | — |
| Container Background when Fixed | Color or gradient | none |
| Container Border Radius | Number | 0 |
| Max Width | Number | 1000 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 10 |
Navigation
Set the display of Navigation
| Setting | Type | Default |
|---|---|---|
| Active Link Style | Select (Bottom Border, Button) | button |
| Active Border Color | Color | #DDDDDD |
| Active Border Radius (for button display) | Number | 10 |
| Active Background | Color or gradient | linear-gradient(0deg, rgba(240, 240, … |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 20 |
| Spacing between Nav items | Number | 10 |
| Nav Icon Size | Number | 20 |
| Nav Icon Spacing | Number | 5 |
| Icon Color | Color | #ccc |
| Active Icon Color | Color | #0A7EDB |
| Nav Alignment | Text alignment | center |
| Hide until scrolled | Checkbox | Off |
Sticky Offset
Set the optional offset to account for header when scrolling
| Setting | Type | Default |
|---|---|---|
| Offset from Top | Number | 60 |
| Offset from Top (Mobile) | Number | 40 |
Thresholds
The % the section needs to be onscreen to activate the navigation
| Setting | Type | Default |
|---|---|---|
| Threshold | Range | 50 |
| Mobile Threshold | Range | 50 |
Navigation block settings
Navigation Link
Set the name and icon for your navigation. Navigation items automatically link to sections in the order they appear within the section hierarchy.
| Setting | Type | Default |
|---|---|---|
| Nav Name | Text | New Item |
| Nav Icon | Select (No Icon, Uploaded Image, Cart, Gift, Gift Card, Shipping…) | tag |
| Image | Image | — |
Advanced
Skip sections in the hierachy to link farther down the page
| Setting | Type | Default |
|---|---|---|
| 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 “Section Nav”.
- 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.