A long landing page often contains multiple content sections, such as an introduction, product details, ingredients, reviews, FAQs, or a size guide. In this case, customers may need an easier way to jump between sections without manually scrolling through the whole page.
In Concept, you can use the Scrollspy navigation section to create a sticky navigation bar that links to specific sections on the same page.
When customers click a navigation item, the page smoothly scrolls to the matching target section. If Show active section highlight is enabled, the navigation item can also be highlighted while customers are viewing that section.
How to Set Up Scrollspy Navigation in Concept
STEPS:
1. Prepare the Sections You Want to Link To
Before adding the Scrollspy navigation section, first decide which sections on the page you want to include in the navigation.
For example, you may want to create a landing page with these sections:
| Navigation item | Target section |
|---|---|
| Overview | The first content section |
| Details | Product detail section |
| Ingredients | Ingredients or material section |
| Reviews | Customer reviews section |
| FAQ | Frequently asked questions section |
The Scrollspy navigation section works by scrolling to an HTML id on the same page. Each navigation item must have a Target section ID that matches the id of the section or element you want to scroll to.
Important:
- The target section must already exist on the same page.
- The target section must have a valid HTML
id. - The value entered in the Target section ID setting must not include
#.
Correct:
section-details
Incorrect:
#section-details
2. Find the Target Section ID
Each navigation item needs a target ID. This target ID must match the actual HTML id of the section or element on the storefront.
2.1 Use an existing Shopify section ID
Shopify automatically adds an ID to each section wrapper on the storefront. You can use this ID as the target section ID.
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open the page template where you want to use Scrollspy navigation.
- Add or arrange the sections you want customers to scroll to.
- Open the storefront preview for that page.
- Right-click the target section and click Inspect.
- Look for the section wrapper ID.
The ID may look similar to this:
shopify-section-template--123456789__rich_text_abc123
- Copy the ID value only.
- Do not copy the
#symbol.
Recommended setup:
| Field | Example value |
|---|---|
| Target section ID | shopify-section-template--123456789__rich_text_abc123 |
2.2 Use a custom target ID
If you have a custom HTML element on the page, you can also use your own ID.
Example:
<div id="section-details">
<!-- Your section content here -->
</div>
Then enter this value in the Target section ID setting:
section-details
Important:
For the active highlight to work reliably, the target should point to a real content area with visible height. A very small or empty anchor may scroll correctly, but it may not highlight the active navigation item as expected.
3. Add the Scrollspy Navigation Section
After preparing the target section IDs, add the Scrollspy navigation section to the page template.
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open the page template where you want to add Scrollspy navigation.
- Click Add section.
- Select Scrollspy navigation.
- Move the section to the position where you want the sticky navigation to appear.
- Click Save.
Recommended placement:
| Page type | Recommended position |
|---|---|
| Landing page | Near the top of the page, after the hero/banner section |
| Product detail page | Above the long product information sections |
| Custom page | Before the first section included in the navigation |
The Scrollspy navigation section is sticky, so it remains visible while customers scroll through the page.
4. Configure the Scrollspy Navigation Settings
After adding the section, configure the general settings.
| Setting | Purpose |
|---|---|
| Show active section highlight | Highlights the navigation item that matches the section currently being viewed. |
| Text alignment | Controls the navigation alignment on desktop. |
| Text alignment mobile | Controls the navigation alignment on mobile. |
| Text color | Controls the navigation text color. |
| Background color | Controls the navigation background color. |
| Background gradient | Adds a gradient background if needed. |
| Full width | Makes the section use the full page width. |
Recommended setup:
| Setting | Value |
|---|---|
| Show active section highlight | Enabled |
| Text alignment | Left or Center |
| Text alignment mobile | Left |
| Background color | A light color that separates the navigation from page content |
| Full width | Optional, depending on your page layout |
Important:
If you add many navigation items, the navigation may become horizontally scrollable on smaller screens. This is expected behavior and helps keep the menu usable on mobile.
5. Add Navigation Item Blocks
Next, add one Navigation item block for each section you want to link to.
- In the Scrollspy navigation section, click Add block.
- Select Navigation item.
- Enter the item label in the Title field.
- Enter the matching section ID in the Target section ID field.
- Repeat the same steps for each navigation item.
- Click Save.
Example setup:
| Navigation item title | Target section ID |
|---|---|
| Overview | section-overview |
| Details | section-details |
| Ingredients | section-ingredients |
| Reviews | section-reviews |
| FAQ | section-faq |
Important:
The Target section ID must exactly match the target section's HTML id.
Correct:
section-details
Incorrect:
Section Details
Incorrect:
#section-details
Add multiple target IDs to one navigation item
A navigation item can also target multiple section IDs by separating them with commas.
Example:
section-details,section-materials,section-care
In this case:
- Clicking the navigation item scrolls to the first ID in the list.
- The navigation item can stay active while customers are viewing any of the listed target sections.
This is useful when one navigation item represents a group of related sections.
6. Add the Back-to-Top Button
The Scrollspy navigation section also includes an optional Back-to-top button block.
- In the Scrollspy navigation section, click Add block.
- Select Back-to-top button.
- Place it before or after the navigation items.
- Click Save.
When customers click this button, the page scrolls smoothly back to the top.
Important:
Only one Back-to-top button block can be added to the Scrollspy navigation section.
Recommended setup:
| Block | Purpose |
|---|---|
| Back-to-top button | Lets customers quickly return to the top of the page. |
| Navigation item | Lets customers jump to a specific section on the same page. |
7. Preview the Scrollspy Navigation
After completing the setup, open the page on your storefront and test the navigation.
Check the following:
- The Scrollspy navigation appears on the page.
- The navigation stays sticky while scrolling.
- Each navigation item scrolls to the correct section.
- The page does not jump to the wrong position.
- The active item is highlighted when Show active section highlight is enabled.
- The Back-to-top button scrolls the page back to the top.
- The navigation is still usable on mobile.
Expected behavior:
| Action | Result |
|---|---|
| Customer clicks a navigation item | The page scrolls to the matching target section. |
| Customer scrolls through the page | The active navigation item updates automatically if highlighting is enabled. |
| Customer clicks the Back-to-top button | The page scrolls back to the top. |
| Customer views the page on mobile | The navigation can scroll horizontally if there are many items. |
8. Notes and Limitations
Please note the following behavior:
- Scrollspy navigation works for sections or elements on the same page only.
- It is not designed to link to sections on another page.
- Each navigation item needs a valid target section ID.
- The target ID must not include
#. - If a target ID is incorrect, the navigation item will not scroll anywhere.
- If Show active section highlight is enabled, the active state is based on the visible target section while scrolling.
- If the target element has no height or is only an empty anchor, the click action may work but the active highlight may not update reliably.
- Shopify-generated section IDs may change if a section is duplicated, removed, recreated, or moved to another template. If the navigation stops working after editing the template, check the target IDs again.
- The section automatically adjusts its sticky position when the theme sticky header is enabled.
- The navigation can become horizontally scrollable on mobile when there are many items.
Developer reference:
| File | Purpose |
|---|---|
sections/scroll-spy.liquid |
Adds the Scrollspy navigation section, settings, and blocks. |
assets/theme.js |
Handles smooth scrolling, Back-to-top behavior, and active item highlighting. |
assets/theme.css |
Controls the sticky layout, navigation style, scroll shadow, and button appearance. |
assets/mobile-dock.css |
Adjusts sticky positioning when mobile dock behavior is used. |
The section renders the navigation using the custom element:
<nav class="header__menu scroll-area scrollspy-nav inline-flex pointer-events-auto" is="scroll-spy">
Each navigation item uses the Target section ID value in data-target:
data-target="{{ block.settings.target_id | remove: ' ' | strip_newlines }}"
This means the value entered in the theme editor must match an existing HTML id on the page.
Troubleshooting
If the Scrollspy navigation does not work correctly, please check the following:
- Make sure the Scrollspy navigation section has been added to the correct page template.
- Make sure each Navigation item block has a title.
- Make sure each Target section ID is filled in.
- Make sure the target ID exists on the same page.
- Make sure the target ID does not include
#. - Make sure there are no extra spaces before or after the target ID.
- If using multiple target IDs, separate them with commas.
- If clicking a navigation item does nothing, inspect the target section and confirm that the copied ID is correct.
- If the wrong section is highlighted, check whether the target IDs are assigned to the correct navigation items.
- If the active highlight does not appear, make sure Show active section highlight is enabled.
- If the active highlight still does not work, make sure the target element has visible height and is not only an empty anchor.
- If the navigation overlaps the page content, move the section to a better position in the template.
- If the navigation becomes too crowded on mobile, reduce the number of navigation items or shorten the item titles.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Concept theme.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
Setup Show On Model Feature
How to setup color swatches CONCEPT theme