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

# Regions

Plan: Stencil Developer

Lesson 11 of 31 · 10 min

Regions are named locations in a Stencil theme's template files that make a page editable in a visual editor. By declaring regions, you give store users defined places to add, arrange, and configure content through either of BigCommerce's two visual editors — Page Builder or Makeswift — without editing theme files or writing code.

> **Warning**
>
> Makeswift on Stencil is currently in Beta. Features and availability are subject to change.

## Declaring a Region

You add a region within a template file using the `region` Handlebars helper. Name the region however you like, but it is best practice to give it a name that describes its location and function:

```html showLineNumbers={false}
{{{region name="below_content"}}}
```

A template file can have as many regions as you want. A single region can hold more than one widget, and the `sort_order` on each widget placement controls how the widgets stack within the region on the storefront. Wherever you place a region, the corresponding drop target appears in the visual editor — and it works the same way in both Page Builder and Makeswift.

> **Info**
>
> Regions can only be added to files under *templates/pages*, including its subfolders.

## Global Regions

Global regions are special regions you can use to place and manage content sitewide. A widget placed in a global region appears on every storefront page where that region exists, which makes global regions useful for high-priority content such as promotional banners across multiple pages.

To create a global region, add the `--global` suffix to the region name:

```html showLineNumbers={false}
{{{region name="header_bottom--global"}}}
```

To remove a default global region from your theme, delete or comment out its `{{{region name="..."}}}` line — for example, the `header_bottom--global` region in *templates/components/common/header.html*.

Like standard regions, global regions behave identically in both Page Builder and Makeswift.

## Resources

* [Widgets API](/developer/docs/admin/widgets-and-scripts/overview)
* [Widgets REST API course](/developer/learn/courses/widgets-rest-api/overview/course-overview)
* [Page Composition & CSS](/developer/docs/storefront/stencil/themes/templates)