Products & Categories

Product and category pages are where most Stencil template work happens. BigCommerce fetches the relevant data before rendering, so a template mainly deals with looping over and displaying data that's already there.

Category listings

<h1>{{category.name}}</h1>
<div class="productGrid">
{{#each category.products.items}}
  {{> components/products/product-card this}}
{{/each}}
</div>

The product object

A product page's product object carries the basics — title, description, pre-formatted price — plus its options and variants:

<h1>{{product.title}}</h1>
<p>{{product.price.formatted.without_tax}}</p>
<p>{{{product.description}}}</p>

Options and variants

A product with choices — size, color — defines options the shopper picks from, and each specific combination resolves to a variant with its own price, weight, and stock level, the same core idea as Shopify's variant model even though the field names differ:

{{#each product.options}}
  <label>{{this.display_name}}</label>
  <select name="attribute[{{this.id}}]">
  {{#each this.values}}
    <option value="{{this.id}}">{{this.label}}</option>
  {{/each}}
  </select>
{{/each}}

Custom fields

Like Shopify's metafields, BigCommerce lets a merchant attach arbitrary custom fields to a product — a name/value pair for data that doesn't fit any built-in field, such as a material or a warranty period. They're exposed to templates the same straightforward way as any other product property:

{{#each product.custom_fields}}
  <p>{{this.name}}: {{this.value}}</p>
{{/each}}

Product reviews

BigCommerce includes built-in product reviews (a merchant can moderate and approve submissions from the control panel), exposed to templates through a review summary and a list of individual reviews:

<p>{{product.reviews_rating_sum}} / 5 ({{product.reviews_count}} reviews)</p>

Related and featured products

BigCommerce also exposes curated product lists — related_products, featured_products on the home page context — meant to be dropped into a template the same way as a regular product loop, useful for cross-sell sections without writing custom query logic in the theme.