Using the Selector Picker (Pick price & Pick add to cart)

The Pick price, Pick add to cart and Pick product image buttons help you automatically detect the correct selectors from your theme.

This is the recommended way to configure selectors, especially for custom themes.

Pick price on storefront

When you click Pick price on storefront:

1. A new window opens with your product page

2. You click on the price element displayed on the page

3. The app automatically generates the correct CSS selector

4. The selector is added to the Price selectors field

This ensures accurate price detection without manual selector writing.

Pick add to cart on storefront

When you click Pick add to cart on storefront:

1. A new window opens with your product page

2. You click the Add to Cart button

3. The app detects the correct button selector

4. The selector is added to the ATC button selectors field

This guarantees compatibility with theme-specific Add to Cart implementations.

Pick product image on storefront

When you click Pick product image on storefront:

1. A new window opens with your product page

2. You click on the product image or media area

3. The app generates the matching CSS selector

4. The selector is added to the Product image selectors field

This is used by the Customizer to mount the live preview over your product image and to react to calculator selections.

Why the picker matters

Using the picker:

• Reduces configuration errors

• Prevents broken Add to Cart flows

• Ensures compatibility with custom themes

• Saves time compared to manual selector setup

Manual vs automatic selectors

You can always:

• Edit selectors manually

• Add multiple fallback selectors

• Reset selectors to default values

However, using the picker is strongly recommended whenever possible.

💡 Tip:After changing themes, always re-run all three pickers to ensure everything still works.