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 Live Search PLP widget is enabled by default for new installations. If you are upgrading Live Search and the PLP widget has already been turned off, it will remain so.

To disable the PLP widget:

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

Widget features

The PLP widget provides a range of features that are expected in a searchable product page. These include:

  • Filtering by attributes
  • Support for color swatches
  • Add to Cart functionality
  • Multiple language support
  • Price sliders

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 are inherited; button applies 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 {width="350"}

  • .ds-plp-facets__pills
  • .ds-sdk-pill

Facet pills {width="350"}

  • .ds-sdk-pill__label
  • .ds-sdk-pill__cta

Facets label {width="350"}

  • .ds-plp-facets__list

Facets list {width="350"}

  • .ds-sdk-input
  • .ds-sdk-input__label
  • .ds-sdk-product-item__product-swatch-group
  • ds-sdk-product-item__product-swatch-item
  • .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

recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055