Experience customization for Loomi AI for Shopify
Experience customization lets you adjust the widgets in your Shopify storefront to match your brand guidelines in order to increase revenue. Edit the markup for Search, Autosuggest, and Collections directly inside the Loomi AI for Shopify app — no connector code changes, no developer release cycle.
Customer responsibilityCustom HTML overrides are the customer's responsibility. Test all customization on your storefront before publishing and verify that they preserve the contract documented in the HTML and EJS reference.
What is Experience customization?
Loomi AI for Shopify renders Search, Autosuggest, and Collections through a set of web components with default HTML. Experience customization is the in-app editor that lets you replace that default HTML with your own EJS.
Before Experience customization, matching a storefront's brand required modifying connector code and waiting for a developer release. With the editor, an agency or in-house developer opens the relevant template, writes the HTML and EJS, validates it, and publishes. All in the same session.
Benefits
- Match your storefront's brand and design system without a developer release cycle.
- Publish customizations directly from the Shopify app — no code deploys.
- Iterate on layouts and components in the same session you opened the editor.
- Revert to the Loomi AI default in one click if you need a clean slate.
- Hand off implementation to agencies without giving them access to connector code.
Use cases
Customize pricing display with metafields
A fashion retailer wants to show retail price, member price (pulled from a Shopify metafield), and a calculated discount percentage on every product card — so shoppers can see how much they save as members. Using the product card template, the developer references the available EJS variables for metafields, adds the pricing logic, and publishes in one session.
Display color swatches and image galleries
A home goods merchant wants product cards to show color swatches linking to sibling products (using metafields) and reveal a second image on hover. EJS supports conditionals and loops, so the developer iterates over variant metafields to render swatches and adds hover-state image logic directly in the template.
Add quick view and variant availability
An electronics retailer wants a quick view button on product cards and a visual indicator of which variants are in stock. The developer adds a quick-view trigger element to the Product card template and uses EJS conditionals to display variant stock status — no connector code changes needed.
Match search results to your brand aesthetic
A merchant migrating from a legacy search provider to Loomi AI for Shopify Search needs the search results page to match the existing brand aesthetic exactly. The developer uses Experience customization to replicate the current design in HTML and EJS, validates it in the editor, and publishes. The merchant sees a seamless transition with no visual disruption.
Understanding Experience customization templates
A template controls how the widget looks. Each one is built from three kinds of building blocks that link your custom HTML to what the widget already does: the data you show, the parts shoppers can click, and the updates that follow.
| Building block | Description | Action |
|---|---|---|
| EJS variables — the data you display | The widget gives your template live values: product title, price, the list of swatches, and more. You print them with EJS tags, so <%= productCard.title %> shows the current product's title. | Place variables where you want the values to appear. They're read-only — the widget owns them and refreshes the template whenever they change. |
| Data attributes — the parts shoppers click | data-br-action drives interactions: a data-br-action on a swatch tells the widget it's a variant selector. Other data attributes, such as data-value and data-filter-value, only store values the widget reads when an action fires. | Keep data-br-action on the right element, or the interaction quietly stops even when the element still looks correct. Preserve value attributes so actions fire with the right data. |
| Custom events — the updates that follow | After the widget handles a click — a sort, a filter, a new page — it signals what changed so the grid reloads, filter pills update, and the page jumps. | Usually nothing. These keep the page in sync automatically. |
What you can customize
Experience customization exposes a template per widget surface and a template per component inside it. Edit any subset, and leave the rest on the Loomi AI default.
For customization options, see Loomi AI for Shopify: HTML and EJS reference.
Experience customization is available for:
- Search results
- Collections
- Autosuggest
Components inside each template:
| Component | What it controls |
|---|---|
| Page layout | Overall page structure: facet sidebar, product grid, sorting bar, pagination. |
| Product card | Individual product tiles — image, title, price, swatches, badges, and variant logic. |
| Text facet | Checkbox-based filter facet with the facet title and selectable values plus counts. |
| Slider facet | Range slider filter for price and other numeric attributes, with min and max controls. |
| Selected facet | Active filter pills with remove and clear-all options. |
Related articles
- Loomi AI for Shopify: CSS class reference — Stable CSS classes for styling widgets without overriding HTML.
- Loomi AI for Shopify personalization features — Search, Autosuggest, Collections, and other personalization features.
Updated 36 minutes ago