how to add a section of navigational buttons with links on my collection page

Store Design
, ,

Topic summary

A user wants to add navigational buttons with links to their collection page, sharing a screenshot as reference.

Proposed Solutions:

  • One respondent suggests using custom code but doesn’t provide implementation details
  • Another recommends using anchor links with href=“#id_name” in navigation buttons, paired with matching id attributes on target content sections
  • Bootstrap 4’s scrollspy feature is mentioned as an alternative approach for smooth section navigation

Example Structure:

<a href="#id_name">about</a>
<div id="id_name"></div>

Status: The discussion provides technical guidance but lacks complete implementation steps. The original poster hasn’t confirmed whether the solutions work for their specific platform or theme.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

how can i add something like this to my collection page? Plz help! thank you in advance.

截屏2023-06-2610.55.10.png
截屏2023-06-2610.55.10.png1064×296 105 KB

2

@LunaBling

This is code customization work!

Thanks!

3

and how to do that? can you elaborate?

4

Hi,

The simplest way is to just give the href #id_name in your navigation bar “a" tag link, and then give this href hash name to the content section id attribute where should be navigate to.

Then this will navigate to section where you have added this name as a id in the page.

Example

about

Now you can do this easily in this way also by helping of bootstrap version 4. Just goto bootstrap 4 documentation and scroll to section called spyscroll, then you can find the examples here.

Thank you.