Loomi AI for Shopify: CSS class reference

Loomi AI for Shopify supports CSS classes used to customize Search, Autosuggest, and Collections. The classes won't change between non-breaking releases, so your styles stay intact when the app updates.

To apply custom styles, use the Custom CSS setting available in each widget's configuration in the Loomi AI for Shopify app.

📘
The CSS classes in this article apply to Loomi AI for Shopify only and differ from those in the Discovery Shopify app.

Naming convention

All classes follow a BEM naming convention with a br- namespace:

Block: br-{block-name} — for example, br-search-widget
Element: br-{block-name}__{element-name} — for example, br-search-widget__input
Modifier: br-{block-name}--{modifier} — for example, br-widget-host--search

Names use lowercase and kebab-case segments.

Stability rules

Documented class names won’t be renamed or removed without a major version bump.
New classes may be added at any time.
If a rename is unavoidable, backward-compatibility aliases will be kept for at least one major version.

Shared classes

These classes apply to both the Search and Collections widgets.

Class	Description
`br-widget-reset`	Base reset layer applied to all widget host elements. Ensures style isolation from your store's theme.
`br-widget-host`	Top-level wrapper around any widget instance.
`br-widget-host--search`	Modifier applied when the widget is a search page.
`br-widget-host--collections`	Modifier applied when the widget is a collections page.
`br-collections`	Root container of the Collections widget.
`br-collections__results`	Wrapper around the product results area within Collections.
`br-products__grid`	Grid layout container that holds product cards.
`br-toolbar`	Toolbar row containing sorting controls, pagination, and the show all filters toggle.
`br-facets__container`	Wrapper around all facet filter groups.
`br-facets__selected`	Container for currently active filter chips.

Search widget

Class	Description
`br-search-widget`	Root container of the full search page widget.
`br-search-widget__bar`	Search bar area containing the input field, clear button, and submit button.
`br-search-widget__input`	Text input field where the user types a search query.
`br-search-widget__clear`	Button that clears the current search input.
`br-search-widget__submit`	Button that submits the search query.
`br-search-widget__query-display`	Block showing the "Showing results for…" message after a search.
`br-search-widget__redirect-display`	Block shown when the search triggers a keyword redirect.
`br-search-widget__did-you-mean`	Block containing "Did you mean?" spelling suggestions.
`br-search-widget__count-display`	Block displaying the total number of results found.
`br-search-widget__results`	Wrapper around the search results product grid.

Autosuggest

Search page autosuggest

These classes apply to the autosuggest dropdown that appears on the search results page.

Class	Description
`br-search-autosuggest`	Root container of the autosuggest dropdown on the search page.
`br-search-autosuggest__panel`	Inner panel holding all autosuggest content.
`br-search-autosuggest__list`	List of query suggestion items.
`br-search-autosuggest__item`	Single suggestion entry within the suggestion list.
`br-search-autosuggest__brands`	Section displaying brand suggestions related to the query.
`br-search-autosuggest__products`	Section displaying product previews within autosuggest.
`br-search-autosuggest__show-all`	Link or button that navigates to full search results for the current query.

Header and modal autosuggest

These classes apply to the autosuggest dropdown that appears in your store's header search box or modal.

Class	Description
`br-autosuggest`	Root container of the header or modal autosuggest overlay.
`br-autosuggest__panel`	Inner panel holding suggestions and product previews.
`br-autosuggest__list`	List of query suggestion items.
`br-autosuggest__item`	Single suggestion entry within the suggestion list.
`br-autosuggest__title`	Section heading label (for example, "Suggestions" or "Products").
`br-autosuggest__products`	Section displaying product previews within autosuggest.
`br-autosuggest__show-all`	Link or button that navigates to full search results for the current query.

Product card

Class	Description
`br-product-card`	Root element of an individual product card.
`br-product-card__image`	Product image element inside the card.
`br-product-card__title`	Product title text.
`br-product-card__price`	Container for all price information.
`br-product-card__price-sale`	Discounted sale price value.
`br-product-card__price-original`	Original strikethrough price shown alongside a sale price.
`br-product-card__add-to-cart`	Add-to-cart button on the product card.

Facets

Class	Description
`br-facet`	Root element of a single facet filter group (for example, "Color" or "Size").
`br-facet__title`	Clickable heading of the facet group.
`br-facet__option`	Individual selectable filter option within a facet.
`br-facet__option--selected`	Modifier applied to a facet option that is currently active.
`br-slider-facet__container`	Root element of a range slider facet (for example, a price range filter).
`br-facet-chip`	Pill element representing a single active filter that can be removed.

Pagination

Class	Description
`br-pagination`	Root container of the pagination controls.
`br-pagination__page`	Individual page number button.
`br-pagination__page--active`	Modifier applied to the currently active page number.

Sorting

Class	Description
`br-sorting`	Root container of the sort-by dropdown.
`br-sorting__dropdown`	Dropdown panel listing available sort options.
`br-sorting__option`	Individual sort option within the dropdown.