Solved

How can I add a clickable table of contents to my long blog post?

funanc1al
Tourist
6 0 1

Hi! I have a long Shopify blog including 17 sections and want to insert at the beginning a table of contents listing all 17 sections. If a user clicks on any one section titles, s/he lands there right away in lieu of having to scroll down forever tentatively. Here is what it looks like:

 

Table of Contents (if user clicks on Renaissance, s/he goes straight to the Renaissance section, skipping Citadel, Bridgewater etc.)

 

  • 1. Citadel
  • 2. Bridgewater
  • 3.Berkshire
  • 4. Renaissance
  • 5. Arkk etc.

 

How do I do this? 

Thanks in advance. 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1825 514 389

This is an accepted solution.

Hey @funanc1al,

 

Please follow these instructions. 

 

 

Ideally what you'd first want to do is, highlight the list item in the blog post editor and click on insert link.

ThePrimeWeb_0-1709138397558.png

 

Next in the "link to" option enter #(pound) followed by a unique identifier for this link. (I named it citadel, it just makes sense). The whole thing will be #citadel

ThePrimeWeb_1-1709138460067.png

 

 

Next identify the heading you want to move to. Make sure you check if it's Heading 1,2,3,4,5, or 6. 

In my case I chose Heading 2.

ThePrimeWeb_2-1709138602597.png

 

Click on "Show HTML"

ThePrimeWeb_3-1709138669822.png

 

 

Then look for the Title with the heading tag you chose. In my case I chose Heading 2, so the tag is h2, Heading 1 is h1, and so on.

 

ThePrimeWeb_4-1709138721541.png

 

Next, make sure you select the tag before the text starts and after the "h2" text, add a space and then type "id="citadel" (quotes inclusive). This time make sure to exclude the pound sign (#). 

 

ThePrimeWeb_5-1709138753829.png

 

 

Then hit save and test it. You'd  repeat the steps for the rest of the titles as well. Make sure each identifier is unique. 

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
1825 514 389

Hey @funanc1al,

Are you planning to do this by code?
There's some small tweaks you can do to achieve this. If the blog posts are already in your site, please provide the link so I can take a look and see how it would work.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
funanc1al
Tourist
6 0 1
Thanks for the prompt reply. Not much of a coder, but I'm open to all
options. The blog post is being finalized and has not been published yet,
although its structure/backbone is complete. Should be ready within a
couple of days. Will let you know.
funanc1al
Tourist
6 0 1

Hello, hope all is well. Just resuming work on my table of content. The document is available at https://funanc1al.com/blogs/funanc-al-for-creatives/17-best-hedge-funds-to-invest-with-or-emulate

The long Shopify blog includes 17 sections and Iwant to insert at the beginning a table of contents listing all 17 sections. If a user clicks on any one section titles, s/he lands there right away in lieu of having to scroll down forever. Here is what it looks like:

 

Table of Contents (if user clicks on Renaissance, s/he goes straight to the Renaissance section, skipping Citadel, Bridgewater etc.)

 

  • 1. Citadel
  • 2. Bridgewater
  • 3.Berkshire
  • 4. Renaissance
  • 5. Arkk etc.

I most appreciate any help.

Thanks,

Frederic

ThePrimeWeb
Shopify Partner
1825 514 389

This is an accepted solution.

Hey @funanc1al,

 

Please follow these instructions. 

 

 

Ideally what you'd first want to do is, highlight the list item in the blog post editor and click on insert link.

ThePrimeWeb_0-1709138397558.png

 

Next in the "link to" option enter #(pound) followed by a unique identifier for this link. (I named it citadel, it just makes sense). The whole thing will be #citadel

ThePrimeWeb_1-1709138460067.png

 

 

Next identify the heading you want to move to. Make sure you check if it's Heading 1,2,3,4,5, or 6. 

In my case I chose Heading 2.

ThePrimeWeb_2-1709138602597.png

 

Click on "Show HTML"

ThePrimeWeb_3-1709138669822.png

 

 

Then look for the Title with the heading tag you chose. In my case I chose Heading 2, so the tag is h2, Heading 1 is h1, and so on.

 

ThePrimeWeb_4-1709138721541.png

 

Next, make sure you select the tag before the text starts and after the "h2" text, add a space and then type "id="citadel" (quotes inclusive). This time make sure to exclude the pound sign (#). 

 

ThePrimeWeb_5-1709138753829.png

 

 

Then hit save and test it. You'd  repeat the steps for the rest of the titles as well. Make sure each identifier is unique. 

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
funanc1al
Tourist
6 0 1

It works. Thank you so much!