Styling example
You can customize the look and feel of the PLP widget to match your site using CSS.
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
Disabling the PLP widget
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.