> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://stoqapp.crisp.help/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).

# How to use dev mode to control placement of preorder button and related elements

Dev mode for preorders in STOQ gives you advanced control over where the Preorder button, badge, disclaimer, and other elements appear on your store. Most themes work automatically, but some custom or heavily modified themes need manual positioning. Dev mode lets you specify exact CSS selectors so STOQ places each element in the right spot.

This feature is especially useful if the Preorder button is not appearing, appears in the wrong location, or overlaps with other elements on your storefront.

||| **Use Dev mode only if you're comfortable identifying CSS selectors.** This is an advanced feature. If you're unsure, you don't have to do this yourself — contact STOQ support via the **purple chat icon** and send us a **product URL**, your **theme preview link (if it's a draft theme)**, your storefront password if your store is password protected and a **s**hort message about the issue you're facing. We'll check the selectors and set up the placement for you, usually within a few minutes

### Before You Begin

Make sure you have the following ready before enabling dev mode.

* At least one preorder offer is created in STOQ.
* Basic familiarity with your theme's HTML structure (you will need CSS selectors like `.class` or `#id`).
* Access to your browser's developer tools (right-click any element on your storefront and select **Inspect**) to find CSS selectors.

| Tip: You do not need to be a developer to use dev mode. If you can right-click an element and copy its selector, you can configure these settings. And if that's not something you're comfortable with, just reach out to support using the purple chat icon on the bottom right of the app — we're happy to set it up for you.

### How to Enable Dev Mode

Dev mode is controlled by a single toggle that applies across your preorder settings. You can enable it from two places in the app.

##### Option A: From the Offer Editor (Product Page Settings)

Use this path when you need to control where the Preorder button appears on **product pages**.

1. In your Shopify admin, open **STOQ**.
2. Go to **Preorders**.
3. Click **Customize** on the offer you want to edit.
4. Click on **More Settings** under **Advanced section** in the sidebar.
5. From the options that appear, choose **Advanced**
6. Scroll to the **Developer settings** section.
7. Turn on the **Dev mode** toggle.
8. Configure the product page selectors that appear below.
9. Click **Save**.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_1boetn0.png)
![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_1uabmpf.png)

##### Option B: From the Pages & Locations Editor (Collection, Home, and Search Pages)

Use this path when you need to control where the Preorder button appears on **collection, home, or search pages**.

1. In your Shopify admin, open **STOQ**.
2. Go to **Preorders**.
3. Click **Customize** in the **Pages** section to open the Pages & Locations editor.
4. In the sidebar under **Advanced** click **Dev mode**.
5. Turn on the **Dev mode** toggle.
6. Configure the page-specific selectors and global settings.
7. Click **Save changes**.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_1oyqas2.png)
![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_7t59t.png)
|| Note: The dev mode toggle is shared between both locations. Enabling it in one place enables it everywhere.

### Product Page Selectors

When dev mode is enabled, the offer editor's **Advanced** section shows a **Product page settings** panel. These selectors control where STOQ places each preorder element on your product pages.

Each selector accepts a standard CSS selector (like `form[action='/cart/add']`, `.buy-buttons`, or `#product-form`). Most selectors also have an **Insertion type** dropdown that controls the position relative to the target element.

| Selector | Description | Example |
| ---- |
| **Form section** | The form that contains the "Add to cart" button on the product page. | `form[action='/cart/add']` |
| **'Add to cart' button** | The button inside the form that STOQ replaces with the Preorder button. | `button[type='submit']` |
| **'Add to cart' text selector** | The child element inside the button that holds the button text. | `span` |
| **Disclaimer position** | Where the preorder disclaimer text appears. | `.buy-buttons` |
| **Payment options position** | Where the partial payment or deposit options appear, if enabled. | `.buy-buttons` |
| **Terms position** | Where the preorder terms checkbox and text appear, if enabled. | `.buy-buttons` |
| **Badge position** | Where the preorder badge appears, if enabled. | `.product-title` |
| **Countdown timer position** | Where the countdown timer appears. Leave blank for the default position. | `.product-form` |
| **Progress bar position** | Where the stock progress bar appears. Leave blank for the default position (above the Preorder button). | Leave empty |
| **Discounted price position** | Where the discounted preorder price appears, if enabled. | `.price__container` |
| **Original price section** | The element that contains the original product price. | `.price-regular` |

| Tip: Settings in this section apply to all product pages in your store. For collection, home, and search pages, use the Pages & Locations editor instead.

### Collection, Home, and Search Page Selectors

