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

Written By Floris de Vries

Last updated 2 days ago

The Pick price and Pick add to cart 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.


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 the selector picker to ensure everything still works.