Skip to main content

Recommendations and products

This guide provides a list of CSS classes you can use to style the Recommendation component in Experience Designer.

Wrappers:​

Some wrapper classes are added for Zoovu product components to add backgrounds or style them if needed.

  • .zoovu-component-product-attribute-wrapper
  • .zoovu-component-product-name-wrapper
  • .zoovu-component-product-top-pick-wrapper
  • .zoovu-component-product-image-wrapper
  • .zoovu-component-product-technical-details-wrapper
  • .zoovu-component-key-sentences-wrapper
  • .zoovu-component-product-price-wrapper
  • .zoovu-component-product-rating-wrapper
  • .zoovu-component-product-efficiency-wrapper
  • .zoovu-component-product-compare-wrapper
  • .zoovu-component-product-cta-buttons-wrapper
  • .zoovu-component-product-variants-wrapper
  • .zoovu-component-product-qr-code-wrapper
  • .zoovu-component-product-availability-wrapper
  • .zoovu-component-product-additional-text-wrapper
  • .zoovu-component-product-zoovu-ontology-expert-wrapper

Other classes:​

zoovu-component-top-product-heading​

Use this class to style the heading of the Recommendations component.

zoovu-component-top-product-tile-wrapper​

Use this class to add a background to the top product on the recommendations panel. It wraps the top product and includes all of the subcomponents in it.

zoovu-component-top-product-tile​

Style the top product title.

zoovu-component-top-product-image​

Style the top product image, e.g. move it to the left or right.

zoovu-component-top-product-price​

Style the price of the top product component.

zoovu-component-top-product-rating​

Style the rating of top products, e.g. move it to the left or right.

zoovu-component-top-product-efficiency​

Style the product efficiency section in the top product.

zoovu-component-top-product-pdp-button​

Style the top product PDP (Product Detail Page) button.

zoovu-component-top-product-add-to-cart-button​

Style the add to cart button.

zoovu-component-top-product-secondary-button​

Style a secondary button.

zoovu-component-top-product-pdf-button​

Style the PDF button.