When dev mode is enabled and you open a page section (like **Collection page**, **Home page**, or **Search page**) in the Pages & Locations editor, additional selector fields appear.

These selectors control where the Preorder button and badge appear on product listing pages.

### Available Selectors per Page

| Selector | Description | Example |
| ---- |
| **Form selector** | The form holding the "Add to cart" button for each product in the grid. | `form[action='/cart/add']` |
| **'Add to cart' button selector** | The "Add to cart" button inside each product form that STOQ replaces with "Preorder." | `button[type='submit']` |
| **Badge position** | The element where the preorder badge should appear, if enabled. | `.product-title` |


Collection pages also include a **Badge insertion type** dropdown. Home and search pages use the default insertion type.

| Note: These selectors are configured per page type. You can set different selectors for collection pages, home pages, and search pages.

### Where to Find These Settings

1. Go to **Preorders** → click **Pages** to open the Pages & Locations editor.
2. Expand **Collection, home & search** in the sidebar.
3. Click the page you want to configure (e.g., **Collection page**).
4. Make sure the page is enabled (checkbox is checked).
5. If dev mode is on, the selector fields appear below the page toggle.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_cmjehv.png)
### Understanding Insertion Types

Every selector that controls element positioning includes an **Insertion type** dropdown. This tells STOQ where to place the element relative to the CSS selector you entered.

| Insertion Type | What It Does |
| ---- |
| **Add before container (beforebegin)** | Places the element directly before the target element. |
| **Add to start of container (afterbegin)** | Places the element as the first child inside the target element. |
| **Add to end of container (beforeend)** | Places the element as the last child inside the target element. |
| **Add after container (afterend)** | Places the element directly after the target element. This is the default. |


| **Tip:** If you are unsure which insertion type to use, start with the default (**afterend**) and adjust from there.

### Sticky Add-to-Cart Button Integration

Some themes include a sticky (fixed) add-to-cart bar that remains visible as the customer scrolls down the product page. By default, the preorder button does not appear inside these sticky bars because each theme implements them differently.

### What Is a Sticky Add-to-Cart Bar?

A sticky add-to-cart bar is a fixed-position element (usually at the bottom or top of the screen) that keeps the product's "Add to Cart" button accessible at all times while scrolling. When a product is part of a preorder offer, the bar may still show a standard "Add to Cart" button instead of the preorder button — or it may not reflect the preorder badge and messaging at all.

### Why This Requires STOQ Support

Sticky add-to-cart bars vary significantly between themes. They use different HTML structures, CSS classes, JavaScript behaviours, and show/hide logic. STOQ's standard dev mode selectors typically cannot target these bars reliably because:

* The bar may be rendered dynamically by the theme's JavaScript (not present in the initial HTML).
* The bar may duplicate the product form, creating conflicts with STOQ's variant detection.
* Show/hide logic differs per theme — some use scroll events, others use Intersection Observer, and some use CSS-only solutions.

Because of this complexity, **sticky add-to-cart button integration for the preorder button can only be set up by the STOQ support team**. This is not a self-service configuration.

### How to Request Sticky Add-to-Cart Setup

1. Open the STOQ app in your Shopify admin.
2. Contact STOQ support through the chat widget (Quinn) or via email.
3. Let the team know you want the preorder button to appear in your theme's sticky add-to-cart bar.
4. The STOQ team will review your theme, build the integration, and enable it for your store.

|| **Note:** Once the integration is complete, you will receive a confirmation from the STOQ team. The preorder button will then automatically appear in the sticky bar whenever a product variant is part of an active preorder offer.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_1r74w6e.png)

### Custom CSS

Dev mode includes a **Custom CSS** field where you can add your own styles to fine-tune the appearance of preorder elements.

* In the **offer editor**: Go to **Advanced** → the CSS field is under **Currency & custom styles**.
* In the **Pages & Locations editor**: Go to **Dev mode** → the CSS field is at the bottom.

Enter any valid CSS rules targeting STOQ's preorder elements. For example:

```css
.preorder-button-container {
  margin-top: 10px !important;
}
```

||| Important: Custom CSS cannot be previewed inside the app. Save your changes and visit your storefront to see the results.

### Currency Format

Dev mode also provides a **Currency format** field that lets you customize how prices are displayed in preorder elements (like the discounted price or payment amounts).

The default format is `${{amount}}`. You can use these variables:

* `{{currency}}` — The currency code (e.g., USD, EUR).
* `{{currency_symbol}}` — The currency symbol (e.g., $, €).
* Any amount variable listed in [Shopify's currency formatting guide](https://help.shopify.com/en/manual/international/pricing/currency-formatting).

This field is available in both the **offer editor** (under **Advanced** → **Currency & custom styles**) and the **Pages & Locations editor** (under **Dev mode**).

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_5tsdsd.png)


