Developer settings: storefront selectors for custom themes
Developer settings in Timesact hold the CSS selectors the storefront script uses to find your theme's product form, Add to cart button, badges, Quick view pop-ups and the Wishlist header icon. Timesact places itself on most Shopify themes automatically, so these fields are for developers, agencies and confident merchants with a custom layout, a custom Quick view, or a header that needs the Wishlist heart in a specific spot. You find them in Timesact under Billing & Account → Developer settings, on every plan, and our support team can set them for you.
Plan: All plans (the Wishlist fields matter on PRO, where Wishlist runs) · Where: Timesact → Billing & Account → Developer settings
Before you start
- The Timesact App Embed is on and saved in the theme you are working on. In Shopify admin, go to Online Store → Themes, click Edit theme, open App embeds in the sidebar, turn on Timesact V2 and click Save. The App Embed is per theme, so a duplicated or new theme needs it switched on too.
- You can read your theme's HTML in the browser's Inspect tool (see "How to find a selector" below).
- The product page fields use jQuery selectors, so plain CSS works, and so do jQuery extras such as
:visibleand:first. The two Wishlist fields use plain CSS only. - Our support team can fine-tune these selectors for your theme as part of setup. Send us the store link and the page where you want Timesact to appear.
How Timesact uses Developer settings on your storefront
Timesact's App Embed loads one storefront script on every page. When the page loads, the script reads your saved selectors and merges them over its built-in defaults, field by field. A field you have changed uses your value; every other field keeps the default.
- Saved changes apply on the next page load. Your selectors are stored on your shop and read by the App Embed each time a storefront page renders. There is no cache to clear in Timesact.
- Each element has a fallback. On the product page, if the Badge selector finds nothing, Timesact uses the product media (
.product__media, .product-media). If Message or Widgets finds nothing, Timesact uses the Add to cart button as the anchor. On collection cards the badge falls back to the card itself, and in Quick view to the pop-up itself. - Featured product sections on the home page or other pages use the Product page selectors, since they share the product page markup.
- Several forms on one page are supported. Timesact applies the button and message to every match of Form, for example a main product form and a sticky Add to cart bar.
A custom selector is needed when your theme's markup does not match the defaults: a renamed form or button class, a custom gallery wrapper for the badge, a Quick view built by an app or custom code, or a header without a standard cart link.
Product page fields
The Product page section: "CSS selectors used to locate key elements on the product detail page."
Field | Help text in the app | How Timesact uses it | Example custom value |
|---|---|---|---|
Form | The cart form element | The product form that holds the variant and the Add to cart button. Every other product page field (except Badge and Shopify payment button) is looked up inside this form. |
|
Add to cart button | The add-to-cart button element | The first match inside each form is the button Timesact relabels for Pre-order. Back in Stock and Coming Soon show their own button in its place. |
|
Add to cart button text | Inner text element of the add-to-cart button (optional override) | The element inside the button whose text Timesact replaces. Leave it empty and Timesact picks the label for you (a |
|
Badge | Element where the badge is injected | The badge (for example a Pre-order ribbon) is added inside the first match, usually the media gallery. |
|
Message | Element where the message is injected | The product page message goes Above button or Below button of this element, following Message placement in your template. |
|
Variant selector | Variant option inputs (select, radio, etc.) | Timesact watches these inputs to know when the shopper switches variant. |
|
Widgets | Element where widgets are injected | The anchor for the countdown timer (placed Above or Below, following Timer placement) and for the split payment option, placed above it. |
|
Quantity input | The quantity input element | Leave the default; most stores never change it. |
|
Price container | The product price element | Leave the default; most stores never change it. |
|
Shopify payment button | Dynamic checkout / payment button | Timesact hides this element (for example Buy it now) while Pre-order, Back in Stock or Coming Soon is active on the variant, and shows it again for regular stock. |
|
Variant change delay (ms) | Debounce delay after a variant change before re-evaluating | How long Timesact waits after a variant change before it updates the button, message and badge. The default is 50. Raise it when your theme redraws the product section slowly after a variant change. |
|
Collection page fields
The Collection page section: "CSS selectors used to locate elements on collection and search result pages."
Field | Help text in the app | How Timesact uses it | Example custom value |
|---|---|---|---|
Product card | The top-level product card container | Each match is one product. Timesact reads the product from it and applies the collection button and badge. Quick view and the Wishlist card heart also use it. |
|
Badge | Element where the badge is injected on product cards | The collection badge goes inside the first match in the card, or inside the card itself when nothing matches. |
|
Form | The cart form element on collection cards | The card's quick add form, when your theme has one. |
|
Add to cart button | The add-to-cart button on product cards | The button on the card that Timesact relabels and styles. |
|
Add to cart button text | Inner text element of the add-to-cart button (optional override) | The element inside the card button that holds the label. Optional. |
|
Quick view fields
The Quick view section: "CSS selectors used to locate elements inside quick-view modals or drawers."
Quick view works in three steps. A click on the Quick-view trigger tells Timesact which product it belongs to (read from the surrounding Product card). Timesact then waits for the Container to become visible, finds the Form inside it, and applies the button, message, badge and timer there.
Field | Help text in the app | How Timesact uses it | Example custom value |
|---|---|---|---|
Quick-view trigger | The button that opens the quick-view | Clicks on any match open Timesact's Quick view handling, including triggers added later by infinite scroll. |
|
Container | The quick-view modal or drawer wrapper | The pop-up or drawer Timesact waits for. The default adds |
|
Form | The cart form inside the quick-view | The product form inside the Container. |
|
Add to cart button | The add-to-cart button inside the quick-view | The button Timesact relabels for Pre-order, or replaces with the Back in Stock or Coming Soon button. |
|
Add to cart button text | Inner text element of the add-to-cart button (optional override) | The label element inside that button. Optional. |
|
Variant selector | Variant option inputs inside the quick-view | Watched for variant changes inside the pop-up. |
|
Message | Element where the message is injected inside the quick-view | Anchor for the message. Falls back to the Add to cart button. |
|
Widgets | Element where widgets are injected inside the quick-view | Anchor for the timer and split payment option. Falls back to the Add to cart button. |
|
Badge | Element where the badge is injected inside the quick-view | The badge goes inside the first match, or inside the pop-up when nothing matches. |
|
Shopify payment button | Dynamic checkout / payment button inside the quick-view | Hidden while Pre-order, Back in Stock or Coming Soon is active, as on the product page. |
|
Wishlist fields: Product anchor and Header cart
The Wishlist section: "CSS selectors used to place the wishlist button and header icon." Wishlist runs on PRO plans. These two fields use plain CSS selectors.
Field | Help text in the app | How Timesact uses it | Example custom value |
|---|---|---|---|
Product anchor | Element the wishlist icon or button is inserted after | Looked up inside each product page Form. With Show on product page set to Button, the Add to wishlist button goes right after this element. With Heart icon, the anchor and the heart sit side by side in one row. |
|
Header cart | Header element the wishlist icon is inserted before | With Show header icon on, the Wishlist heart and its count go right before the first match, so the heart sits to the left of your cart icon. |
|
The Wishlist heart on collection cards and inside Quick view follows the Collection page and Quick view fields: it goes on each Product card, and inside Quick view it goes after the Quick view Add to cart button.
How to change a selector
- In Timesact, open Billing & Account.
- Open the Developer settings tab.
- Find the section for the page you are working on: Product page, Collection page, Quick view or Wishlist.
- Replace the value in the field with your selector. You can list several selectors separated by commas, as the defaults do.
- Click Save in the bar at the top of the page. Timesact confirms with Selectors saved.
- Open the storefront page in a new tab (or reload it) to see the result.
Keep a value in every field. Add to cart button text is the one field that can stay empty.
How to find a selector with the Inspect tool
- Open the storefront page in Chrome, Edge, Firefox or Safari. In Safari, turn on the web developer features in Safari's settings first.
- Right-click the element you want, for example the Add to cart button or the cart icon in the header, and choose Inspect.
- The panel highlights the element's HTML. Note a class, ID or attribute that is unique to it, for example
class="product-form__submit"orid="cart-icon-bubble". - Write the selector:
.before a class,#before an ID, square brackets for an attribute, for example.product-form__submit,#cart-icon-bubbleorbutton[name="add"]. - Check it in the Console tab with
document.querySelectorAll('.product-form__submit'). The result shows how many elements match. For Product anchor, the match must sit inside the product form.
To see what Timesact found on a page, open the Timesact V2 App Embed's settings in the theme editor, turn on Enable Debug Mode and save. The browser console then shows lines starting with [Timesact], including how many forms, buttons, variant inputs and badges the product page selectors matched. Turn it off again when you are done.
How to reset to defaults
- In Billing & Account → Developer settings, click Reset to defaults under the Important Note banner.
- Every field in all four sections returns to Timesact's default. The change is not saved yet, so you can review it first.
- Click Save in the bar at the top of the page.
Reset to defaults resets all fields at once. To restore one field only, copy its default from the list below.
Default values
These are the values Reset to defaults restores.
Product page:
- Form:
form[action*="/cart/add"], [data-block-id="buy_buttons"] .shopify-product-form, product-sticky-bar - Add to cart button:
button[type="submit"], input[type="submit"] - Add to cart button text: empty
- Badge:
.product__media-gallery, .product-media-container, .product-single__media-wrapper, .product-gallery - Message:
button[type="submit"] - Variant selector:
select[name="id"], input[type="radio"][name^="option"], .variant-input - Widgets:
button[type="submit"] - Quantity input:
input[name="quantity"], .quantity__input - Price container:
.price, .product__price, .product-single__price - Shopify payment button:
.shopify-payment-button, [data-shopify="payment-button"] - Variant change delay (ms):
50
Collection page:
- Product card:
.product-card, .card--product, .product-item, .product-card-wrapper - Badge:
.card__inner - Form:
form[action*="/cart/add"] - Add to cart button:
button[type="submit"], input[type="submit"] - Add to cart button text: empty
Quick view:
- Quick-view trigger:
.quick-add__submit, .quick-view-btn, [data-quick-add], .product-card__quick-add-button - Container:
.quick-add-modal__content-info:visible, .quick-buy-modal:visible - Form:
form[action*="/cart/add"], [data-block-id="buy_buttons"] .shopify-product-form, product-sticky-bar - Add to cart button:
button[type="submit"], input[type="submit"] - Add to cart button text: empty
- Variant selector:
select[name="id"], input[name="id"], input[type="radio"][name^="option"], .variant-input - Message:
button[type="submit"] - Widgets:
button[type="submit"] - Badge:
.product__media-gallery, .product-media-container, .product-gallery - Shopify payment button:
.shopify-payment-button, [data-shopify="payment-button"]
Wishlist:
- Product anchor:
button[type="submit"], input[type="submit"] - Header cart:
header a[href$="/cart"], header cart-drawer-component, button[aria-controls="cart-drawer"]
Questions merchants ask
Do I need to fill in Developer settings to use Timesact?
No. Every field starts with a default that matches common Shopify themes, so most stores never open this tab. Change a field only when your theme's layout differs.
I saved a new selector. When does my storefront use it?
On the next page load. The App Embed reads your saved selectors each time a storefront page renders, so reload the page to see the change.
The Pre-order button works on the product page but not in my Quick View. Which fields do I change?
Start with the Quick view section: Quick-view trigger, Container and Form, then Add to cart button. The trigger must sit inside an element that matches the Collection page Product card, since Timesact reads the product from it.
Where does the Wishlist header heart go, and how do I move it?
The heart goes right before the first element that matches Header cart, which on most themes is the cart icon. Enter a selector for the header element you want the heart to sit before.
Can your team set these selectors for me?
Yes. Our support team can fine-tune the selectors for your theme as part of setup. Send us the store link and the page you want changed.
How do I undo my changes?
Click Reset to defaults in Developer settings, then Save. All fields return to Timesact's defaults.
Related articles
Updated on: 11/09/2026
Thank you!