Big Commerce Template Customization Guide

BigCommerce contains a powerful template system that can be used to completely customize the look and feel of your store to your needs to integrate it with an existing website design. If you want to buy boos related website templates, So you can visit on http://www.gobookee.org/ for buy books related website template.

BigCommerce templates are entirely HTML based and make use of extensive CSS to style page designs. Due to the flexible design of the HTML templates in BigCommerce, it’s possible to create brand new store designs only through customization of the stylesheets and little HTML modification.

This guide serves as an introduction to the methods available for you to customize the appearance of your BigCommerce store, and an introduction in to how the BigCommerce template system is structured. If you have question related to template design, So you can find Template Monster FAQ for getting your answers related template design.

The BigCommerce Customization Guide is divided in to several smaller parts, for easier reference and navigation. Template Structure deals with the basics in how the template & store design system in BigCommerce works and how the structure of a page is placed together.

Modifying Your Store Design runs you through all of the available methods for customizing your BigCommerce store, including Design Mode, Quick Edit and direct FTP access to your template files.

Maintaining a Modified Template contains all of the information you need to know as well as some advice on how to keep your store running and up to date with a custom store design.

Template Variables contains an overview of the different kinds of variables (placeholders) that are used by the BigCommerce template system.

Customizing Stylesheets introduces the stylesheets used within your template, used to apply presentational information (fonts, colors and page layout) to your store and includes some example customizations.

More Information and Resources contains some of our favourite web resources for learning HTML, CSS and design as well as links to must have utilities for template designers.

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 <div> 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: Layout Files and Panels. For sample layout files for different column combinations can be found in Appendix 2: Sample Layout Files.