Custom Product Details BigCommerce Panel – The Best Way

July 18, 2014
by Max

    So, as we know, BigCommerce has a very robust infrastructure using a series of templates, panels and snippets to dynamically build pages. One of the most important aspects of a product page is the ProductDetails panel which calls things like Product Images, thumbnails, the product title, product details, etc etc…

    BigCommerce however will not allow you simply clone this panel and customize it for your needs if you’re creating a unique product that has unique needs. As you may know, if you try this, you’ll find that BigCommerce’s %%Globals%% are not passing. Instead you get a bunch of ugly white space. This occurs because BigCommerce requires ProductDetails.html to a part of the document in order to pass those globals. The solution is not an easy one to find, but after finding a post by Joanne Barker of VS Web Design, I think she found the best and most versatile way to handle this here. Thanks Joanne!

    1) Save off the original ProductDetails.html file (e.g. ProductDetails_orig.html).

    2) Copy ProductDetails.html into 2 versions and save those files in the Panels folder. One will be the version you want for the majority of your products (basically the standard ProductDetails.html) and the other will be a customized version (e.g. ProductDetails_standard.html and ProductDetails_custom.html).

    3) In the ProductDetails.html file remove everything but the beginning <head> section and the full <script> section with all the product variables. See below:

    
    <link href="%%GLOBAL_CdnAppPath%%/javascript/jquery/themes/cupertino/ui.all.css?%%GLOBAL_JSCacheToken%%" rel="stylesheet" type="text/css" />
    <link href="%%GLOBAL_TPL_PATH%%/Styles/product.attributes.css?%%GLOBAL_JSCacheToken%%" rel="stylesheet" media="screen" type="text/css" />
    <script src="%%GLOBAL_jQueryUIPath%%" type="text/javascript"></script><script src="%%GLOBAL_CdnAppPath%%/javascript/jquery/plugins/jquery.form.js?%%GLOBAL_JSCacheToken%%" type="text/javascript"></script><script src="%%GLOBAL_CdnAppPath%%/javascript/product.attributes.js?%%GLOBAL_JSCacheToken%%" type="text/javascript"></script><script src="%%GLOBAL_CdnAppPath%%/javascript/jquery/plugins/jCarousel/jCarousel.js?%%GLOBAL_JSCacheToken%%" type="text/javascript"></script><script type="text/javascript">// <!&#091;CDATA&#091;
    var ThumbURLs = new Array(); var ProductImageDescriptions = new Array(); var CurrentProdThumbImage = %%GLOBAL_CurrentProdThumbImage%%; var ShowVariationThumb =false; var ProductThumbWidth = %%GLOBAL_ProductThumbWidth%%; var ProductThumbHeight =  %%GLOBAL_ProductThumbHeight%%; var ProductMaxZoomWidth = %%GLOBAL_ProductMaxZoomWidth%%; var ProductMaxZoomHeight =  %%GLOBAL_ProductMaxZoomHeight%%; var ProductTinyWidth = %%GLOBAL_ProductMaxTinyWidth%%; var ProductTinyHeight =  %%GLOBAL_ProductMaxTinyHeight%%; %%GLOBAL_ProdImageJavascript%% var ShowImageZoomer = %%GLOBAL_ShowImageZoomer%%; var productId = %%GLOBAL_ProductId%%;
    // &#093;&#093;></script>

    4) In the 2 new ProductDetails.html files (ProductDetails_standard.html and ProductDetails_custom.html), remove only the <head> section and the full <script> section with all the product variables.

    5) Copy product.html to a new custom layout file (e.g. _product_custom.html). this new layout file can be assigned to specific products that require this new custom layout.

    6) Add a new panel reference IMMEDIATELY below the %%Panel.ProductDetails%% line. It should look something like this:

    
    %%Panel.ProductDetails%%
    %%Panel.ProductDetails_custom%%
    

    7) Edit your standard product layout file (product.html) and do something similar to #6 above.

    
    %%Panel.ProductDetails%%
    %%Panel.ProductDetails_standard%%
    

    Copy all the files into your template using WebDAV. After these changes, you shouldn’t see any changes, but you are now poised to modify the ProductDetails_custom.html file to your specific needs and assigned products to the _product_custom.html file layout.

    By separating out specific portions of the ProductDetails.html code, you can have an infinite number of variations in product pages based on your needs.

    About

    Max Avedisian has had the pleasure of working with a extremely broad range of clients in order to bring the best in technology and digital production today. From traveling the world as a production and band assistant, to cutting-edge video production, to next-level graphic and web design, Max Avedisian has serviced a wide range of needs and has met the challenges of many businesses small and large. Max has been professionally pursuing his passions in Digital Design since his graduation from Full Sail University in 2010.

    5 comments

    1. |

      Hi Max… This is something that I can’t do, and I don’t know why-but I think this is something I need to do . I need to have image (group of icon- free shipping, returns within 14 days, Price adjusted for Euro Rate, Tel……..) , below Pinit button, – but need to create 3 custom product page, because -not all product have free shipping, or Price adjusted for Euro Rate)… I did exactly as instructed …but I do miss part product Details on product page…. Sorry for the bad English
      Ana

      • |

        Hi Ana, sorry for the late reply. Did you ever figure it out?

    2. |

      Thank you so much for this, in my opinion this is a major major issue with the platform and limits product page uniqueness which helps overall sales. I’ve contacted Bigcommerce support numerous times trying to let them know about this issue and all they say is “We don’t help with template editing”.

      • |

        Glad I could help, Tyler.

    Leave a Comment