|| Here's our detailed guide on [how to customize currency format and button text for a preorder offer](https://help.stoqapp.com/en/article/how-to-customize-currency-format-and-button-text-for-a-preorder-offer-951npy/)

### How to Find CSS Selectors on Your Store

1. Open your storefront in a web browser.
2. Navigate to the page where you want to position the element (e.g., a product page).
3. Right-click the element you want to target (e.g., the "Add to cart" button).
4. Select **Inspect** or **Inspect Element** from the context menu.
5. In the developer tools panel, look at the highlighted HTML element.
6. Note the element's class (`.class-name`) or ID (`#element-id`).
7. Copy that selector and paste it into the corresponding field in STOQ.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_1u31uhy.png)

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_em95s1.png)
||| **Not comfortable with this?** No problem — you don't have to identify selectors yourself. Contact STOQ support via the purple chat icon and send a **product URL**, your **theme preview link (if it's a draft theme)**, your storefront password if your store is password protected and a **screenshot** of where the button should appear. We'll set it up for you, usually in a few minutes.
### Known Limitations

* Custom CSS and selector changes **cannot be previewed** inside the app. You must save and visit your storefront to verify.
* Product page selectors apply to **all product pages** globally. You cannot set different selectors for individual products.
* If a CSS selector does not match any element on the page, the preorder element will not appear.
* The dev mode toggle is **shared** between the offer editor and the Pages & Locations editor. Turning it off in one place turns it off everywhere.
* Collection, home, and search page selectors only work when the corresponding page is **enabled** in the Pages & Locations editor.
* Currency format changes apply to all preorder elements that display prices.
* Some highly customized themes may require additional CSS overrides beyond what the selector fields provide.

### Troubleshooting

| Symptom | Likely Cause | Fix |
| ---- |
| Preorder button does not appear on product page | Form selector or button selector does not match your theme's HTML | Right-click the "Add to cart" button, select **Inspect**, and copy the correct selector. |
| Preorder button appears in the wrong position | Incorrect insertion type selected | Try a different insertion type (e.g., switch from **afterend** to **beforeend**). |
| Badge does not appear on collection page | Badge position selector does not match, or page is not enabled | Verify the selector and make sure the collection page checkbox is turned on. |
| Custom CSS has no visible effect | CSS was not saved, or browser cache is stale | Click **Save**, then hard-refresh your storefront (Ctrl+Shift+R or Cmd+Shift+R). |
| Dev mode settings disappeared from the offer editor | Dev mode toggle was turned off | Re-enable the **Dev mode** toggle in the **Advanced** section. |
| Elements overlap or look broken | CSS selector targets the wrong element, or custom CSS conflicts | Use browser developer tools to inspect the element and refine your selector or CSS. |
| Currency format shows raw variables like `{{amount}}` | Incorrect variable syntax | Double-check the variable names against [Shopify's currency formatting guide](https://help.shopify.com/en/manual/international/pricing/currency-formatting). |

### FAQs

**Q: Do I need dev mode if my theme already shows the Preorder button correctly?**
**A:** No. Dev mode is only needed when STOQ cannot automatically detect where to place the Preorder button or related elements. If everything appears correctly, you do not need to enable it.

**Q: Does enabling dev mode change how my preorder offer works?**
**A:** No. Dev mode only controls where elements are placed on the page. It does not affect payment settings, shipping timelines, inventory limits, or any other offer configuration.

**Q:** **Can I use different CSS selectors for different preorder offers?**
**A:** No. The product page dev mode selectors are shared across all offers. They are stored at the store level, not the offer level. Collection, home, and search page selectors are also shared across all offers.

**Q:** **What happens if I enter an invalid CSS selector?**
**A:** STOQ will not find a matching element on the page, so the preorder element (button, badge, disclaimer, etc.) will not appear. Double-check your selector using your browser's developer tools.

**Q:** **Can I preview my CSS changes inside the STOQ app?**
**A:** No. Custom CSS and selector changes cannot be previewed inside the app. Save your changes and visit your live storefront (or use Shopify's theme preview) to see the results.

**Q:** **Where do I configure selectors for collection and home pages vs. product pages?**
**A:** Product page selectors are in the offer editor: **Preorders** → **Offer** → **Customize** → **Advanced**. Collection, home, and search page selectors are in the Pages & Locations editor: **Preorders** → **Pages** → **Customize** → select the page type. Both require dev mode to be enabled.