Tabs on Text Fields

To enable Tabs, you will need to enter the code below into a Rich Text Editing field while in "HTML mode".

To activate HTML mode, click the '<>' button on the far right of the product description box.

Copy and paste the below and amend the "Info", "Shipping" and "Returns" to text that is more suitable for you:

<ul class="tabs">
<li><a href="#tab-1">Info</a></li>
<li><a href="#tab-2">Shipping</a></li>
<li><a href="#tab-3">Returns</a></li>
<div class="tabs-content">
<div id="tab-1">This is where you add your 'Info' text</div>
<div id="tab-2">This is where you add your 'Shipping' text</div>
<div id="tab-3">This is where you add your 'Returns' text</div>

The example above shows three tabs, but you can have as many, or as little, as you like.

The titles are shown at the top, 'Info', 'Shipping' and 'Returns', and are linked to the three tabs below it.

There is also this help-guide by Shopify - however, this is an advanced tutorial which would require specialist development.

Shopify Help - Adding Tabs to Product Descriptions guide.

We have a number of trusted specialists, all of which are grouped for your convenience under our help guide:


you can try the following apps: Product Tabs apps.