CSS class reference for Loomi for Shopify widgets

Loomi for Shopify supports CSS classes used to customize Search, Autosuggest, Collections, and Recommendations. 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 for Shopify app.

📘
Note
CSS classes let you restyle existing tile elements. If you need to add new elements, bind custom data, or match a fully custom design, use experience customization instead. For more information, see Customize product tiles.
The CSS classes in this article apply to Loomi for Shopify only and differ from those in the Search 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 across the Search, Collections, and Recommendations 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-widget-host--recommendations`	Modifier applied when the widget is a recommendations section.
`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-toolbar__filters-toggle`	Mobile-only button that opens the filters drawer. Hidden on desktop.
`br-toolbar__filters-drawer`	Wrapper around facets. Transparent on desktop, full-screen drawer on mobile.
`br-toolbar--filters-drawer-open`	Modifier applied to the toolbar when the mobile filters drawer is open.
`br-facets__container`	Wrapper around all facet filter groups.
`br-facets__selected`	Container for currently active filter chips.

Search widget

See Search for setup and configuration.

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

See Autosuggest for setup and configuration.

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.

Recommendations widget

See Recommendations for setup and configuration.

Class	Description
`br-recommendations`	Root container of the recommendations widget instance.
`br-recommendations__results`	Wrapper around the recommendations results area, including the heading and product grid.
`br-recommendations__heading`	Heading text rendered above the recommended products.
`br-recommendations__empty`	Message shown when no recommendations are available.

The recommendations widget reuses br-products__grid for its product grid and br-product-card for individual products. Target .br-recommendations .br-products__grid to style the recommendations grid specifically.

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__pages`	Wrapper for the page number and ellipsis controls.
`br-pagination__button`	Shared class on the previous and next step buttons.
`br-pagination__button--disabled`	Modifier applied to a step button on the first or last page.
`br-pagination__prev`	Previous-page button modifier.
`br-pagination__next`	Next-page button modifier.
`br-pagination__icon`	Wrapper around the arrow icon inside a step button.
`br-pagination__page`	Individual page number button.
`br-pagination__page--active`	Modifier applied to the currently active page number.
`br-pagination__ellipsis`	Gap indicator rendered between non-adjacent page numbers.

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.