Product Listing Page Widget

Documentation Commerce Live Search Guide

Last update: Tue Feb 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Services
Search

CREATED FOR:

Admin

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.

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.

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

.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

Widget results

.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

.ds-plp-facets
.ds-plp-facets__header
.ds-plp-facets__header_title
.ds-plp-facets__header__clear-all

w-350

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

w-350

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

w-350

.ds-plp-facets__list

w-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