How To Add A Table of Contents To A Shopify Blog

by Accessory To Success October 15, 2021

How To Add A Table of Contents To A Shopify Blog

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 we 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



Also in Tools

Frequently Asked Questions Table of Contents Shopify App
Frequently Asked Questions Table of Contents Shopify App

by Accessory To Success October 22, 2021

Read More
Table of Contents Shopify App For Blogs
Table of Contents Shopify App For Blogs

by Accessory To Success October 20, 2021

Adding a Table of Contents will improve user engagement. When someone lands on your blog posts they can quickly find what they are most interested in. Offering users a way to quickly find what they are looking for will improve time on page and bounce rate. These factors tell search engines that users find your site useful and improves your SEO. Fully customizable to match your theme desired look. Instantly applies to all blog posts. Exclude any posts with the click of a button.
Read More
Conversion Tracking for Shopify App in Google Analytics & Google Ads
Conversion Tracking for Shopify App in Google Analytics & Google Ads

by Accessory To Success July 30, 2021

In this article we’re going to show you everything you need to do in order to get Analytics tracking for your Shopify App Listing. There are 4 Steps to Shopify App Tracking: 1. Create a New Property in Analytics. 2. Add The Tracking ID To Your Shopify App Listing. 3. Tracking Shopify App Conversions. 4. Tracking Conversions In Google Ads
Read More