> 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 - Customize Layout and Pages

Plan: Stencil Developer

Lesson 7 of 18 · 30 min

**In this lab, you will:**

* Create a new layout and apply it to a page
* Make changes in a page file's front matter and identify the results

> **Info**
>
> You can apply custom layout files from templates/layouts to any page including the account portal, search results, and checkout. As long as there's a file in templates/pages, you can give it a custom layout file from templates/layouts.

**Prerequisites**

* Previous labs have been completed

## Step 1: Create New Layout and Apply it to a Page

1. **Navigate** to */templates/layout*
2. **Open** base.html
3. **Copy** the contents of base.html
4. **Create** a new file /templates/layout/new-layout.html
5. **Paste** the previously copied code into the new file
6. **Remove** the footer component in the newly created layout file

![Remove footer component](/_fern-files/bigcommerce.docs.buildwithfern.com/d3a34b020a1e4fbe76a62a7ebd13eedfe4f7ecce1ad3c5acfefde7934710484d/assets/learn/stencil-core/image-17.jpg)

7. **Open**/templates/pages/product.html
8. **Change** the layout file that's called at the bottom from 'base' to 'new-layout'

![Change layout reference](/_fern-img/58251882397e3a67f415ec055a1116f8eee4ca94db723f653d520b04e9103767.webp)

9. **View** product page
10. **Observe** footer no longer appears

## Step 2: Make Changes in a Page File's Front Matter and Identify the Results

1. **Identify** the default values in config.json for the homepage new products count key:

![Homepage new products count in config.json](/_fern-files/bigcommerce.docs.buildwithfern.com/df0a50cbdd5d3062142c72d67168229207a9c53b721fef56d810023ef8699d89/assets/learn/stencil-core/image-20.jpg)

2. **Open** your templates/pages/home.html file in your editor
3. **Note** the reference to the homepage new products count key in the file's front matter, between the two `---` delimiters

![Front matter reference](/_fern-files/bigcommerce.docs.buildwithfern.com/12a10b4439dcd35936eef2f88900d015535835559b9ddf910aacf49112b45a44/assets/learn/stencil-core/image-21.jpg)

4. **Load** your storefront's homepage (by default, `http://localhost:3000)` and you should see a "New Products" section that displays 5 products
5. **Change** the limit: \{\{theme settings homepage new products count}} statement to a hard-coded limit: **2**

![Hard-coded limit change](/_fern-files/bigcommerce.docs.buildwithfern.com/dc33c4452e67f2955360b13ff01e2ecae0d1c6aaab5ffd0dadcba6d0e198211d/assets/learn/stencil-core/image-22.jpg)

6. **Reload** your storefront's homepage in your browser, you should see the number of displayed "New Products" change from its default number (as specified in config.json) to two

![New Products limited to two](/_fern-img/92da1a2b88a5f819b3fdd0cab4c34742abd6b710467bf8998c5c01a42785a61a.webp)