Forum breadcrumbs – You are here:Supportadd-ons: Bigcommerce page builderBigCommerce Cornerstone: Add More …
BigCommerce Cornerstone: Add More Product Tabs Easily
rawi@rawi
14 Posts
#1 · April 19, 2026, 1:52 pm
Quote from rawi on April 19, 2026, 1:52 pm
A lightweight add-on that lets your Add More Product Tabs Easily in your BigCommerce store.
DEMO – https://knife-demo.mybigcommerce.com/fiber-blade/
How to Add JS in Script Manager
Copy the JS file URL:
[spoiler title="HTML"]https://addons.themeness.com/more-tabs.js[/spoiler]
Open your Script Manager.
Add a new script, and paste the above URL.
Save and publish the changes.
How to Add Tabs
Copy and paste below HTML sample code.
[spoiler title="HTML"]
<!– separator –><ul><li class=”tab”><a class=”tab-title” href=”#tab1″>How to Use</a></li></ul><div class=”tab-content” id=”tab1″>How to Use content</div><!– separator –><ul><li class=”tab”><a class=”tab-title” href=”#tab2″>Ingredients</a></li></ul><div class=”tab-content” id=”tab2″>Ingredients content</div><!– separator –><ul><li class=”tab”><a class=”tab-title” href=”#tab3″>Allergens</a></li></ul><div class=”tab-content” id=”tab3″>Allergens content</div><!– separator –><ul><li class=”tab”><a class=”tab-title” href=”#tab4″>Info sheets</a></li></ul><div class=”tab-content” id=”tab4″>Info sheets content</div><!– separator –>[/spoiler]

A lightweight add-on that lets your Add More Product Tabs Easily in your BigCommerce store.
DEMO – https://knife-demo.mybigcommerce.com/fiber-blade/
How to Add JS in Script Manager
-
Copy the JS file URL:
-
Open your Script Manager.
-
Add a new script, and paste the above URL.
-
Save and publish the changes.
How to Add Tabs

Copy and paste below HTML sample code.
HTML
<!– separator –>
<ul>
<li class=”tab”>
<a class=”tab-title” href=”#tab1″>How to Use</a>
</li>
</ul>
<div class=”tab-content” id=”tab1″>
How to Use content
</div>
<!– separator –>
<ul>
<li class=”tab”>
<a class=”tab-title” href=”#tab2″>Ingredients</a>
</li>
</ul>
<div class=”tab-content” id=”tab2″>
Ingredients content
</div>
<!– separator –>
<ul>
<li class=”tab”>
<a class=”tab-title” href=”#tab3″>Allergens</a>
</li>
</ul>
<div class=”tab-content” id=”tab3″>
Allergens content
</div>
<!– separator –>
<ul>
<li class=”tab”>
<a class=”tab-title” href=”#tab4″>Info sheets</a>
</li>
</ul>
<div class=”tab-content” id=”tab4″>
Info sheets content
</div>
<!– separator –>
Click for thumbs down.0Click for thumbs up.0
Last edited on April 19, 2026, 2:15 pm by rawi
