How do I specify DOM selectors for Color Swatches Pro extension?

Color Swatches Pro extension employs AJAX functionality to update the information in the blocks of a product page without full page reload. It allows customers to receive the relevant information on a particular simple product on the fly.

For a proper performance, it is recommended that all the DOM selectors are specified appropriately. If you experience that some of the blocks are not being updated porperly, please check the following settings: 

To configure, go to Admin panel -> System -> Configuration -> Color Swatches Pro -> CSS Selectors for Reloadable Information

To find CSS selectors, please make the following steps:

1)  Hover the cursor over the needed element and right click mouse.

2)  Select Inspect (Chrome) or Inspect Element (Firefox) from the dropdown.

3)  Take a look at the highlighted code in the page source tab.

4)  Look for the selectors, that match a name of element you are looknig for. (In Firefox) Right click the highlighted code and choose Copy CSS selector.

NOTE: For instance, we are looking for sku and short description selectors. Normally, it is div.sku and div.short-description. Have a look at the screenshot. In the settings, input either div.sku or .sku in the SKU field.

Perfectly Complements Your Color Swatch Extension!

Boost your Magento 2 store's visual appeal with Amasty's Product Labels Extension. This extension allows you to create eye-catching labels for your products, highlighting special offers and new arrivals. It seamlessly integrates with your Color Swatch Extension to enhance product presentation and attract customer attention.