HTML and EJS reference for Loomi AI for Shopify

Loomi AI for Shopify widgets let you replace their default HTML using Experience customization. This article lists mandatory data attributes, supported EJS variables, and a working example per component.

🛑
Customer responsibility
Custom HTML overrides are the customer's responsibility. Test all customization on your storefront before publishing and verify that they preserve the requirements in this article.
Examples show the structural markup and data hooks — add your own CSS to match your design system.

Access experience customization

Prerequisites

An active Loomi AI for Shopify application installed on your storefront.
At least one of Search, Autosuggest, or Collections active on the storefront.
Working knowledge of HTML and EJS templating for hands-on editing.

Navigate to the editor

Open the Loomi AI for Shopify app from your Shopify admin.
Click Experience customization in the app navigation.
Select the template you want to edit: Search, Collections, or Autosuggest.
Choose a component to expand the editor — Layout, Product card, Text facet, Slider facet, or Selected facet.
Edit the HTML and EJS, then save. Use Revert to Bloomreach template to clear any custom configuration.

Page layout anchors

Every widget renders inside a layout root that depends on four anchor elements. Define each anchor as a single element using the exact class name shown. You can add other classes to the same element (for example, class="br-facets-container custom-sidebar-style").

⚠️
Mandatory anchors
The four class names below must exist in your markup. If an anchor is missing, Loomi AI generates an empty div with the corresponding class and attaches it to the layout root in this sequence: facets, sorting, grid, pagination.

Class	Hosts	UI role
`br-facets-container`	Facet toolbar when `includeFacets` is true. Loomi AI adds `br-toolbar` and renders facet groups, the mobile filters drawer, and related controls.	Filter sidebar or top toolbar.
`br-sorting`	The `br-sorting` web component when sort options are configured. If there are no facets but sorting is enabled, `br-toolbar` attaches here instead. For more information, see Sorting reference	Sort by control.
`br-products-grid`	The product grid. Loomi AI appends a child `div.br-products__grid` containing `br-product-card` elements.	Product listing.
`br-pagination`	The `br-pagination` web component when pagination is enabled and `totalPages > 1`.	Page controls.

Example

<div>
  <aside class="br-facets-container"></aside>
  <div>
    <header>
      <div class="br-sorting"></div>
    </header>
    <div class="br-products-grid"></div>
    <footer>
      <div class="br-pagination"></div>
    </footer>
  </div>
</div>

Customer responsibility

Access experience customization

Prerequisites

Navigate to the editor

Page layout anchors

Mandatory anchors

Example

Related articles