How to add a Table of Contents for your Blog Posts

Shopify Apps
1

Hi everyone,

I got kind of fed up with paying $4/month for a Table of Contents in my blog that didn’t look great and loaded external scripts.
So I made one here you can use for free: https://cardboardcathomes.com/blogs/behind-the-scenes/a-tool-to-add-a-table-of-contents-to-your-shopify-blog-post

Follow the instructions & use the generator tool at the bottom to make your own.

It’s pretty straightforward to use but here’s a video for more details: https://www.youtube.com/watch?v=2dTviqOH8oA

3 Likes
2

You must be referencing the app Jump Links the only Table of Contents App available in the Shopify App store :slightly_smiling_face:

We built the app due to frustration as well. We wanted a Table of Contents on our blog and there was literally no way to get it on our blog. So we built the app :slightly_smiling_face:

The $4 price is due to Shopify requiring apps be hosted on independent servers. This means it loads fast and won’t impact your site speed, but also costs money. Way more than $4 btw… Also the app is automated and extremely easy to use. There is also a very helpful development team on staff if there are issues :slightly_smiling_face: The app is customizable and matches the theme font, so no two Jump Links Table of Contents will look the same. That said, if you don’t like the look you can change it :slightly_smiling_face:

You may not be alone in thinking that $4 is a lot of money. We can explore lowering it, but after Shopify fees, development costs, customer service and server costs, we’re not over here printing money…

$4 seems like a reasonable cost for an optional tool that benefits a site’s SEO in many ways. Read more about the SEO benefits here: Benefits of a Clickable Table of Contents For Long Blog Posts On Shopify

2 Likes
3

My point is that $50/year is a lot to pay for a feature that took me a few hours to build (and I’m pretty rusty).

That’s what my completely free tool Table of Contents generator here does.

I don’t know why you’re saying it’s so fast when it requires loading additional files into a site. It doesn’t matter how they’re hosted when it’s completely unnecessary.

If you wanted to build a well-designed app:

  1. It would edit the blog files and inline the styles. The shopify api should support this: https://shopify.dev/api/admin/rest/reference/online-store/blog
  2. It would periodically check to see if new blog posts were added instead of requiring manually running it.
  3. Your independent server would maintain both edited and clean versions of each blog post to revert if something goes wrong.

Overall the shopify ecosystem has a long way to go. Apps like these have long been free for wordpress: https://wordpress.org/plugins/easy-table-of-contents/

3 Likes
4

Plak theme is the first to include the Table of content on their themes

5

Sorry I do not know how to add my own answer so I replied to yours, but yes I wanted to share this free Table of Contents generator. I hope this helps.

6

Sorry I didn’t see this post earlier, you can use it for free if you install the EComposer app. Please see instructions here

7

Finally Easy Table of Content (REALLY), the right way: https://apps.shopify.com/easy-table-of-content

:wink:

8

Hi everyone,

RuffRuff Table of Contents is free enough to use.

I hope this helps.

1 Like
9

I found a tool for this issue:

https://www.contentpowered.com/blog/table-of-contents-shopify/

10

Yup, found that months ago. Thanks.

11

I have published a super easy video on this topic. You may check this out.

12

page not found! Can you please reshare the link for the app?

13

In your main-article.liquid file (in Dawn, not sure on other themes), above the schema section add this code .. it will transform all H2 links into a TOC item, and insert the entire TOC above the first H2.
##########################################

#contents-container { background: #F3F9FF; padding: 15px 15px 15px 15px; border-radius: 5px; } #contents-container a { font-size: 16px; line-height: 1; } #contents-container h3 { margin: 0; margin-bottom: 10px; } #contents-container ul { padding: 0; margin: 0; padding-left: 15px; } #contents-container li { list-style: disclosure-closed; } html { scroll-behavior: smooth; }
14

Thanks a lot - you and chatgpt solved my problem for a free table of content for my impact-theme :slightly_smiling_face:
maybe not perfect, but solved my problem even with doubled headings in the content list

for all other with the impact theme - buySakinur-Rahman a coffee :wink:

#contents-container { background: #F3F9FF; padding: 15px; border-radius: 5px; } #contents-container a { font-size: 16px; line-height: 1.5; text-decoration: none; color: #333; } #contents-container a:hover { text-decoration: underline; } #contents-container h3 { margin: 0; margin-bottom: 10px; } #contents-container ul { padding: 0; margin: 0; list-style: none; } #contents-container li { list-style-type: none; margin-bottom: 5px; } html { scroll-behavior: smooth; }
1 Like
15

ok had to rework a little but now it work (at least for me) :wink: - if not, it is a good starting point

#contents-container { background: #F3F9FF; padding: 15px; border-radius: 5px; } #contents-container a { font-size: 16px; line-height: 1.5; } #contents-container h3 { margin: 0; margin-bottom: 10px; } #contents-container ul { padding: 0; margin: 0; padding-left: 15px; } #contents-container li { list-style-type: none; /* Entfernt den Marker */ } html { scroll-behavior: smooth; }
16

Hi @wucash

Glad that it helped you and thanks so much for sending two Coffees.

17

Hi, your links are down for some reason. Did you Table of Contents work? I noticed there isn’t one in your blog post: https://cardboardcathomes.com/blogs/info/how-to-get-your-cat-to-stop-scratching-furniture

18

Hi. It looks like your table of contents code is no longer available. Can you share it again?

19

I removed that Youtube video as I kept getting emails from people with different themes, but the Table of Content is included now in Scrowp theme