How To Add A Table of Contents To A Shopify Blog

by Accessory To Success October 15, 2021

With the Jump Links App you can quickly and easily add a customizable Table of Contents to your Shopify Blog. Currently the app offers a 7 day free trial, so there is no risk to giving it a try.

This App is operated in the United States and they have a team of very responsive and helpful service staff members that can answer questions, troubleshoot for you or even install the app on your behalf. A quick email can resolve most any issue.



Install The Table of Contents App

To install the app go to the App Listing > click “Add App” to start the Free Trial

jump links listing page
Once you Add the App, customize the look and features to your liking. To do so log into your Shopify store:

  1. Click “Apps” on the left >
  2. Then click the Jump Links app icon to open the Settings page

jump links installed app icon

Settings Breakdown

Run Engine

After customizing the design of your Table of Contents (How-To Guide below) you're ready to add it to your site. To add the Table of Contents to the all blog posts or just a new one, click the “Run Engine” button. Design changes and updates that we discuss below only require clicking the “Save” button.

jump links run engine button
After clicking “Run Engine” DO NOT make any changes to the blog until the Table of Contents is finished loading (30 minutes) as these changes in content may be lost while loading.

jump links run engine warning

Header Settings

If you would like the header above the table saying something like “Table of Contents” you’ll want to check this box and add the text you prefer. Should you change your mind and wish to remove it, simply uncheck the box and click Save at the bottom of the settings page.

jump links header settings

Counter

This feature gives you the option to choose what the Bullet List looks like. You have the option to choose between a numeric list or bullet points.

jump links counter

Position

The default for the Jump Links Table of Contents app is the absolute top of the page. This means right below the Title & Image (if there is one). If you commonly have introduction paragraphs for your blog posts and wish to have the Table of contents positioned below the introduction paragraph this is the option for you!

To position the Table of Contents above the first heading and right after the intro paragraphs, check this box.

jump links position

Smooth Scroll

Clicking a link in the Table of Contents will jump visitors down to that section of the blog. The Scroll Offset feature you see here will be important for blogs that have a top bar which may take up space at the top of the screen and cover the header visitors are scrolled down to. To solve for this, add a couple numbers to the scroll offset. This can customize the positioning to fit your site.

jump links scroll settings

Font

There is no option for font selection because the app is built to match your theme’s font selection.

Design Theme

This section is where you can quickly make the Table look the way you want. Our suggested settings are to make the background and border colors white and the Text and Link colors black.

Background color & Border color can match your blog background (like white), so they don’t show at all. Alternatively if you would like to add a border or background we suggest choosing colors that match your brand guidelines.

Title Color is the color you want the Header Text to be.

Link, Link Hover & Link Visited colors can all be different or the same for simplicity.

jump links design theme

Headings

Here you have the option to select which Headings you want to include in your Table of Contents. We recommend at least H1, H2, & H3.

jump links headings

No Table of Contents

Should you wish to remove the table of contents from any specific blog posts they will be listed here. If you change your mind and wish to add back a table of contents to a blog simply remove the ID from this section where it will be listed.

To remove the Table of Contents from a specific blog post, click:

  1. Online Store >
  2. Blog posts >
  3. Open the specific blog >
  4. More actions in the top right >
  5. Select “No Table of Contents”

jump links no table of contents

Save

Once you’re finished customizing the Table of Contents don’t forget to click “Save” and lastly click “Run Engine”. Don’t forget that after you click “Run Engine” you must wait 30 minutes to make any more changes to the blog.

jump links save button

Conclusion

The Jump Links Table of Contents app is built to improve customer experience by helping visitors find what they’re looking for faster. It’s run on a 3rd party AWS server, so it will not slow down your website. The app is recommended by Shopify customer service reps and functions perfectly on Shopify themes.

If you have any questions or trouble please don’t hesitate to send us an email support@accessorytosuccess.com.

 

Accessory To Success
Accessory To Success


Leave a comment

Comments will be approved before showing up.


Also in Tools

Luxury Scented Laundry Detergent Pods: Best Upgrade for Your Laundry?
Luxury Scented Laundry Detergent Pods: Best Upgrade for Your Laundry?

by Jack Thomas October 13, 2023

Experience the Ultimate Laundry Upgrade with our Luxury Scented Detergent Pods. Elevate your laundry routine to a new level of sophistication and freshness. Discover why these pods are the best choice for a fragrant and luxurious clean. Click now for laundry bliss!
Read More
Faux Book Storage Box: Innovative Solutions for Organizing Your Home
Faux Book Storage Box: Innovative Solutions for Organizing Your Home

by Jack Thomas October 10, 2023

Discover the secret to stylish and clutter-free living with Faux Book Storage Boxes! These ingenious solutions blend seamlessly into your decor while discreetly concealing your belongings. Say goodbye to messy spaces and hello to a chic and organized home. Explore our article for the ultimate home organization inspiration!
Read More
Laptop Screen Privacy for Writers: Essential Tips and Tools
Laptop Screen Privacy for Writers: Essential Tips and Tools

by Jack Thomas October 06, 2023

Protect your writing secrets! Dive into essential tips and tools for laptop screen privacy. Ensure your work stays yours. Read now!
Read More