Custom Product Details BigCommerce Panel – The Best Way
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:
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:
7) Edit your standard product layout file (product.html) and do something similar to #6 above.
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.