How do I add an anchor link to the FAQ page?

Great question! This is a little more "advanced" but is straightforward enough. You'll basically just need to find and link to the section ID of each accordion.

How to find a section ID using devtools

Note: this is easier to do on a "live" page instead of in the theme editor/template, but both are possible.

  1. While on the FAQs page/template open your browser's dev tools
  2. With devtools open, hover and click into the section for which you are trying to find the ID in your browser window.
    • The section will be highlighted in the code and the frontend as you click through various chunks of text in devtools.
    • This may require a bit of clicking around and you may need to "expand" or "un-nest" parent containers in the theme editor
  3. Once you find the section you're looking for, you will see that it starts with something like "<section id="shopify-section-template--15276797132844__accordion-01"
    • Click into the id snippet of that code and copy this ID…
  4. Find the button for the block you are trying to link and paste this in as your link URL.
    • Note you must type a single hash ("#") into the "button link" setting before the section ID.
      • The hash tells the frontend that this URL is actually on the same current page, so the browser won't try to navigate to another/external URL.
      • So in the example above, I would have #shopify-section-template--15276797132844__accordion-01 as the URL in my button link.
  5. Repeat for the other sections as needed.

We've recorded a little example of this process which is available below:

👀 Screenshare showing how to find the a section ID using your browser's devtools.

Align theme

Leave a comment

Please note, comments need to be approved before they are published.