BigCommerce Mod : Custom product tabs

Written by

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 = ''+TabName+'';

			$('#ProductTabsList').append(ProductTab);
	});

Step 2

Here we actually add content of our tab.

	
		CONTENT TO DISPLAY IN TAB

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.

Comments

12 responses to “BigCommerce Mod : Custom product tabs”

February 15, 2013

Mike

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?

Reply
February 15, 2013

Mike

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

Reply
March 15, 2013

Greg

Did you actually wrap the code with script tag?

Reply
May 14, 2013

Marc

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!

Reply
May 20, 2013

Greg

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.

Reply
July 31, 2013

Lily

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 🙂

Reply
1. July 31, 2013
  
  Greg
  
  Hello
  
  One way I know of would be to add custom field Bigcommerce Support :How do I add additional custom fields to my product page?
  
  Then you can display the label/value in the tab like this:
  Value = %%GLOBAL_CustomFieldValue%%
  Label %%GLOBAL_CustomFieldName%%
  
  Reply
February 12, 2014

Hien Le

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

Reply
February 4, 2015

Duane

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

Show me please.

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

Reply
February 4, 2015

Duane

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.

Please advise

Reply
March 20, 2015

Marcello Lisi

Hi Greg, same request as Hien Le. I am very interested in how to get it working. Would you please email me at marcellolisi@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. –Marcello

Reply
April 20, 2016

dee

Hi Greg are you able to email me please it appears my code for product tabs is broken we are unable to get it fixed.
Thanks
Dee
glamourpromwear@gmail.com

Reply