> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Lab Activity: Create a Custom Template

Plan: Stencil Developer

Lesson 10 of 31 · 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](/_fern-files/bigcommerce.docs.buildwithfern.com/22fea6e52b33022fddb90fa7effceba98b03f108ba398ed475fc71ceebe5b5ba/assets/learn/stencil-advanced/91M7XY6OcJtW9mm__EWrk0lKLnJmoRSK8.gif)

## 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](/_fern-files/bigcommerce.docs.buildwithfern.com/029b6666682efbb4034ab48a44d4c60cf1e447d3318f0cbaccbccc47365cffec/assets/learn/stencil-advanced/LfXYxYXAmaf6wold_t7O1U0o7fcbfwt6s.gif)

## 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

```json showLineNumbers={false}
"product": {
    	"custom-product.html":"/custom-product/"
}
```

![Map template to URL](/_fern-img/48d5adf2fab142cf34dacaf44aca09ff16dec381149a92257528abe55883293c.webp)

## Test Your Custom Template Locally

1. **Navigate** to *[http://localhost:3000/custom-product/](http://localhost:3000/custom-product/)*

![Test custom template locally](/_fern-files/bigcommerce.docs.buildwithfern.com/574504fc5faacfb429367b803f88cd33e98143fed7e3d7f75d1e6008f5acfdd5/assets/learn/stencil-advanced/9NSUEy5IEUk_AtGY_7zXKBKx9xNBt39I4.gif)

## 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](/_fern-files/bigcommerce.docs.buildwithfern.com/f7074b6ee12503c2048d719f7812d1ecba78b229578a4c03ef31524c997fcacc/assets/learn/stencil-advanced/8dY0Tr3_v8pNC9i6_cX6VWDmsDZeL-foq.gif)