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.)
-
- Citadel
-
- Bridgewater
- 3.Berkshire
-
- Renaissance
-
- Arkk etc.
How do I do this?
Thanks in advance.
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.
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.
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.)
-
- Citadel
-
- Bridgewater
- 3.Berkshire
-
- Renaissance
-
- Arkk etc.
I most appreciate any help.
Thanks,
Frederic
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.
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
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.
Click on “Show HTML”
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.
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 (#).
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.
2 Likes
It works. Thank you so much!
Hey,
we have developed an app, which automatically creates your table of content in your blog posts. Maybe this helps you or others.
Ahoi Apps Table of Contents
