How to add tabs to your store

Adding tabs is a great way to add detail without taking up too much space. Not all of our themes support tabs, but most do. You can add tabs to any RTE (rich text editor) area. This includes:

  • Product descriptions
  • Collection descriptions
  • Custom pages
  • Blog posts

To add tabbed content, simply go to that area of the Shopify admin (e.g. Products>[Product]) and press the "Show HTML" button. At the time of writing, this looks like this: <>

Then, paste in the following example and replace the text content ("Tab 1" and "Tab 1 content goes here") with your own. The top set of elements are the tabs themselves, and the second set of elements are the content that corresponds to each tab.

 
<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>