> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Rendering HTML with Ajax

Stencil allows you to render dynamic components on the fly. For example, note this default code in templates/components/products/quick-view\.html (note also this file name, which Handlebars will reference later in this example):

**`templates/components/products/quick-view.html`**

```handlebars title="templates/components/products/quick-view.html" showLineNumbers={false}
<div class="modal-body quickView">
    {{> components/products/product-view schema=false}}
</div>
```

To render a different template, you would instead reference that template’s file name. For example, assume that you want to substitute a custom template that you’ve named: `templates/components/products/quicker-view.html`.

This next code block is from the Stencil default theme’s `/assets/js/theme/global/quick-view.js` file. Note the `quicker-view.html` statements brought in to reference the new file name:

**`/assets/js/theme/global/quick-view.js`**

```js title="/assets/js/theme/global/quick-view.js" showLineNumbers={false}
let $modal = $('#modal'),
  $modalContent = $('.modal-content', $modal),
  $modalOverlay = $('.loadingOverlay', $modal),
  modalModifierClasses = 'modal--large';

$('body').on('click', '.quickview', (event) => {
  let productId = $(event.currentTarget).data('product-id');

  event.preventDefault();

  // clear the modal
  $modalContent.html('');
  $modalOverlay.show();

  // open modal
  $modal.foundation('reveal', 'open');

	//quicker-view.html statement, replacing the standard template's quick-view.html template
  utils.api.product.getById(productId, {template: 'products/quicker-view'}, function done(err, response) {
      $modalOverlay.hide();
      $modalContent.html(response);

      return new ProductDetails($modalContent, context);
  });
});
```

## Handlebar partial blocks for Stencil

Stencil supports handlebar partial blocks to help you create reusable templates with dynamic content. You can define a partial block using the following use cases:

```handlebars showLineNumbers={false}
{{#> components/ul }}
    {{> components/li text="Item 1" link="item_link_1"}}
    {{> components/li text="Item 2" link="item_link_2"}}
    {{> components/li text="Item 3" link="item_link_3"}}
{{/components/ul}}
```

**component/ul**

```
<ul>
    {{> @partial-block }}
</ul>
```

**component/li**

```
<li>
    <a href="{{link}}">{{text}}</a>
</li>
```

**Result**:

```
<ul>
    <li>
       <a href="item_link_1">Item 1</a>
    </li>
    <li>
       <a href="item_link_2">Item 2</a>
    </li>
    <li>
       <a href="item_link_3">Item 3</a>
    </li>
</ul>
```

Content placed inside the block will replace the partial's default content, allowing you to inject custom content while preserving the partial’s structure and logic. This format makes it easier to reuse templates with varying content across your application.