Find CSS selectors and scope your CSS

Several STOQ settings ask you for a CSS selector or let you write custom CSS: placing the ‘Notify me’ button next to your theme’s Sold out button, inserting an on-page signup form, hiding a theme element, or restyling preorder elements. This guide shows how to find the right selector with your browser’s inspector, pick one that won’t break on a theme update, and scope your CSS so it only changes what you mean to.

Where selectors are used in STOQ:

• Styling preorder elements, see Customize preorder elements with CSS.
• Placing or styling the ‘Notify me’ widget in Dev mode, see Advanced placement and custom CSS.

Before you begin

Requirement	Detail
A desktop browser	Chrome, Edge, Firefox, or Safari, each has built-in developer tools
Basic CSS	You should recognize a class (.name) and an id (#name)
Know what you’re targeting	A STOQ element (to style it) or a theme element (to place a STOQ element next to it, or hide it)

Selector basics

A selector is the part of a CSS rule that decides which elements the rule applies to. The forms you’ll use with STOQ, from broadest to most precise:

• Tag (button, form): matches every element of that type on the page. Too broad on its own, use it only combined with a class.
• Class (.product-form): matches every element carrying that class. This is the one you’ll reach for most.
• Id (#AddToCart): matches the single element with that id. Ids are unique on a page, so they’re the most precise target.
• Compound (.a.b, no space): matches an element that has both classes at once, narrower than either class alone.
• Descendant (.parent .child, with a space): matches a .child anywhere inside a .parent. Child (.parent > .child) matches only a direct child.

Combining these is how you zero in on exactly one element, which is the heart of scoping (below).

STOQ gives its own elements class and id names you can target, most begin with restock-rocket- or stoq-. They’re listed in the two articles above, so for STOQ elements you usually don’t need to inspect at all.

Find a selector with the inspector

Use this for a theme element, or any STOQ element not listed in the reference articles.

1. Open the page on your live storefront

   Open the product (or collection) page in your browser. Use the live storefront, not the STOQ editor preview, since STOQ injects its elements only on the live store.

2. Open developer tools and pick the element

   Right-click the exact element you care about, the button, badge, or form field, and choose Inspect. Developer tools open with that element highlighted in the Elements panel. To re-select a different element, click the pointer icon in the top-left corner of developer tools (the “Inspect element” cursor), then hover over the page. Each element highlights with its size as you move, so you can land on the exact one before clicking.

3. Read the element’s tag, classes, and id

   The highlighted line reads something like <button class="product-form__submit button" id="AddToCart">. Each piece can become a selector: the tag (button), each class (.product-form__submit, .button), and the id (#AddToCart). Favor a class or id whose name describes the element (product-form__submit) over a generic utility class that many elements share (.button) or a random hashed one (.sc-bTfYFJ).

4. Walk up to a parent if you need a container

   The lines just above your element in the tree are its parents. Click them one by one to see what each wraps, the matching area highlights on the page. A parent with a clear class, such as .product-form or .card, is useful for scoping a rule to that section, or as the container selector some STOQ fields ask for.

5. Test the selector before you use it

   Confirm your pick matches what you expect, and only that. In the Elements panel press Ctrl+F (Cmd+F on Mac) and type your selector, for example .product-form__submit. Developer tools jumps through every match and shows a count: one match (or only the elements you intend) means it’s well scoped, while dozens of matches means it’s too broad. You can also run document.querySelectorAll('.product-form__submit').length in the Console tab to count matches.

Tip

Avoid your browser’s Copy > Copy selector option. It builds a long, exact path with :nth-child() steps that breaks as soon as the theme markup changes. A short, readable class or id is far more reliable.

Choose a selector that lasts

• Prefer a meaningful class or id (.product-form, #AddToCart) over auto-generated ones. Hashed names like .sc-bTfYFJ or .css-1a2b3c are generated by the theme’s build and change whenever it updates, so a rule using them stops working silently.
• Keep it short. Long descendant chains and :nth-child() paths are fragile. One good class or id usually does the job.
• Check it’s unique enough. If several elements share the class, your rule hits all of them. That’s fine when you want it, but scope it (below) when you don’t.

Scope your CSS so it only hits what you mean

“Scoping” is writing the selector narrowly enough that your rule changes the intended element and nothing else. Two opposite problems come up, and they have opposite fixes:

• Your rule hits too much, for example it restyled other buttons too: make the selector narrower.
• Your rule does nothing, because a theme rule is overriding it: make the selector win on specificity.

Narrow the selector

• Target STOQ, not the whole theme. Write rules against STOQ’s own classes, not bare tags. button { ... } restyles every button on your store, while .restock-rocket-preorder-button { ... } changes only the preorder button.
• Scope to a page type. STOQ adds page-specific classes, so chain them. For example .restock-rocket-preorder-button.restock-rocket-preorder-button-collection targets the preorder button on collection pages only, and for the ‘Notify me’ button .restock-rocket-button-product versus .restock-rocket-button-collection.
• Scope to one container. Prefix a child with its parent to limit the rule to that container, for example .stoq-preorder-modal #preorder-accept-button styles the Continue button inside the preorder modal and nowhere else.

Win on specificity

When your rule is correct but a theme rule overrides it, the browser is keeping the more specific selector. Specificity ranks, from weakest to strongest: tags (button) lose to classes (.button), which lose to ids (#AddToCart). A selector with more ids beats one with fewer; among selectors that tie, the one defined later wins.

• Add specificity by chaining. body .restock-rocket-preorder-button beats a plain .restock-rocket-preorder-button because it carries an extra element. Chaining a parent you already know is the cleanest way to win, and it keeps the rule readable.
• Use !important as a last resort. Appending !important to a declaration, such as color: red !important;, overrides normal specificity outright. It works, but it’s hard to override again later, so raise specificity first and reach for !important only when you must.

Mind how far the field reaches

The preorder Custom CSS field is stored shop-wide and applies to preorder elements across every offer. The ‘Notify me’ Custom CSS applies wherever the widget loads. If you need a change on only some products, scope it with a theme selector that exists only on those products or templates.

Find a theme selector for STOQ placement

Some STOQ settings need a selector from your theme, not from STOQ:

• The ‘Notify me’ Custom position selector, and the inline Form container selector, mark the theme element the widget or form is inserted next to, for example .product-form.
• Hiding your theme’s native Sold out button so only ‘Notify me’ shows needs that button’s own selector.

Inspect the theme element as above, pick its class or id, and paste it into the STOQ field. These elements belong to your theme, so the selector varies between themes. If you can’t find a reliable one, STOQ support can set it up for you: open the purple chat icon in the bottom-right of the STOQ app and choose Talk to a human.

Verify it worked

1. Save your changes in STOQ.
2. Open the page on your live storefront in an incognito window and hard-refresh (Ctrl+Shift+R, or Cmd+Shift+R on Mac).
3. Confirm the style or placement is where you expect.
4. Right-click the element and choose Inspect again. If your rule shows struck through in the Styles panel, a more specific theme rule is winning, raise specificity or add !important.

Troubleshooting

Your selector doesn't match anything

The class or id is wrong, or you’re inspecting a different page or theme than the live one. Re-inspect the element on the live storefront and copy the class or id exactly, including its capitalization.

Your rule is ignored or shows struck through in DevTools

A theme rule with higher specificity is overriding it. Add !important to the declaration, or raise specificity by chaining a parent, for example body .restock-rocket-preorder-button.

Your rule changed elements you didn't mean to

The selector is too broad. Scope it with a STOQ class instead of a bare tag, chain a page-specific class, or prefix a parent container so it only matches inside that element.

The class name looks random, like .sc-bTfYFJ

That’s a class the theme generates at build time, and it can change on the next theme update. Target a stabler ancestor with a readable class or id instead, or a STOQ class if you’re styling a STOQ element.

Your changes don't show at all

Confirm you clicked Save, hard-refresh to clear the cache, and check you’re on the live storefront. Custom CSS and placement don’t render in the STOQ editor’s preview pane.

FAQ

Do I have to inspect the page to style STOQ elements?

Usually not. STOQ’s class and id names are listed in Customize preorder elements with CSS and Advanced placement and custom CSS. Inspecting is mainly for theme elements, or a STOQ element that isn’t listed.

Which selector should I give STOQ for custom placement?

A class or id from your theme that marks where the widget should sit, such as .product-form for the product form area. STOQ inserts the button or form relative to that element.

Why does my browser's Copy selector give such a long path?

It records the element’s exact position in the page with :nth-child() steps rather than a name. That path breaks when the theme markup shifts. Use a short class or id instead.

Can I scope custom CSS to a single product?

The STOQ CSS fields apply store-wide, so there’s no per-product CSS field. To limit a rule, chain a theme selector that only exists on that product or its template.

Will a theme update break my selector?

It can, if you used an auto-generated class or a deep :nth-child() path. Selectors built on meaningful classes and ids, or on STOQ’s own class names, are much more durable.

Related guides

Customize preorder elements with CSSThe full list of preorder selectors, with styling examples.

Advanced placement and custom CSSDev mode custom position, inline form, and the 'Notify me' selectors.

'Notify me' button on store pagesWhere custom position selectors place the button on each page type.

Test your STOQ setupConfirm your changes on the live storefront.