The Scrollspy navigation section in Maison creates a sticky navigation bar that helps customers jump between sections on the same page.
It is especially useful for long pages such as:
- Product detail pages
- Landing pages
- Brand storytelling pages
- Buying guides
- Long editorial pages
When a customer clicks a navigation item, Maison smoothly scrolls to the linked section. If Highlight the current section is enabled, the matching navigation item is highlighted automatically while the customer scrolls through the page.
Section overview
A Scrollspy navigation section contains Navigation item blocks.
Each Navigation item includes:
| Setting | Description |
|---|---|
| Title | The text displayed in the navigation bar. |
| Target section ID | The HTML ID of the section or element the item should scroll to. |
The section also provides:
| Setting | Description |
|---|---|
| Highlight the current section | Highlights the navigation item that matches the section currently being viewed. |
| Back to top button | Displays a button that scrolls customers back to the top of the page. |
| Color override | Lets you apply section-specific colors. |
| Section width | Controls the width of the navigation area. |
| Section divider | Adds a divider to the section. |
| Spacing | Controls spacing around the navigation. |
Available Section width options are:
- Narrow
- Page
- Fluid
- Full
STEPS:
1. Prepare the sections you want to link to
Before setting up Scrollspy navigation, decide which sections on the page should appear in the navigation.
For example:
| Navigation item | Target content |
|---|---|
| Craft | Video banner and craftsmanship content |
| The look | Shop the look section |
| Designer | Designer story section |
Each navigation item must point to an HTML id that exists on the same page.
The target ID must be entered without the # symbol.
Correct:
shopline-section-template--product__shop-the-look
Incorrect:
#shopline-section-template--product__shop-the-look
2. Find the Target section ID
SHOPLINE adds an HTML ID to section wrappers on the storefront.
To find the target ID:
- Open the page you want to configure on your storefront or theme preview.
- Right-click the target section.
- Select Inspect in your browser.
- Find the outer section wrapper.
- Locate its
idattribute. - Copy the ID value only.
- Do not copy the
#symbol.
A Maison Product template section ID can look similar to:
shopline-section-template--product__shop-the-look
Other Product templates may include the template name.
For example:
shopline-section-template--product--chairs__shop-the-look
Use the exact ID shown on the page you are configuring.
3. Add the Scrollspy navigation section
To add Scrollspy navigation:
- Open the Maison theme editor.
- Open the template where you want to use the navigation.
- Click Add section.
- Select Scrollspy navigation.
- Move the section to the position where you want the sticky navigation to begin.
- Add your Navigation item blocks.
- Click Save.
Recommended placement:
| Page type | Recommended position |
|---|---|
| Product page | Before the long content sections that customers will navigate through |
| Landing page | After the main hero/banner and before the linked content |
| Editorial page | Before the first section included in the navigation |
The section becomes sticky when customers scroll past its original position.
4. Add Navigation item blocks
Add one Navigation item for each destination you want to include.
To add an item:
- Open the Scrollspy navigation section.
- Click Add block.
- Select Navigation item.
- Enter the visible label in Title.
- Enter the matching HTML ID in Target section ID.
- Repeat for the remaining items.
- Click Save.
Example:
| Title | Target section ID |
|---|---|
| Craft | shopline-section-template--product__video-banner |
| The look | shopline-section-template--product__shop-the-look |
| Designer | shopline-section-template--product__image-with-text |
The Title can be different from the target section's actual name.
For example:
Title: The look
Target section ID: shopline-section-template--product__shop-the-look
5. Link one Navigation item to multiple sections
Maison allows one Navigation item to represent multiple related sections.
Enter multiple IDs in Target section ID, separated by commas.
For example:
shopline-section-template--product__video-banner, shopline-section-template--product__multicolumn
This is how the Maison demo configures the Craft navigation item.
When multiple target IDs are used:
- Clicking the navigation item scrolls to the first valid target.
- The item remains highlighted while the customer is viewing any of the listed target sections.
This is useful when one navigation label represents a group of related content.
Example:
Craft
├── Video banner
└── Multicolumn
Both sections can belong to the same Scrollspy navigation item.
6. Enable Highlight the current section
Enable Highlight the current section to show which linked section the customer is currently viewing.
When enabled:
- Maison checks the target sections while the customer scrolls.
- The matching Navigation item receives the active state.
- If one Navigation item contains multiple target IDs, it stays active while any matching target section is being viewed.
For example:
Craft | The look | Designer
────────
If the customer is viewing the Shop the look section, The look becomes active.
The active link also receives an accessibility state so assistive technology can identify the customer's current location.
7. Enable the Back to top button
Maison includes a Back to top button setting directly in the Scrollspy navigation section.
When enabled, Maison adds a Back to top control at the end of the navigation bar.
When customers click it:
- The page scrolls back to the top.
- Smooth scrolling is used when motion is allowed.
- If the visitor has reduced-motion enabled, Maison scrolls without the smooth animation.
The Maison Product demo has the Back to top button enabled.
8. Understand sticky behavior
Scrollspy navigation is designed to remain visible while customers move through long page content.
When the navigation reaches the top of the viewport:
- It becomes sticky.
- Maison automatically accounts for the height of the Scrollspy navigation when scrolling to a target.
- A small additional offset is applied so the target content is not positioned directly underneath the sticky navigation.
This helps keep the beginning of each target section visible after a navigation item is clicked.
9. Scrollspy navigation and the Sticky header
Maison automatically coordinates Scrollspy navigation with the theme's Sticky header.
Depending on the Header sticky mode:
- Scrollspy navigation can sit below the sticky Header.
- Maison can temporarily move the Header out of the way when the Scrollspy navigation takes over the sticky position.
- When the customer scrolls back above the Scrollspy navigation, the Header returns to its normal sticky behavior.
This prevents the Header and Scrollspy navigation from permanently overlapping each other.
10. Understand mobile behavior
When there are more navigation items than can fit across the screen, Maison makes the navigation horizontally scrollable.
Customers can swipe left or right to access the remaining items.
Maison also displays subtle edge fades when more navigation content exists outside the visible area.
This behavior is automatic.
For the best mobile experience:
- Keep Navigation item titles short.
- Avoid adding unnecessary navigation items.
- Group related sections using multiple Target section IDs when appropriate.
11. Configure Color override
Enable Color override when the Scrollspy navigation should use colors different from the surrounding page.
Available color controls include:
- Text color
- Background color
- Background gradient
- Button text color
- Button background color
- Button gradient
- Overlay color
- Overlay opacity
The Maison Product demo uses a custom light background for its Scrollspy navigation.
If Color override is disabled, the section follows the theme's normal color system.
12. Configure Section width
Maison provides four Section width options:
| Option | Description |
|---|---|
| Narrow | Uses a compact content width. |
| Page | Uses the standard page width. |
| Fluid | Uses a wider fluid layout. |
| Full | Allows the section to use the full available width. |
The default is:
Page
Choose a width that matches the sections surrounding the Scrollspy navigation.
13. Configure Section divider and spacing
Use Section divider to add a divider along the Scrollspy navigation area.
The section also includes Spacing settings for controlling padding around the navigation.
The Maison Product demo:
- Disables the Section divider
- Adds larger horizontal spacing on desktop
- Removes horizontal spacing on mobile so the navigation can use the screen width more efficiently
You can adjust these settings to suit your page layout.
Maison demo setup
Maison uses Scrollspy navigation on its Product templates.
The default Product template follows this structure:
Scrollspy navigation
├── Craft
│ ├── Video banner
│ └── Multicolumn
├── The look
│ └── Shop the look
├── Designer
│ └── Image with text
└── Back to top
The Navigation item setup is similar to:
| Navigation item | Target sections |
|---|---|
| Craft | Video banner + Multicolumn |
| The look | Shop the look |
| Designer | Image with text |
The demo also uses:
- Highlight the current section: Enabled
- Back to top button: Enabled
- Color override: Enabled
- Section divider: Disabled
- Section width: Page
How Scrollspy navigation works
Customer scrolls the page
│
└── Scrollspy navigation reaches the top
│
└── Navigation becomes sticky
│
├── Customer clicks a Navigation item
│ ├── Find the first valid Target section ID
│ ├── Scroll to the target
│ └── Offset the position for the sticky navigation
│
├── Customer continues scrolling
│ └── Highlight matching Navigation item
│
└── Customer clicks Back to top
└── Scroll back to the top of the page
Recommended setup
For the best experience:
- Place Scrollspy navigation before the content it controls.
- Use short, descriptive Navigation item titles.
- Copy the exact HTML section ID from the same template.
- Do not include
#in Target section ID. - Use commas when one Navigation item represents multiple related sections.
- Enable Highlight the current section for long pages.
- Enable Back to top button when the page contains substantial content.
- Test the navigation on both desktop and mobile.
- Recheck target IDs if you recreate or substantially change the template structure.
Notes and limitations
Please note the following behavior:
- Scrollspy navigation works only with targets on the same page.
- Each Navigation item requires a Title to display.
- Each Navigation item needs a valid Target section ID to scroll correctly.
- Target IDs should be entered without
#. - Multiple IDs can be entered in one item, separated by commas.
- Clicking an item with multiple IDs scrolls to the first valid target.
- Highlighting remains active while any target assigned to the item is being viewed.
- If a target ID does not exist, Maison skips it when looking for a valid scroll destination.
- If none of the configured target IDs exist, clicking the item does not scroll to a section.
- The Scrollspy navigation itself is sticky.
- Maison automatically coordinates it with the Sticky header.
- The navigation becomes horizontally scrollable when its content exceeds the available width.
- Smooth scrolling respects the visitor's reduced-motion preference.
- The section cannot be added to Header, Footer, or custom Overlay groups.
Troubleshooting
If Scrollspy navigation does not work correctly, check the following:
- Make sure the Scrollspy navigation section is added to the correct template.
- Make sure each Navigation item has a Title.
- Make sure each Navigation item has a Target section ID.
- Make sure the target exists on the same page.
- Do not include
#in the Target section ID. - Copy the complete ID exactly as it appears in the storefront HTML.
- If using multiple target IDs, separate them with commas.
- If clicking an item does nothing, inspect the page and confirm that at least one configured target ID exists.
- If the wrong section opens, check the order of multiple target IDs. Maison scrolls to the first valid target.
- If the active item does not change while scrolling, make sure Highlight the current section is enabled.
- If highlighting works only for part of a content group, add the other related section IDs to the same Navigation item.
- If navigation works on one Product template but not another, check the target IDs again because SHOPLINE section IDs can differ between templates.
- If the navigation looks crowded on mobile, shorten the titles or group related sections under one item.
- If the navigation overlaps page content unexpectedly, check where the Scrollspy navigation section is positioned in the template.
- Save your changes and test both clicking and manual scrolling on desktop and mobile.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Free Shipping Message in Maison
How to Set Up Store Locations in Maison