Regions

Plan: Stencil Developer

Lesson 4 of 22 · 30 min

Regions are specific locations in the Stencil theme template files where you can place a widget. You can add a region within a template file using the format {{{region name="..."}}} and name the region however you like, but it is best practice to give it a name that is descriptive of the location and function.

A theme file can have as many regions as you want, with more than one widget assigned to the region and the placements sort_order controlling how the widgets appear on the storefront.

Content Region

Global Regions

Global regions are special regions you can use to place and manage content sitewide. Widgets placed in a global region will appear on the storefront pages where that region exists. This makes global regions useful for displaying high-priority information, such as special promotion advertising banners, across multiple storefront pages.

Global regions overview

To create a global region, add the —global suffix to the region name as shown in the following example:

{{{region name="header_bottom--global"}}}

Cornerstone global region example

To remove the default header_bottom—global region from your theme, delete or comment out the {{{region name="header_bottom--global"}}} line of code from your theme’s templates/components/common/header.html file.

Get Theme Regions

Return a list of unique Theme Regions in a file by sending a GET request to:

https://api.bigcommerce.com/stores/{{store-hash}}/v3/content/regions

Request Parameters

The query parameter templateFile is required.

Example:

content/regions?template_file=pages/category

Add a Region

Most themes in the BigCommerce marketplace come with predefined regions. It is best to utilize those first. By editing the theme and adding theme regions, updates will need to be manually managed.

Regions can only be added to files under pages/templates, including subfolders.