Checkout Plus Selectors

How to Choose the Right Selector (and Why It Matters)

Whether you’re customizing a checkout screen, adding Corso’s Delivery Guarantee widget, or trying to shift a button into place, getting your selector right is everything. It’s how you make sure your style changes hit the right element — and only the right element — without breaking anything else.

In this guide, we’ll walk through how to confidently select the correct elements from the DOM, especially in Shopify-based storefronts. We’ll keep it simple and practical.

Step 1: Start by Inspecting the Element

Open up your browser’s DevTools (right-click → Inspect), and find the element you want to target. This could be a button, subtotal text, modal, or something else.

What you’re looking for:

The HTML tag (like button, div, span)
Any class names — these usually look like .checkout-btn or .cart-subtotal
Any ID — if it has one, it’ll look like #checkout
Any data attributes like data-testid, data-role, or data-name

Also check what the element is inside of — the parent container can help you narrow down your target.

Step 2: Choose a Selector That’s Clear and Reliable

Your goal is to pick something specific enough to be accurate, but not so brittle that it breaks the moment the theme gets an update.

Here are some reliable options:

Class-based selectors (like .checkout-btn) work well if the class name is unique to that element.
Attribute-based selectors (like something with name="checkout") are especially reliable in Shopify themes.
Container + child combos help when you need precision, like selecting a button inside a specific wrapper.

Avoid relying on things like long autogenerated class names — they tend to change often and break your layout.

What About Shopify?

Since you’re working in a Shopify theme, you’re in luck — Shopify tends to follow consistent patterns. Here are the most common selectors we target (and why):

button with name="checkout"
This is almost always the actual Checkout button. It’s a stable and dependable target.
.cart_ctas
This is the container that holds checkout-related buttons. If you’re injecting anything into the cart or want to rearrange button order, start here.
.cart-subtotal or data attributes like data-testid="cart-subtotal"
These are great for reading or styling the cart’s total price display.
.modal-close or .close-modal
Used for modals — whether they’re from the theme itself or a third-party app.

The key here is consistency. Shopify uses these patterns across most themes, which means your selectors are more likely to work with future updates or different themes.

Step 3: Confirm It’s Working

After choosing your selector:

Check if it highlights the right thing in DevTools
See if your CSS or scripts affect the expected element
Watch for elements that load dynamically — if it’s not there at page load, you might need to wait for it to appear before targeting it

This is especially true with AJAX-powered carts or modals — what you see at first might not be the full picture.

Recap: Common Checkout Elements to Target

Element	Common Selector
Checkout Button	`button` with `name="checkout"`
Subtotal Display	`.cart-subtotal` or `data-testid="cart-subtotal"`
Checkout Container	`.cart_ctas`
Modal Close Button	`.modal-close`, `.close-modal`

These are solid starting points. Use them as anchors, and work outward as needed.

Troubleshooting Tips

If things aren’t working as expected:

Selector returns nothing? Double-check your spelling and make sure the element is loaded.
Wrong element? Add context with a parent container to refine the target.
Element looks right but doesn’t respond? It may be hidden, not yet rendered, or overlaid.

You’ve Found Your Selector!

Great! Now that you have your selector, you can use it in the CSS Selector field in Corso’s Checkout Plus settings. This will allow you to customize the checkout experience, add the Delivery Guarantee widget, or make other modifications as needed.

Checkout Plus Setup Head back to the setup guide to finish configuring Checkout Plus.

Need Help?

Having trouble?

Please feel free to reach out to our team at CORSO. We’re always happy to help!