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.
To install the app go to the App Listing > click “Add App” to start the Free Trial
Once you Add the App, customize the look and features to your liking. To do so log into your Shopify store:
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.
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.
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.
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.
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.
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.
There is no option for font selection because the app is built to match your theme’s font selection.
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.
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.
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:
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.
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 firstname.lastname@example.org.
Comments will be approved before showing up.