BigCommerce Template Files (Blueprint)

This article provides a basic overview on the various types of template files that make up our legacy themes (blueprint). For more in-depth documentation, please see our Blueprint Developer Documentation.

Blueprint themes are built using a template system that enables designers and developers familiar with HTML and CSS to modify the presentation and structure of a BigCommerce storefront. The different types of template files described in this article work together to "build" each page of your store's design.

The BigCommerce theme template file structure.

Layouts

Layout files provide the HTML structure that wraps the page content of your website. Some commonly used layout files include:

  • default.html — defines the layout of a theme's homepage
  • category.html — defines the layout of a theme's category pages
  • product.html — defines the layout of a theme's product pages
  • page.html — defines the layout of a theme's static content pages

For a full list of layout files, and more information on each one, visit Blueprint Theme Layouts.

You can also add custom layout files by following the steps in Creating Custom Template Files.

Panels

Panels provide reusable blocks or dynamic sections of content, which are generally referenced directly from layout files. Some commonly used panels include:

  • Header.html — defines the layout and contents of a theme's header
  • Footer.html — defines the layout and contents of a theme's footer
  • HomeFeaturedProducts.html — defines the layout and contents of the homepage's featured products section

For a full list of panels, and more information on each one, visit Blueprint Theme Panels.

You can also add custom panel files by following the steps in Creating a Custom Panel.

Snippets

Snippets contain a small section of HTML that can be used multiple times on a single page. Some commonly used snippets include:

  • SideCategoryList.html — generates the category links in a theme's navigation menu
  • PageMenu.html — generates the web page links in a theme's navigation and footer page menus
  • SocialLinks.html — generates a theme's active social media icons

For a full list of snippets, and more information on each one, visit Blueprint Theme Snippets.

Template Syntax

Each of the layout, panel, and snippet files use variables or placeholders, to serve specific content on a page. Variables are always enclosed within %%, such as %%Panel.Footer%%, and can be one of five types:

  • global variables
  • string variables
  • panel references
  • snippet references
  • file include

When called, the variable loads the HTML file it is associated with. For example %%Panel.Footer%% would produce the HTML stored in Footer.html when loaded on the storefront.

The Footer.html template file contents.

For more information on template syntax, each of the five types of variables, and how to reference custom theme assets, visit Template Syntax.

Store-Wide Variables

Unlike other variables which are restricted to use within certain files, store-wide variables can be used in any layout, panel, or snippet in the theme. For example, %%GLOBAL_HeaderLogo%%, which displays the store's logo image or text, depending on the store settings.

For a list of store-wide variables and their descriptions, visit Store-Wide Global Variables.

LNG Variables

LNG variables are used to display specific text on pages. For example, %%LNG_ConfirmYourOrder%% displays as "Please Review Your Order Before Continuing" on a storefront.

For a list of LNG variables and the text they return, visit LNG Variables.

Related Articles

Additional Resources

Was this article helpful?