> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.timesact.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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 `:visible` and `: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. | `form.product-form__buy` |
| **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. | `button.product-form__submit` |
| **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 `span.btn-text`, then the first `span`, then the first `div`). | `.product-form__submit span.button-label` |
| **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. | `.product-gallery__main` |
| **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. | `.product-form__buttons` |
| **Variant selector** | Variant option inputs (select, radio, etc.) | Timesact watches these inputs to know when the shopper switches variant. | `variant-radios input[type="radio"]` |
| **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. | `.product-form__buttons` |
| **Quantity input** | The quantity input element | Leave the default; most stores never change it. | `input[name="quantity"]` |
| **Price container** | The product price element | Leave the default; most stores never change it. | `.price__container` |
| **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. | `.shopify-payment-button` |
| **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. | `300` |

## 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. | `.grid-product` |
| **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. | `.grid-product__image-wrapper` |
| **Form** | The cart form element on collection cards | The card's quick add form, when your theme has one. | `.grid-product form[action*="/cart/add"]` |
| **Add to cart button** | The add-to-cart button on product cards | The button on the card that Timesact relabels and styles. | `.grid-product__add-button` |
| **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. | `.grid-product__add-button .label` |

## 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. | `.grid-product__quick-view` |
| **Container** | The quick-view modal or drawer wrapper | The pop-up or drawer Timesact waits for. The default adds `:visible` so only the open pop-up counts. | `.quick-view-modal:visible` |
| **Form** | The cart form inside the quick-view | The product form inside the Container. | `.quick-view-modal form[action*="/cart/add"]` |
| **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. | `.quick-view-modal button[name="add"]` |
| **Add to cart button text** | Inner text element of the add-to-cart button (optional override) | The label element inside that button. Optional. | `.quick-view-modal button[name="add"] span` |
| **Variant selector** | Variant option inputs inside the quick-view | Watched for variant changes inside the pop-up. | `.quick-view-modal select[name="id"]` |
| **Message** | Element where the message is injected inside the quick-view | Anchor for the message. Falls back to the Add to cart button. | `.quick-view-modal .product-form__buttons` |
| **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. | `.quick-view-modal .product-form__buttons` |
| **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. | `.quick-view-modal__media` |
| **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. | `.quick-view-modal .shopify-payment-button` |

## 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. | `.product-form__submit` |
| **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. | `.site-header__cart` |

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
1. In Timesact, open **Billing & Account**.
2. Open the **Developer settings** tab.
![Timesact Billing and Account page with the Developer settings tab open, showing the Product page selector fields](https://storage.crisp.chat/users/helpdesk/website/-/c/9/b/3/c9b393c2e2547800/n37-developer-settings-storefr_xgel4x.png)

3. Find the section for the page you are working on: **Product page**, **Collection page**, **Quick view** or **Wishlist**.
4. Replace the value in the field with your selector. You can list several selectors separated by commas, as the defaults do.
5. Click **Save** in the bar at the top of the page. Timesact confirms with **Selectors saved**.
![Wishlist section in Timesact Developer settings with the Product anchor and Header cart fields](https://storage.crisp.chat/users/helpdesk/website/-/c/9/b/3/c9b393c2e2547800/n38-developer-settings-storefr_dbspb4.png)

6. 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
1. Open the storefront page in Chrome, Edge, Firefox or Safari. In Safari, turn on the web developer features in Safari's settings first.
2. Right-click the element you want, for example the Add to cart button or the cart icon in the header, and choose **Inspect**.
3. The panel highlights the element's HTML. Note a class, ID or attribute that is unique to it, for example `class="product-form__submit"` or `id="cart-icon-bubble"`.
4. Write the selector: `.` before a class, `#` before an ID, square brackets for an attribute, for example `.product-form__submit`, `#cart-icon-bubble` or `button[name="add"]`.
5. 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
1. In **Billing & Account** → **Developer settings**, click **Reset to defaults** under the Important Note banner.
2. Every field in all four sections returns to Timesact's default. The change is not saved yet, so you can review it first.
3. Click **Save** in the bar at the top of the page.
![Reset to defaults link in Timesact Developer settings with the save bar showing unsaved changes](https://storage.crisp.chat/users/helpdesk/website/-/c/9/b/3/c9b393c2e2547800/n39-developer-settings-storefr_1cktkx1.png)


**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
- [Testing and Troubleshooting](https://help.timesact.com/en-us/article/testing-and-troubleshooting-fvjm9y/)
- [Wishlist](https://help.timesact.com/en-us/article/wishlist-j8prjv/)
- [V2 General Guide](https://help.timesact.com/en-us/article/v2-general-guide-6cu2fu/)
- [Shopify Help Center: Extend your theme with apps](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps)