How to Set Up Scrollspy Navigation in Maison

Page

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:

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.