Lab Activity: Add Regions to the Product Page

Objectives

• Add a standard region to the product detail page
• Add a global region to the product detail page

Prerequisites

• CLI installed
• Cornerstone theme cloned

In this lab, you will add two regions to the product detail page: one standard region scoped to the product page, and one global region available sitewide. A good place to add them is the product page template, templates/pages/product.html, which renders on every product detail page.

Add a Standard Region

1. Open templates/pages/product.html in your Cornerstone theme
2. Locate a logical insertion point on the page — for example, just below the product details
3. Add the following region helper, giving it a descriptive name:

{{{region name="product_below_details"}}}

This region appears as an editable drop target only on pages that use the product template.

Add a Global Region

1. Choose a second insertion point in the same file — for example, above the product details
2. Add a region with the --global suffix so it is available sitewide:

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

Because it is global, this region is available on every storefront page where the component renders, not just the product page.