Designing your Storefront: A Look into the Template File System

  • 0
  • 1
  • Idea
  • Updated 6 years ago
  • Implemented
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: We have archived this topic as it has either reached a resolution or has become inactive.  If you believe this topic should not have been archived, please let us know, and we would be happy to review it.  You may continue to access this topic as needed fo

Here are the topics that we covered in the?webinar below:


  • Backing up your Template Files: how to backup the template files from the control panel

  • Common Template Layouts & CSS Classes: a look at the three default layouts that we use and the CSS classes and IDs associated with them

  • Variables in the Template: an explanation of the four types of variables that we use in the template to dynamically generate content

  • Common Template Files: the template files that support sees customized most often

  • Homepage Files: the template files used within the homepage

  • Panel Placements: clues to find where a certain panel should be located by default

  • Textual Changes: changing the wording of titles, panels, and other content within the store

  • Custom Panels/Files: how to create custom template files to assign to products/categories/etc.



The video below contains the entire webinar that was conducted on May 2nd, 2012 and goes over the presentation and the Q&A session afterwards (totaling 1 hour, 4 minutes).


Here's a bit more information on our template file system, and a handy diagram of their hierarchy:

Template File Types

Layout Files

Layout files are the files you see in the root directory of a page. Each layout file corresponds with a page that?s shown in BigCommerce. For example, product.html refers to the page that?s shown when a customer is viewing the details of a product in your store.

The majority of layout files contain nothing more than references to individual panels to be shown on a page. These panels are contained in tags that generally define left, center, or right columns of the page. Having references to panels in the files is the functionality that allows the drag and drop design mode feature to reorganize the contents of the pages.

A list of template layout files and their purpose can be found in Appendix 1 of the Template Customization Guide. For sample layout files for different column combinations can be found in Appendix 2 of the Template Customization Guide.

Panels

Panels generally indicate a block or section on the page. Each panel file builds one of the separate blocks shown on pages shown in BigCommerce. For example, the SideCategoryList panel builds a list of categories to be shown throughout the store.

As mentioned above, panels are generally referenced directly from the layout files ? they define which content should be shown on a particular page and handle the generation of that specific content.

Some panels contain strictly static content (such as the store name) whilst others need to dynamically generate content. These dynamically generated panels (such as the panel that builds the list of products in a category or the list of categories on the store) make use of panel logic files located in the BigCommerce application.

A list of the panel files and their purpose can be found in Appendix 1: Layout Files and Panels. The panel files in this list are broken down to the page they?re on (some panels are only available on certain pages) in the default store template.

Snippets

Snippets are templates containing HTML that can be used multiple times on one page either by being used in different parts of the template or being part of a loop that for example builds a list of products on the page (each product in the list being a repeated version of the same snippet)

Snippets (found in the Snippets directory) are generally repeated inside dynamic panel files (outlined above). For example, HomeFeaturedProductsItem will refer to an individual product in the HomeFeaturedProducts panel.

Page Structure

As outlined above, there are three types of template files within BigCommerce. These three types of files are what BigCommerce uses to build the layout of a page in the store.

The image below shows a break down of how layout files, panels and snippets work together to build a page:

?2010-07-07_1349.png

As you can see, one layout file references many panels that may reference many individual snippets.

Photo of Drew N

Drew N, Community Manager

  • 262,524 Points 100k badge 2x thumb

Posted 6 years ago

  • 0
  • 1
Photo of S

S

  • 6,760 Points 5k badge 2x thumb
Hello -

I am trying to use the 'Related Products' feature within product detail but nothing is being generated in the live store. Does this feature require the addition of a Panel?

TY!
Photo of Drew N

Drew N, Community Manager

  • 262,524 Points 100k badge 2x thumb
You don't need to add a panel, but it works differently than the old. If you associate products, when you add that item to the cart, there will be a pop up that has the related products in it.

If this doesn't work, tell me which product you are trying to associate things to.

Drew
Photo of S

S

  • 6,760 Points 5k badge 2x thumb
lol...thanks for the explanation. Just tried it and works fine but more like an upsell - new thought process!

Thanks Drew!
Photo of Drew N

Drew N, Community Manager

  • 262,524 Points 100k badge 2x thumb
Yes it is, but you are really working hard and I am excited for you long term. My only worry is that I can't keep up adding help topics. :)

Drew

This conversation is no longer open for comments or replies.