Step 1: Open the product editor in your Shopify Dashboard

After opening up the product you want to edit, click the “View HTML” button over the top right corner of the text area. 

Step 2: Paste this code into the product description in shopify


<ul class="tabs">
<li><a class="active" href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<ul class="tabs-content">
<li class="active" id="tab1">
<p>Tab 1 content goes here.</p>
</li>
<li id="tab2">
<p>Tab 2 content goes here.</p>
</li>
<li id="tab3">
<p>Tab 3 content goes here.</p>
</li>
</ul>

Your product should now look something like this: 

Step 3: Edit the labels and content for each tab

I recommend editing the labels and content from within the HTML editor, rather than using the visual editor. This is because the visual editor tends to mess up the HTML code that you pasted in. Shopify allows us to do this really easily.

Step 4: Save (Shopify will remind you to save however it is good practice to do it regardless)

Click “Update” or “Save” to save the changes you made to the product. Then go ahead and view the product on your website to make sure the tabs are showing up properly.

I hope that went smoothly for you! If you had any problems, please leave a comment below with a description of the problem and I’ll do my best to help.