# BigCommerce Mod : Custom product tabs

This is a simple mod that allow us to have custom product tabs in BigCommerce system, there is no limit on how many tabs you can have. Our final result will be this.

# Mod

This mod requires modification to only one file /Panels/ProductTabs.html

## Step 1

Add current JavaScript to the existing script tag

 /** * Overrides parts of /javascript/product.functions.js#GenerateProductTabs() function * as it does not support related products */ $(document).ready(function() { var id = 'RelatedProducts'; var TabName = 'Related Products'; var ProductTab = '<li id="'+id+'_Tab" ><a onclick="ActiveProductTab(\''+id+'_Tab\'); return false;" href="#">'+TabName+'</a></li>';$('#ProductTabsList').append(ProductTab); });

## Step 2

Here we actually add content of our tab.

 <div id="RelatedProducts" class="Block Panel" style="display:none"> CONTENT TO DISPLAY IN TAB </div>

One thing to not is that the div id ‘RelatedProducts’ relates to javascript id ‘RelatedProducts’ so if you change that you need to change the div id.

That is, if we wanted to add additional tabs we simply would use an array.

#### 12 thoughts on “BigCommerce Mod : Custom product tabs”

1. Mike says:

Thanks for the idea. However when I add all the code and everything in the proper places, when I refresh the product page, rather than adding a new tab, it just displays the code Related Products.

It doesn’t actually parse the code it seems to use that code and turn it into a tab. Any ideas?

2. Mike says:

It looks like my previous comment didn’t display the code correctly, I’ll try one more time, but basically I tried your mod, the page displayed the actual code itself, rather than interpreting it as HTML and outputting it as a new tab. Here’s the code again, assuming WordPress let’s me post it: Related Products

3. Did you actually wrap the code with script tag?

4. Marc says:

Hey Greg, nice stuff you are sharing, very useful. Can you show me exactly where to paste each piece of code you are giving us on this page? I seem to have the same issue as Mike and cannot get the additional tab going.
Thanks!

5. There was code formatting issue. Opening/Closing brackets have been replaced by < >
Make sure that the ‘var ProductTab’ line has all the < replaced with ‘<' and > with '>‘, this should fix the issues.

See updated post.

6. Hey Greg, that info was good as i needed to add a specs tab to all my items. Only where do i put the information for this section, as i haven’t got a new field in my product info to insert object specific data… any ideas? thanks 🙂

7. Hien Le says:

Hi Greg, I am very interested in how to get it working. Would you please email me at hientule@gmail.com some more details. I need to add more product tabs to my product page for Bigecommerce, like Specifications, FAQ, Tip and Tricks, Manuals, Testimonies.
Thanks so much Greg. –Hien

8. I am very interested in having tabs instead of the scrolling description box to China I am ending up with for my tech products but I need an example to what you are actually instructing me here as I do not work for Bigcommerce. Wish they do this already…Volusion comes with this function built in.

I am wanting to add Features,Specifications

Here is the stock Panels/ProductsTabs.html
%%GLOBAL_ProductTabsControlScript%%

lang.Description = ‘%%LNG_JS_Description%%’;
lang.Warranty = ‘%%LNG_JS_Warranty%%’;
lang.OtherDetails = ‘%%LNG_JS_OtherDetails%%’;
lang.ProductTags = ‘%%LNG_JS_Tags%%’;
lang.SimilarProducts = ‘%%LNG_JS_SimilarProducts%%’;
lang.Reviews = ‘%%LNG_JS_Reviews%%’;
lang.OtherProducts = ‘%%LNG_JS_OtherProducts%%’;
lang.ProductVideos = ‘%%LNG_JS_ProductVideos%%’;
lang.SimilarProductsByCustomerViews = ‘%%LNG_JS_SimilarProductsByCustomerViews%%’;
/**
* Overrides parts of /javascript/product.functions.js#GenerateProductTabs() function
* as it does not support related products
*/
$(document).ready(function() { var id = ‘RelatedProducts’; var TabName = ‘Related Products’; var ProductTab = ‘‘+TabName+’‘;$(‘#ProductTabsList’).append(ProductTab);
});

<!– Remove the code from here to create the no product tabs version of the product page

//
–>

CONTENT TO DISPLAY IN TAB

9. Need actual sample of where the code goes and how it would read to create Feature and Specifications tabs. Can’t paste the current Panel/ProductTabs.html in this message.