For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dev Portal
DocsAPI ReferenceLearnCommunityChangelog
DocsAPI ReferenceLearnCommunityChangelog
    • Overview
  • Learning Plans
    • Developer Foundations
    • Composable Developer
    • Stencil Developer
    • B2B Developer
  • Courses
        • Regions
        • Lab - Regions
    • Learning Changelog
Dev Portal
LogoLogo
On this page
  • Add a Region
  • Create a Global Region
  • Place a Widget in the Global Region
CoursesWidgets - REST APIModule 2: Regions

Lab - Regions

Was this page helpful?
Previous

Regions

Next

Widget Templates

Built with

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

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.

  1. Click ‘Edit Theme Files’
  2. Add the following code to the templates/pages/home.html template file:
{{{region name="home-top"}}}

Adding a region to home.html

  1. 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:
{{{region name="below_content--global"}}}

home.html

category.html

  1. Navigate to channel manager > edit themes in the control panel
  2. Click Customize
  3. Launch Page Builder
  4. Scroll to the bottom of the home page
  5. Observe the below_content—global region under the non-global region below New Products

Global region in Page Builder

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