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:
- Go to Stores > Settings > Configuration > Live Search > Storefront Features and set Enable Product Listing Widgets to “No”.
- 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.
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
.
Customize the product name by adding a rule to make them uppercase.
.ds-sdk-product-item__product-name {
text-transform: uppercase;
}
CSS classes
Product list
.ds-sdk-product-list
: Outer div.ds-sdk-product-list__grid
: Inner div
Product list pagination
.ds-plp-pagination
.ds-plp-pagination_item
.ds-plp-pagination_item--current
Widgets
.ds-widgets
: Outer div.ds-widgets__actions
: Left side inner div.ds-widgets__results
: Right side inner div
Sort dropdown
.ds-sdk-sort-dropdown
.ds-sdk-sort-dropdown__button
.ds-sdk-sort-dropdown__items
.ds-sdk-sort-dropdown__items--item
.ds-sdk-sort-dropdown__items--item-selected
.ds-sdk-sort-dropdown__items--item-active
Facets
.ds-plp-facets
.ds-plp-facets__header
.ds-plp-facets__header_title
.ds-plp-facets__header__clear-all
.ds-plp-facets__pills
.ds-sdk-pill
.ds-sdk-pill__label
.ds-sdk-pill__cta
.ds-plp-facets__list
.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
.ds-sdk-labelled-input
.ds-sdk-labelled-input__input
.ds-sdk-labelled-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
Loading
.ds-sdk-loading
.ds-sdk-loading__spinner
.ds-sdk-loading__spinner-label