Browse by Topic

Blueprint Template Files (Blueprint)

 

This only applies to legacy Blueprint themes. For Stencil, Template files visit Stencil Developer Documentation

This article provides a basic overview of the various types of template files that make up our legacy Blueprint Themes

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. For more in-depth documentation, please see our Blueprint Developer Documentation.

The BigCommerce theme template file structure.

Layouts

Layout files provide the HTML structure that holds 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 (Blueprint).

Panels

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

  • Header.html — defines the framework and contents of a theme's header
  • Footer.html — defines the framework and contents of a theme's footer
  • HomeFeaturedProducts.html — defines the framework 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. They can be placed within a panel or layout file. 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.

 

Do not delete Global Variables! Removing a global variable can break core functions of your store. Always keep backups of the template file before making large changes.

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 file 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. These variables can be deleted and replaced with new text. So you can delete %%LNG_ConfirmYourOrder%% and type in something like "Check your order before continuing". 

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

 

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory or ask your question in the BigCommerce Community Ask a Design Partner Group for assistance. Due to our Design Policy, our Technical Support is unable to edit code or make design changes.

Was this article helpful?