CSS Selector Trigger

Use the CSS Selector trigger when you want an offer popup to open after a customer clicks a specific element on your storefront.

Example uses:

• A custom checkout button
• A payment button in the cart drawer
• A "Buy now" area in your theme
• A custom banner/image or call-to-action block

What To Enter

Enter a CSS selector that matches the clickable element you want to use as the trigger.

Examples:

• button.checkout-button
• a[href="/checkout"]
• div.footer__payment
• [data-testid="sticky-atc"]

The selector must match the element on your live storefront that the customer clicks.

Use button or a when the clickable element is a button or link. Only use div when that div is the clickable area.

How To Find A CSS Selector

1. Open your storefront in Chrome, Edge, or another Chromium browser.
2. Go to the page where the button or element appears.
3. Right-click the element you want to use.
4. Click Inspect.
5. In the developer tools panel, the matching HTML element will be highlighted.
6. Look for a stable identifier on that element, such as:

• a class name, like checkout-button
• an attribute, like data-testid="sticky-atc"
• a link target, like href="/checkout"

7. Build a selector using one of the formats below.
8. Paste that selector into the CSS Selector field in the app.
9. Save the offer and test it on your storefront.

Recommended Selector Formats

Use the simplest selector that uniquely identifies the correct element.

Good options:

• button.primary-checkout
• button[name="checkout"]
• a[href="/checkout"]
• [data-testid="cart-checkout-button"]
• div.footer__payment

You can combine a tag and a class:

• button.checkout-button
• div.footer__payment

You can also target by attribute:

• [aria-label="Checkout"]
• [data-button="checkout"]

Choose Stable Selectors

Prefer selectors based on values that are unlikely to change.

Best choices:

• data-* attributes
• name
• href
• clear, permanent class names added by the theme or app

Acceptable choices:

• simple tag and class combinations, such as button.cart-checkout
• simple container selectors, such as div.cart-footer

Avoid These Selectors

Do not use selectors that are likely to break after a theme update or app change.

Avoid:

• very long selectors copied from the browser
• selectors that include many parent elements
• generated classes, such as xYz12ab or svelte-abc123
• position-based selectors, such as :nth-child(3)
• text-based assumptions
• IDs or classes that look random or change between pages

Avoid examples like:

• body > div:nth-child(2) > div > button
• .svelte-bm3bl2
• #shopify-section-template--12345

Simple Rules

• Use the clickable element itself when possible.
• Keep the selector short.
• If there are several similar elements, choose something more specific so only the correct one matches.
• If the selector matches too many elements, the popup may open in the wrong place.
• If the selector does not match anything, the popup will not open.

Testing Checklist

After saving your offer:

1. Open the storefront page where the element appears.
2. Click the element.
3. Confirm the correct popup opens.
4. Test on desktop and mobile if the theme uses different buttons or layouts.
5. If it does not work, inspect the element again and choose a more stable selector.

Quick Examples

Use:

• button.checkout-button
• a[href="/checkout"]
• [data-testid="buy-now-button"]

Do not use:

• body > div:nth-child(4) > div > button
• .svelte-abc123
• .btn

.btn is often too broad because it may match many buttons on the page.

Updated on: 02/04/2026