Tabs are a framework to include more content within a limited space. Just like a file folder, groups of content can be organized into tabs to save space and include more information.
Add tabs framework through the collection editor
In the Products admin, open Collections. Locate the collection and open the editor.
Scroll down to the Description RTE.
If you already have some description text in place, it would be worth backing it up in case the content is replaced by this modification.
In the top-right corner, select Show HTML
In the HTML view, copy and paste this code snippet to the collection description:
<ul class="tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<ul class="tabs-content">
<li class="active">
<p>Tab 1 content goes here.</p>
</li>
<li> <p>Tab 2 content goes here.</p> </li>
<li> <p>Tab 3 content goes here.</p> </li>
</ul>
Once the code is added to the HTML view, click the same button to return to the RTE view (Show editor). The tabbed content will look like basic bullet points at first.
Begin replacing the Tabs and Tabs content portions with your collection description content.
Tab 1, Tab 2, and Tab 3 serve as the labels for the tabs. Replace these with short titles for the tabbed categories.
In place of the Tab 1, 2, and 3 content goes here placeholders, add the copy.
Once the three tabs and their respective content have been filled, Save and preview the collection page to see the tabs in action.