We Build Shopify Apps

Montreal-based Shopify experts cooking some Shopify apps.

Where to find the Add to Cart button selector?

Requires Ultimate Upsell for Shopify

You can find the Selector by inspecting element (right-click in your storefront, select "Inspect Element", and then use the pointer to on the Add to cart button). Search for the button class, and discard classes like "btn". If you have no idea, have a look at some popular theme's below.

find css selector add to cart


Right-click and COPY SELECTOR

In the Elements tab, click on the Add-to-Cart button to select it. Then, right-click on the code of the Add-to-Cart button. Then, select "Copy Selector". This should give you the CSS Selector.

It's possible that each product page has a different CSS selector. In case it doesn't work, or if you prefer having the same CSS selector for all Add-to-Cart buttons, read what's below.


Some theme examples

Each theme has its own CSS Selector for the Add to Cart button. Note that the . or # or anything in front of the words is very important to have a valid selector. Here's a list of some examples:

DEBUT: .product-form__cart-submit

SIMPLE: #AddToCart

👉 LEARN MORE ABOUT CSS SELECTOR


Add a new CSS selector by editing your theme file

Alternatively, if you don't find the theme's Add-to-cart button CSS selector, you can go edit your theme file and add a CSS class inside the add to cart button snippet of code.

Your Add-to-Cart button is located in a theme file called for example product-template.liquid or product-form.liquid (it varies from theme to theme). You can manually add a new unique word inside the add to cart button's snippet of code. Make sure you use something unique.

Get In Touch

Tabarnapp's mission is to help you get the most of each visit on your Shopify store.

E: support@tabarnapp.com