How can I find my button's CSS selector for a campaign?

Knowledge Base    Frequently Asked Questions    How can I find my button's CSS selector for a campaign?

If you are on Shopify and want to replace your add to cart button, you will have the option of selecting your theme instead of following the steps below.

 

When you setup a campaign, you will need to let Better Button know which element on your website should be replaced. This could be an add to cart button, subscribe button, or any other button you'd like to use the app to design. 

 

 

CSS selectors will be different for different buttons on individual themes, so there are many possible values you could use for this setting. For the purposes of this example, we'll focus on the "Add to Cart" button on the product page of our website.

 

Locate the button and inspect it

Locate the button on your website. Right click (Ctrl+click on mac) and select "Inspect" or "Inspect Element", depending on your browser. Note that if you are using Safari, you will need to enable Developer Tools in order to perform this step. Alternatively, Chrome and Firefox have this capability out of the box.

 

This will open the Developer Tools pane or window in your browser. Under the "Elements" tab, you will see the HTML code for your button. Find and id or class value that is unique.

 

For the button in this example, there are 3 class names. Unfortunately here, there's no ID to use, so we'll have to use a class name. The last one seems most unique to the add to cart button on the product page since it is labeled "product__add-to-cart-button". 

 

Form your selector

CSS selectors for IDs and classes are simple. If you are selecting a class, then you add a . to the beginning of the class name.

For instance, the class name above could be written as:

.product__add-to-cart-button

If, instead of a class name, the HTML for our button looked like id="product__add-to-cart-button", then we could use a # symbol instead of a . and write it like this:

#product__add-to-cart-button

 

Update your settings

Once you have your CSS selector defined, you'll need to drop it into your campaign settings. Add some buttons to your campaign, enable it and you're ready to rock!

 

Everyone can make a Better Button.