Welcome To Our Help Center 👋

Create Custom Tabs on a Per Product Basis

Create Custom Tabs on a Per Product Basis
Written by PJ Guerrero
Updated 2 months ago

If you want to achieve something like this: https://demo.shoptimized.net/products/copy-of-scrunchie-set

 

First of all, just simply add a tag on the product tag, custom-tabshttp://prntscr.com/pt28f5

Then go to the Description Area, click -> Show HTML: http://prntscr.com/pt28pw ( so you can paste the code for it to work )

Afterwards, copy the code BELOW then PASTE it in the Description Part. You're done.

Now you can change the text as per your preference. 

Take note: If you are to change the specifications you would have to do the same for all the tabs, we're currently working on a solution for this though.

PS: If you want to change the position of your Tabs: Product Page - Tabs, First go to Sections then go to any Product Page: http://prntscr.com/omrv6b -> Product Page - Tabs -> http://prntscr.com/omrvbh

PPS: When changing the TEXT, please be extremely careful as one mistake can mess everything up. 

----------------------
<!--  1st Example Codes -->

<div class="tabs">
<ul>
<li><a href="#tabs-1">Description</a></li>
<li><a href="#tabs-2">Specification</a></li>
<li><a href="#tabs-3">Third Example Tab</a></li>
<li><a href="#tabs-4">Fourth Example Tab</a></li>
</ul>
<div id="tabs-1">
<h2><strong>Number 1 Label</strong></h2>
<p>ETC ETC ETC ETC ETC</p>
</div>
<div id="tabs-2">Second Tab Description</div>
<div id="tabs-3">Third Tab Description</div>
<div id="tabs-4">4th Tab Description</div>
</div>

--------
<!--  2nd Example Codes -->

<div class="tabs">
<ul>
<li><a href="#tabs-1">Description</a></li>
<li><a href="#tabs-2">Specification</a></li>
<li><a href="#tabs-3">Third Example Tab</a></li>
<li><a href="#tabs-4">Fourth Example Tab</a></li>
</ul>

<!--  please make sure you put the <p></p> inside the </div> </div> -->

<div id="tabs-1">
<h2><strong>Number 1 Label</strong></h2>
<p>Tabs 1 example etc.etc <br> New line is now added <br> <br> Good one</p>
</div>
<div id="tabs-2">
<h2><strong>Number 2 Label</strong></h2>
<p>TEST 2</p>
</div>
<div id="tabs-3">
<h2><strong>Number 3 Label</strong></h2>
<p>TEST 3</p>
</div>
<div id="tabs-4">
<h2><strong>Number 4 Label</strong></h2>
<p>TEST 4</p>
</div>
</div>

Note: the <br> will create a new line. For full information, please refer here: https://www.w3schools.com/tags/tag_br.asp

Did this answer your question?