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.
Check out an example product description using tabs by visiting the Startup Home demo's product page.
Add the tab layout through the product editor
In the Products admin, locate the product to edit.
Open the product editor, then scroll down to the Description rich text editor.
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 this HTML view, paste this code snippet to the description:
<li class="active">Tab 1</li>
<p>Tab 1 content goes here.</p>
<li> <p>Tab 2 content goes here.</p> </li>
<li> <p>Tab 3 content goes here.</p> </li>
Once this has been pasted 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 product 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 product page to see the tabs in action.