CoursesWidgets - REST APIModule 2: Regions

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

  • BC Sandbox
  • 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