For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dev Portal
DocsAPI ReferenceLearnCommunityChangelog
DocsAPI ReferenceLearnCommunityChangelog
    • Overview
  • Learning Plans
    • Developer Foundations
    • Composable Developer
    • Stencil Developer
    • B2B Developer
  • Courses
        • Front Matter Objects
        • Page Composition and Styling
        • Custom Templates
        • Lab Activity: Create a Custom Template
    • Learning Changelog
Dev Portal
LogoLogo
On this page
  • Create the custom Subdirectory in the templates/pages Directory
  • Create the Template HTML File
  • Map the Template to a URL in the config.stencil.json File
  • Test Your Custom Template Locally
  • Apply Theme & Assign Custom Template
CoursesStencil AdvancedModule 3: Storefront Customization

Lab Activity: Create a Custom Template

Was this page helpful?
Previous

Custom Templates

Next

Using JavaScript in a Stencil Theme

Built with

Plan: Stencil Developer

Lesson 10 of 28 · 30 min

Objectives

  • Create a custom template
  • Upload a custom template
  • Assign a custom template to a storefront page

Prerequisites

  • CLI Installed
  • Cornerstone theme cloned

Create the custom Subdirectory in the templates/pages Directory

  1. Navigate to templates/pages within your cornerstone theme files
  2. Create a new folder under templates/pages called custom
  3. Create a new folder under_templates/pages/custom_called product

Example: templates/pages/custom/product

Create the Template HTML File

  1. Edit the product.html file
  2. Customize the file (for this example we are just adding text for demonstration)
  3. Save the modified html file as a new file named as an existing product URL in your store (for this example we are using custom-product.html)
  4. Ensure the new html file is saved to the templates/pages/custom/product directory

Create template HTML file

Map the Template to a URL in the config.stencil.json File

  1. Navigate to the config.stencil.json file
  2. Add the code below to the “customLayouts” section
  3. Enter stencil start on the command line
"product": {
"custom-product.html":"/custom-product/"
}

Map template to URL

Test Your Custom Template Locally

  1. Navigate to http://localhost:3000/custom-product/

Test custom template locally

Apply Theme & Assign Custom Template

Bundle and Push the theme to your BigCommerce Store
*Alternatively you can use a stencil bundle to create a zip file to manually upload.

  1. Enter the following command in CLI: stencil push
  2. Enter y to apply the theme to your store
  3. Select the theme variation you would like to apply

Assign the custom template to the page

  1. Navigate to the store control panel
  2. Go to Products > View and edit the product that will use the custom template
  3. Click Storefront Settings
  4. Select the custom template from the Template Layout File dropdown
  5. Click Save
  6. View the product in the store

Apply theme and assign custom template