How to use Scrollspy Navigation section in Concept theme?

• Go to your Shopify admin

• Navigate to Online Store > Themes

• Click Edit theme on your theme

  

• Open the page where you want to add scroll spy

• Click Add section and select Scrollspy navigation

  

Once added, the Scrollspy section should be placed at the position you choose. However, it will stick to its position as users scroll down

• Show active section highlight

  

  • Default: Enabled

  • What it does: Highlights the active navigation item as users scroll

  • Recommendation: Keep this enabled for better user experience

• Desktop content alignment

  

  • Options: Left, Center, Right

  • Default: Left

  • What it does: Controls where the navigation items appear on desktop screens

• Mobile content alignment

  

  • Options: Left, Center, Right

  • Default: Left

  • What it does: Controls where the navigation items appear on mobile devices

• Make section full width

  

  • Default: Disabled

  • What it does:

    • Disabled = Navigation stays within page content width
    • Enabled = Navigation spans the full browser width

  • Use case: Enable if you want the navigation to stretch across the entire screen

This creates a clickable link that takes users to a specific section. Below are its settings:

• Title

  

  • The text that appears in the navigation

  • Example: "Features", "Reviews", "Specifications"

• Target section ID

  

  • What is this for?

    • This field contains the ID(s) of the section(s) you want to track
    • When a visitor scrolls into the area of these sections, this navigation item will automatically highlight
    • Clicking this nav item will also smoothly scroll the page to the first target section
    • This is how the Scrollspy knows which nav item should be active as users scroll down the page

  • Format

    • Each section in Shopify has a unique ID
    • Format is usually: `shopify-section-template--xxxxx__section-name`
    • You need to find and copy this ID from your page

  • Pro tip

    You can target multiple sections with one nav item

    • Separate multiple IDs with commas
    • Example: template--123__section-1, template--123__section-2, template--123__section-3
    • The nav item will highlight when ANY of these sections are in view
    • Useful when you have related content split across multiple sections

  How to find section IDs?

This adds a button with an up arrow that takes users back to the top of the page.

• No configuration needed
• Automatically displays an arrow icon
• Limit: You can only add ONE "Back to top" button/block per Scrollspy section

1. Open your page in Chrome

   • Go to your live website or preview your theme
   • Navigate to the page where you added the sections

2. Open Developer Tools

   • Windows/Linux: Press F12 OR Ctrl + Shift + I
   • Mac: Press Cmd + Option + I

   • OR right-click anywhere on the page → Select " Inspect "

     

     

3. Activate the Element Selector

   

   • Click the "Select an element" icon (looks like an arrow in a box)
   • It's located in the top-left corner of the Developer Tools
   • OR press Ctrl + Shift + C (Windows) / Cmd + Shift + C (Mac)

4. Hover over the section you want to target

   • Move your mouse over the section on the page
   • The section will be highlighted with a blue overlay
   • You'll see the section's dimensions appear

5. Click on the section

   

   

   • The HTML will automatically jump to some element belonging to the section in the inspector and it will be highlighted with a light blue background
   • Trace back upward for the first line that starts with <div id="shopify-section-..."
   • Example: <div id="shopify-section-template--25840001483033__video-hero" class="shopify-section">

6. Copy the ID

   • The ID is everything after id="
   • In the example above, the ID is: shopify-section-template--25840001483033__video-hero . So you would copy: shopify-section-template--25840001483033__video-hero

   • Simply double click on the ID to select it then press Cmd + V (Mac) or Ctrl + V (Windows) to copy it.

     

First, enable Developer Tools (one-time setup):

1. Open Safari
2. Go to Safari menu → Preferences (or press Cmd + , )
3. Click the Advanced tab
4. Check the box: "Show Develop menu in menu bar"
5. Close Preferences

Then, to inspect elements:

1. Open your page in Safari

   • Go to your live website or preview your theme
   • Navigate to the page where you added the sections

2. Open Web Inspector

   • Mac: Press Cmd + Option + I
   • OR right-click on the page → Select "Inspect Element"
   • OR go to Develop menu → Show Web Inspector

3. Activate the Element Selector

   • Click the target icon in the top-left of the inspector
   • It looks like a crosshair or target symbol
   • OR press Cmd + Shift + C

4. Hover over the section you want to target

   • Move your mouse over the section on the page
   • The section will be highlighted with a colored overlay
   • You'll see a tooltip with element information

5. Click on the section

   • The Elements/DOM tree will automatically highlight that element
   • Look for the line with <div id="shopify-section-..."
   • Example: <div id="shopify-section-template--25840001483033__video-hero" class="shopify-section">

6. Copy the ID

   • Right-click on the id attribute
   • Select "Copy Attribute Value"
   • OR manually select and copy the ID value

• You're looking for:

  • A <div> element
  • With an id attribute
  • That starts with shopify-section-
  • Usually near the top of the HTML tree for that section

• Don't confuse with:

  • Class names (class="...") - these are NOT IDs
  • Other div IDs that don't start with shopify-section-
  • Child elements inside the section

• Problem: I can't find an ID starting with "shopify-section-"

  • Solution: Make sure you're clicking on the outermost wrapper of the section, not an element inside it. Try hovering higher up on the page.

• Problem: The element inspector isn't working

  • Solution: Refresh the page and try again. Make sure Developer Tools are fully loaded.

• Problem: There are multiple similar IDs

  • Solution: Each section has a unique ID. Make sure you're selecting the correct section by its content/position on the page.