Skip to main content

Configurators

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

Product Section​

Buttons​

.zoovu-component-configurator-restart-button​

Use this class to style the restart button of the configurator.

.zoovu-component-configurator-next-button​

Style the "Next" button in the configurator.

.zoovu-component-configurator-back-button​

Style the "Back" button in the configurator.

.zoovu-component-configurator-hot-spot​

Style interactive hotspots in the configurator interface.

.zoovu-component-configurator-canvas​

Style the canvas area where the product configuration happens.

.zoovu-component-configurator-selection-summary-bottom-left-side​

Style the left side of the selection summary at the bottom of the configurator.

.zoovu-component-configurator-selection-summary-bottom-mid-side​

Style the middle section of the selection summary at the bottom.

.zoovu-component-configurator-selection-summary-bottom-right-side​

Style the right section of the selection summary at the bottom.

.zoovu-component-configurator-navigation-bottom-bar-first-row​

Style the first row of the bottom navigation bar in the configurator.

.zoovu-component-configurator-navigation-bottom-bar-second-row​

Style the second row of the bottom navigation bar in the configurator.

.zoovu-component-configurator-navigation-bottom-bar-previous-button​

Style the "Previous" button in the bottom navigation bar.

.zoovu-component-configurator-navigation-bottom-bar-next-button​

Style the "Next" button in the bottom navigation bar.

Style the "Next" button in the carousel navigation.

Style the "Previous" button in the carousel navigation.

.zoovu-component-configurator-product-section-wrapper​

Style the wrapper for the product section in the configurator.

.zoovu-component-configurator-product-list-section-title​

Style the title of the product list section.

.zoovu-component-configurator-product-list-title​

Style the title of the product list.

.zoovu-component-configurator-product-list-wrapper​

Style the wrapper for the product list.

.zoovu-component-configurator-section-product-wrapper​

Style the wrapper for each product section.

.zoovu-component-configurator-section-product-image​

Style the product image in the product section.

.zoovu-component-configurator-section-product-name​

Style the name of the product in the section.

.zoovu-component-configurator-section-product-price​

Style the price of the product in the section.

.zoovu-component-configurator-add-product-button​

Style the "Add Product" button in the configurator.

.zoovu-component-configurator-section-back-button​

Style the "Back" button in the section of the configurator.

.zoovu-component-configurator-section-reset-button​

Style the "Reset" button in the section.

.zoovu-component-configurator-section-complete-button​

Style the "Complete" button in the section.

.zoovu-component-configurator-change-selection-button​

Style the button that allows users to change their product selection.

.zoovu-component-configurator-close-button​

Style the button that allows users to close their product selection.