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.
Tabs can be added to the Rich Text Editor (RTE) for product descriptions, collection descriptions, static pages, and blog posts.
Due to the layout of the Vogue theme, tabs are not compatible with this theme's product or collection descriptions.
Add tabs to product descriptions
In the Products admin, locate the product to edit.
Open the product editor, then 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 this HTML view, paste this code snippet to the 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 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:
Add tabs to collection descriptions
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 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 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:
Add tabs to static pages
In the Pages admin, open the editor for the page.
Scroll down to the Content portion of the editor and select Show HTML (top-right corner).
In this view, copy and paste this code snippet to the Content:
<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 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 page 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 page to see the tabs in action:
Add tabs to blog posts
In the Blog posts admin, open the post editor.
Scroll down to the Content portion of the editor and select Show HTML (top-right corner).
In this view, copy and paste this code snippet to the Content:
<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 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 post 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 post to see the tabs in action.