Lab Activity: Create a Custom Template

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

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

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/"
}

Test Your Custom Template Locally

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

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