Product Listing Page Widget

The Live Search Product Listing Page Widget (PLP) uses the Commerce Services platform to provide a performant, searchable, and facet-able product listing page. This topic describes how to enable and style the PLP widget.

Enabling the PLP widget

When the Live Search service is installed, the default search functionality is converted to Live Search automatically.
The PLP widget must be enabled in the Admin.

  1. Go to Stores > Settings > Configuration > Live Search > Storefront Features and set Enable Product Listing Widgets to “Yes”.
  2. Select Save Config to save the setting.

Styling example

You can customize the look and feel of the PLP widget to match your site using CSS.

NOTE

Elements with custom classes within an Adobe Commerce theme are not inherited. These elements must be targeted by their specific class to match the custom classes; primary action classes will not work on a widget button.
Generic targeted elements within the CSS will be inherited; button will apply to widget buttons.

The highlighted divs contain the target class ds-sdk-product-item__product-name.

Pagination

Customize the product name by adding a rule to make them uppercase.

.ds-sdk-product-item__product-name {
 text-transform: uppercase;
}

Pagination

CSS classes

Product list

  • .ds-sdk-product-list: Outer div
  • .ds-sdk-product-list__grid: Inner div

Pagination

Product list pagination

  • .ds-plp-pagination

Pagination

  • .ds-plp-pagination_item

Pagination item

  • .ds-plp-pagination_item--current

Pagination current item

Widgets

  • .ds-widgets: Outer div
  • .ds-widgets__actions: Left side inner div
  • .ds-widgets__results: Right side inner div

Widget results

Sort dropdown

  • .ds-sdk-sort-dropdown

Sort dropdown

  • .ds-sdk-sort-dropdown__button

Dropdown button

  • .ds-sdk-sort-dropdown__items

Dropdown items

  • .ds-sdk-sort-dropdown__items--item

Dropdown item

  • .ds-sdk-sort-dropdown__items--item-selected

Dropdown selected item

  • .ds-sdk-sort-dropdown__items--item-active

Dropdown active selection

Facets

  • .ds-plp-facets
  • .ds-plp-facets__header
  • .ds-plp-facets__header_title
  • .ds-plp-facets__header__clear-all
Facets header title
  • .ds-plp-facets__pills
  • .ds-sdk-pill
Facet pills
  • .ds-sdk-pill__label
  • .ds-sdk-pill__cta
Facets label
  • .ds-plp-facets__list
Facets list
  • .ds-sdk-input
  • .ds-sdk-input__label
  • .ds-sdk-input__options
  • .ds-sdk-input_fieldset_show-more

Input

  • .ds-sdk-labelled-input

Labelled input

  • .ds-sdk-labelled-input__input
  • .ds-sdk-labelled-input__label

Input label

Product item

  • .ds-sdk-product-item
  • .ds-sdk-product-item__image
  • .ds-sdk-product-item__product-name
  • .ds-sdk-product-item__product-options
  • .ds-sdk-product-price
    • .ds-sdk-product-price--no-discount
    • .ds-sdk-product-price--grouped
    • .ds-sdk-product-price--bundle
    • .ds-sdk-product-price--discount

Product

Loading

  • .ds-sdk-loading
  • .ds-sdk-loading__spinner
  • .ds-sdk-loading__spinner-label

Loading indicator

On this page