> 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

Plan: Stencil Developer

Lesson 17 of 31 · 15 min

## Render Dynamic Components

Stencil allows you to render dynamic components on the fly. For example, note this default code in *templates/components/products/quick-view\.html*.

```jsx showLineNumbers={false}
<div class="modal-body quickView">
    {{> components/products/product-view schema=false}}
</div>
```

> **Info**
>
> Take note of this file name, which Handlebars will reference later in this lesson.

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.

> **Info**
>
> NOTE: The *quicker-view\.html* statements brought in to reference the new file name.

**EXAMPLE:**

```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);
  });
});
```

You should be able to render dynamic components on the fly.