Bigcommerce Template Tutorial – The Basics (part I)

Understanding the theme structure

Bigcommerce Template Tutorial deals with basic understanding of  Bigcommerce template structure. Before starting any modifications it is required  to understand the basics of the BigCommerce Templates.

Bigcommerce Templates are divided into four different folders (sections):

• Images
• Panels
• Snippets
• Styles

Images

Images folder contains the theme’s images, either that is used for CSS or for the theme.

Panels

Panels are dynamic and reusable block used by BIgcommerce to create  a page. These block are repetitive and these block determine the overall layout of the website. Panels can be well understood with the help of an example. The code shown here comes from Header.html inside the Panels folder.

<div id="header-wrapper">
   
    <!--%%Panel.PagesMenu%%--> 
    %%Panel.TopMenu%%
  <div id="Header">
    <div id="HeaderUpper">
      	<div id="Logo"> %%GLOBAL_HeaderLogo%% </div>
        
        %%Panel.HeaderSearch%% 
       </div>
      <!--%%Panel.SideCurrencySelector%%--> 
  </div>
</div>

The code shows that its calling multiple panels within it. Since Header Panel is itself repetitive, we don’t have to call other panels repetitively once they are called inside header.html.

Panels are referenced both inside layout files and inside other panel files.

Snippets

Snippets are templates that have HTML elements within. Snippets can be used several times on one Page. Either snippets are used in different parts of the template or as a part of a loop. Products under a category is a good example of snippet usage.

This can be further explained with the help of code extracted from Panels -> ProductDetails.html

 ProductDetails.html" ><div class="ProductAside">
	<div class="ProductThumbWrap">
		<div class="ProductThumb" style="%%GLOBAL_HideProductThumb%%">
			%%SNIPPET_ProductThumbImage%%
		</div>
	</div>
</div>

The Panel contains the snippet (%%SNIPPET_ProductThumbImage%%) that calls the product thumbimage for display.

Let see how the snippet code looks that calls the image from the source folder.

<div class="ProductThumbImage" style="width:%%GLOBAL_ProductThumbWidth%%px;">
	<a rel="prodImage" style="margin:auto;" href="%%GLOBAL_InitialZoomImage%%" onclick="%%GLOBAL_TinyImageClickJavascript%% return false;">
		<img src="%%GLOBAL_ThumbImageURL%%" alt="%%GLOBAL_ImageDescription%%" title="%%GLOBAL_ImageDescription%%" />
	</a>
</div>

Styles

Styles.css is the core css of the template inside this folder.