{"id":5159,"date":"2022-03-24T15:11:15","date_gmt":"2022-03-24T09:11:15","guid":{"rendered":"https:\/\/dev2.betterdocs.co\/?post_type=docs&#038;p=5159"},"modified":"2024-07-04T20:07:34","modified_gmt":"2024-07-04T14:07:34","password":"","slug":"sticky-table-of-contents-with-betterdocs","status":"publish","type":"docs","link":"https:\/\/dev2.betterdocs.co\/es\/docs\/sticky-table-of-contents-with-betterdocs\/","title":{"rendered":"How To Add A Sticky Table Of Contents With BetterDocs?"},"content":{"rendered":"<p>Con <a href=\"https:\/\/apps.shopify.com\/betterdocs-knowledgebase\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>BetterDocs<\/strong><\/a>, you can add a <strong>Sticky Table Of Contents (TOC) t<\/strong>o your Single Doc page in Shopify. If you use multiple headings (or heading tags) in your documentation, this knowledge base app will include the headings inside the Table of Contents box that will stay afloat over the documentation page. The TOC allows your users to bounce back and forth between different sections in your document.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How To Add A Sticky Table Of Contents With BetterDocs?<\/strong><\/h2>\n\n\n\n<p>Follow the step-by-step guide below to learn how to add a sticky table of contents in single docs in just a few steps.&nbsp;<\/p>\n\n\n\n<p><strong><em>Nota: <\/em><\/strong><em>You must have BetterDocs for Shopify<\/em><strong><em> <\/em><\/strong><a href=\"https:\/\/dev2.betterdocs.co\/es\/docs\/install-betterdocs-for-shopify\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>installed and activated<\/em><\/strong><\/a><em> on your store to create the documents.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Enable The Table Of Contents<\/strong><\/h3>\n\n\n\n<p>To enable and add a Table Of Contents in your single documentation using BetterDocs, you need to first navigate to the <strong>&#039;Configuraciones&#039;<\/strong> tab from the app\u2019s homepage. Then, click on the <strong>\u2018Table Of Contents\u2019 <\/strong>option from the side panel.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1600\" height=\"724\" src=\"https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-20.gif\" alt=\"How To Add A Sticky Table Of Contents\" class=\"wp-image-12364\" title=\"\"><\/figure><\/div>\n\n\n<p>Now, <strong>\u2018Turn On\u2019<\/strong> the <strong>\u2018Table Of Contents\u2019<\/strong> button will be to show the table of contents on the document page.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"724\" src=\"https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-21.gif\" alt=\"How To Add A Sticky Table Of Contents\" class=\"wp-image-12365\" title=\"\"><\/figure><\/div>\n\n\n<p>Afterward, you can adjust the<strong> \u2018Content offset\u2019 <\/strong>and \u2018TOC supported heading tags and click on the <strong>\u2018Save\u2019 <\/strong>button again.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1360\" height=\"641\" src=\"https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-22.gif\" alt=\"How To Add A Sticky Table Of Contents\" class=\"wp-image-12366\" title=\"\"><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Configure The Table Of Contents<\/strong><\/h3>\n\n\n\n<p>To configure the TOC, go to the \u2018<strong>Design your TOC page<\/strong>\u2019 section and press on the \u2018<strong>Design now<\/strong>\u2019 option.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1360\" height=\"641\" src=\"https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-23.gif\" alt=\"How To Add A Sticky Table Of Contents\" class=\"wp-image-12367\" title=\"\"><\/figure><\/div>\n\n\n<p>Now, navigate to the left sidebar and select the \u2018<strong>Basic design<\/strong>\u2019. From here you can toggle the on or off the \u2018<strong>Enable toc hierarchy<\/strong>\u2019, \u2018<strong>Toc list number<\/strong>\u2019, and&nbsp; \u2018<strong>Enable sticky toc<\/strong>\u2019 options.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1360\" height=\"641\" src=\"https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-24.gif\" alt=\"How To Add A Sticky Table Of Contents\" class=\"wp-image-12368\" title=\"\"><\/figure><\/div>\n\n\n<p>You can customize the \u2018<strong>Sticky toc width<\/strong>\u2019, \u2018<strong>Sticky toc margin top<\/strong>\u2019, \u2018<strong>Background color<\/strong>\u2019, \u2018<strong>Content area padding<\/strong>\u2019 etc and click on the \u2018<strong>Save<\/strong>\u2019 button to make the Table of content more stunning.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1360\" height=\"673\" src=\"https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-7.png\" alt=\"How To Add A Sticky Table Of Contents\" class=\"wp-image-12369\" title=\"\" srcset=\"https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-7.png 1360w, https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-7-300x148.png 300w, https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-7-1024x507.png 1024w, https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-7-768x380.png 768w, https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-7-18x9.png 18w, https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-7-360x178.png 360w\" sizes=\"(max-width: 1360px) 100vw, 1360px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Advanced Control to Design The Table Of Contents<\/strong><\/h3>\n\n\n\n<p>Once you have enabled the TOC, you can design different aspects of the Table Of Contents to match your store\u2019s branding. To do so, click on the \u2018<strong>Design\u2019<\/strong> \u2192 \u2018<strong>List Item\u2019<\/strong> to customize them. Now<strong>.&nbsp;<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"724\" src=\"https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-25.gif\" alt=\"How To Add A Sticky Table Of Contents\" class=\"wp-image-12370\" title=\"\"><\/figure><\/div>\n\n\n<p>Now go to the right side, get <strong>\u2018Title font-size\u2019, \u2018List item font-size\u2019, \u2018TOC margin\u2019 <\/strong>and more options to design the TOC as your to your preferences. After customizing just hit on the <strong>\u2018Save\u2019 <\/strong>&nbsp;bot\u00f3n.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"724\" src=\"https:\/\/dev2.betterdocs.co\/wp-content\/uploads\/2024\/07\/image-26.gif\" alt=\"How To Add A Sticky Table Of Contents\" class=\"wp-image-12371\" title=\"\"><\/figure><\/div>\n\n\n<p>This is how easily you can add, configure, and design a <strong>Sticky<\/strong> <strong>Table Of Content <\/strong>on your Shopify account using BetterDocs.<\/p>\n\n\n\n<p>Still, facing difficulties? Feel free to <a href=\"https:\/\/storeware.io\/support\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>contact our dedicated support team<\/strong><\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Learn how to easily add a sticky Table Of content on your Documentation page to help users navigate easily. <\/p>","protected":false},"author":16,"featured_media":12369,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_analytify_skip_tracking":false,"footnotes":""},"doc_category":[309],"doc_tag":[10,230,14,23,69,54,53],"knowledge_base":[283],"year_month":"2026-05","word_count":408,"total_views":"3145","reactions":{"happy":"1","normal":"2","sad":"3"},"author_info":{"author_nicename":"tasnia","author_url":"https:\/\/dev2.betterdocs.co\/es\/author\/tasnia\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/dev2.betterdocs.co\/es\/docs-category\/configurations\/"}],"doc_tag_info":[{"term_name":"betterdocs","term_url":"https:\/\/dev2.betterdocs.co\/es\/docs-tag\/betterdocs\/"},{"term_name":"BetterDocs Knowledgebase Gutenberg","term_url":"https:\/\/dev2.betterdocs.co\/es\/docs-tag\/betterdocs-knowledgebase-gutenberg\/"},{"term_name":"configuration","term_url":"https:\/\/dev2.betterdocs.co\/es\/docs-tag\/configuration\/"},{"term_name":"customize","term_url":"https:\/\/dev2.betterdocs.co\/es\/docs-tag\/customize\/"},{"term_name":"Single Doc","term_url":"https:\/\/dev2.betterdocs.co\/es\/docs-tag\/single-doc\/"},{"term_name":"Sticky Table of Content","term_url":"https:\/\/dev2.betterdocs.co\/es\/docs-tag\/sticky-table-of-content\/"},{"term_name":"Table of Content","term_url":"https:\/\/dev2.betterdocs.co\/es\/docs-tag\/table-of-content\/"}],"author_list":[{"ID":"13","user_login":"abid@ar.com.bd","display_name":"Abid Hasan","id":"13"},{"ID":"8","user_login":"afrin","display_name":"afrin","id":"8"},{"ID":"4","user_login":"Afshana","display_name":"Afshana Diya","id":"4"},{"ID":"24","user_login":"Ahmed","display_name":"Ahmed Kawser","id":"24"},{"ID":"6","user_login":"akash","display_name":"akash","id":"6"},{"ID":"17","user_login":"alim","display_name":"Alim","id":"17"},{"ID":"18","user_login":"arshiana","display_name":"arshiana","id":"18"},{"ID":"1","user_login":"Asif","display_name":"admin","id":"1"},{"ID":"14","user_login":"Faguni","display_name":"Faguni","id":"14"},{"ID":"37","user_login":"Galib","display_name":"Galib Hayder","id":"37"},{"ID":"41","user_login":"Imtiaz","display_name":"Imtiaz","id":"41"},{"ID":"11","user_login":"Jamil","display_name":"Jamil Uddin","id":"11"},{"ID":"21","user_login":"jemima","display_name":"Jemima Naznin","id":"21"},{"ID":"25","user_login":"Mahbub","display_name":"Mahbub","id":"25"},{"ID":"20","user_login":"mahedi@ar.com.bd","display_name":"mahedi@ar.com.bd","id":"20"},{"ID":"39","user_login":"mahmudul","display_name":"mahmudul","id":"39"},{"ID":"32","user_login":"mamun","display_name":"Abdullah Mamun","id":"32"},{"ID":"19","user_login":"manzur","display_name":"manzur","id":"19"},{"ID":"9","user_login":"Mukul","display_name":"Mukul","id":"9"},{"ID":"35","user_login":"nadvi","display_name":"nadvi","id":"35"},{"ID":"33","user_login":"nahid","display_name":"Nahid Hasan","id":"33"},{"ID":"23","user_login":"Oishi","display_name":"Parsia Tabassum Oishi","id":"23"},{"ID":"36","user_login":"Popy","display_name":"Esrat Popy","id":"36"},{"ID":"5","user_login":"rafin","display_name":"rafin","id":"5"},{"ID":"34","user_login":"rasel","display_name":"Rasel","id":"34"},{"ID":"22","user_login":"Razthee","display_name":"Razthee","id":"22"},{"ID":"30","user_login":"rumi","display_name":"rumi","id":"30"},{"ID":"2","user_login":"Rupok","display_name":"Rupok","id":"2"},{"ID":"15","user_login":"sadab","display_name":"Sadab Khan","id":"15"},{"ID":"29","user_login":"Salauddin Rana","display_name":"Salauddin Rana","id":"29"},{"ID":"3","user_login":"Shahan","display_name":"Shahan","id":"3"},{"ID":"31","user_login":"shahidul","display_name":"Shahidul Islam","id":"31"},{"ID":"28","user_login":"Shaikat","display_name":"Shaikat","id":"28"},{"ID":"10","user_login":"sumaiya","display_name":"sumaiya","id":"10"},{"ID":"12","user_login":"tanaz","display_name":"Tanaz","id":"12"},{"ID":"16","user_login":"tasnia","display_name":"Tasnia","id":"16"},{"ID":"38","user_login":"tomal","display_name":"Towfique Ahmed","id":"38"}],"_links":{"self":[{"href":"https:\/\/dev2.betterdocs.co\/es\/wp-json\/wp\/v2\/docs\/5159"}],"collection":[{"href":"https:\/\/dev2.betterdocs.co\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/dev2.betterdocs.co\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/dev2.betterdocs.co\/es\/wp-json\/wp\/v2\/users\/16"}],"version-history":[{"count":11,"href":"https:\/\/dev2.betterdocs.co\/es\/wp-json\/wp\/v2\/docs\/5159\/revisions"}],"predecessor-version":[{"id":12376,"href":"https:\/\/dev2.betterdocs.co\/es\/wp-json\/wp\/v2\/docs\/5159\/revisions\/12376"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev2.betterdocs.co\/es\/wp-json\/wp\/v2\/media\/12369"}],"wp:attachment":[{"href":"https:\/\/dev2.betterdocs.co\/es\/wp-json\/wp\/v2\/media?parent=5159"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/dev2.betterdocs.co\/es\/wp-json\/wp\/v2\/doc_category?post=5159"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/dev2.betterdocs.co\/es\/wp-json\/wp\/v2\/doc_tag?post=5159"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/dev2.betterdocs.co\/es\/wp-json\/wp\/v2\/knowledge_base?post=5159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}