Articles on: Preorders

How to enable dev mode for preorders in STOQ

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.


Before You Begin

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

  • A STOQ paid plan (dev mode settings are available on paid plans).
  • 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.


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. In the sidebar, click Advanced (under the "Other" section).
  5. Scroll to the Developer settings section.
  6. Turn on the Dev mode toggle.
  7. Configure the product page selectors that appear below.
  8. Click Save.


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.



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.



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.

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: 

.preorder-button-container {

  margin-top: 10px;

}


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.

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



How to Find CSS Selectors on Your Store


If you are not sure what CSS selector to use, follow these steps.

  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.


Known Limitations


Keep these constraints in mind when using dev mode for preorders.

  • 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.

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.


Updated on: 10/04/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!