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

Plan: Stencil Developer

Lesson 5 of 22 · 30 min

**In this lab you will...**

* Add a new widget region to a Stencil template file
* Create a global region
* Place a widget in the global region

**Prerequisites**

* BigCommerce sandbox store
* API credentials for the store (Content: Modify)

## Add a Region

Add a new widget region to a Stencil template file

1. **Log in** to the BigCommerce store that you have access to
2. **Navigate** to 'Storefront' in the left navigation
3. **Click** the 'Advanced' menu on the currently applied theme

> **Info**
>
> Themes must be copied before the 'Edit Theme Files' option is available. You cannot edit the original version of the theme. Click the 'Advanced' menu on the theme, then 'Make a Copy' to copy your theme.

4. **Click** 'Edit Theme Files'
5. **Add** the following code to the templates/pages/home.html template file:

```text showLineNumbers={false}
{{{region name="home-top"}}}
```

![Adding a region to home.html](/_fern-files/bigcommerce.docs.buildwithfern.com/f1151f5ec18c1ec322235b8dddfc53c4375ffcbc880725e10e55fddfbdc708d2/assets/learn/widgets-rest-api/widgetslabregion.png)

6. **Click** 'Save File' in the bottom right corner of the ‘Edit Theme Files' window

## Create a Global Region

1. **Log in** to the BigCommerce store that you have access to
2. **Navigate** to 'Storefront' in the left navigation
3. **Click** the 'Advanced' menu on the currently applied theme
4. **Click** 'Edit Theme Files'
5. **Add** the following code at the end of the 'main full' div tag in *home.html* to at the end of the 'page-content' div tag in *category.html* as shown in the examples below:

```text showLineNumbers={false}
{{{region name="below_content--global"}}}
```

![home.html](/_fern-img/aaab9655298ea12a3a9b2be34db58af9454755af5d17bcc016fd156dd1c7558c.webp)

![category.html](/_fern-img/c8d7f428f2074114bcdc80b85a44fa76529ca63673426b6cc892acd3b4e5f6da.webp)

6. **Navigate** to channel manager > edit themes in the control panel
7. **Click** Customize
8. **Launch** Page Builder
9. **Scroll** to the bottom of the home page
10. **Observe** the *below\_content--global* region under the non-global region below New Products

![Global region in Page Builder](/_fern-img/88c1eab0997e5dffa6767dc2f1be814f0fe12864e61591e5c8df0f3497a15322.webp)

## Place a Widget in the Global Region

1. **Drag** and **drop** one of the basic widgets from the left pane into the `below_content--global` region
2. **Click** Preview
3. **Observe** the widget you just placed displaying on the home page and the category pages of your store