How to add a custom add to cart button selector?
Jonathan Biri avatar
Written by Jonathan Biri
Updated over a week ago

Preorder Bear is built to automatically detect the add to cart buttons in your product page, then replace them with the preorder button on eligible products.

But, sometimes auto detection does not work as Shopify themes greatly vary.

To help the app detect the add to cart button, you will need to manually link the button to the app.

Follow these steps:

(1) Open the app > advanced tab > scroll all the way down to "Custom add to cart button selector":

(2) Click on Add Selector:

(3) Open your storefront > go to the product page > hover on top of the Add to Cart button block > right click:

(4) Click "Inspect":

(5) Inside the bottom console, select the button group inside the elements section:

(6) Copy the specific class name:

For example: product-form__item--payment-button

(7) Go back to the app > paste the class name with . as prefix:

For example: .product-form__item--payment-button

(8) Click Save

Then, head back to the store and test it out.

That's it!

Did this answer your question?