> ## 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 notify me widget and signup form

Dev mode for back-in-stock alerts in STOQ gives you advanced control over where the "Notify me" widget appears on your Shopify 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 the "Notify me" button and signup form in the right spot on product pages, collection pages, home pages, and search pages.

This feature is useful when the "Notify me" button does not appear, shows in the wrong location, or overlaps 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**, your storefront password if your store is password protected and a **screenshot** of the issue. We'll check the selectors and set up the placement for you, usually within a few minutes.

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

### Before You Begin

Make sure the following requirements are met before enabling dev mode.

* **STOQ is installed** on your Shopify store with the app embed enabled.
* **Basic familiarity with your theme's HTML structure.** You will need CSS selectors like `.class` or `#id` to position elements.
* **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 via the purple chat icon on the bottom right of the app — we're happy to set it up for you.

### What Dev Mode Controls

Dev mode unlocks additional positioning settings throughout the back-in-stock alerts editor. When enabled, selector fields appear in sections like **Button position & style**, **Collection page**, **Home page**, and **Search page**.

### Summary of Dev Mode Settings

| Setting | Where It Appears | What It Controls |
| ---- |
| **Dev mode toggle** | Back in stock alerts → Button/Products or Signup form → Advanced → Dev mode | Enables all dev mode settings across the editor. |
| **Custom position (product page)** | Button position & style section | Where the "Notify me" button appears on product pages. |
| **Inline form position** | Dev mode panel (when on-page form is enabled) | Where the signup form appears directly on product pages. |
| **Collection page selectors** | Collection page section | Where the "Notify me" button appears on collection pages. |
| **Home page selectors** | Home page section | Where the "Notify me" button appears on the home page. |
| **Search page selectors** | Search page section | Where the "Notify me" button appears on search result pages. |
| **Custom CSS** | Dev mode panel | Custom styles for the "Notify me" widget. |

### How to Enable Dev Mode

Follow these steps to turn on dev mode for back-in-stock alerts.

##### Step 1 - Open the Back-in-Stock Alerts Editor

1. In your Shopify admin, open the **STOQ** app.
2. Click **Back in stock alerts** in the left navigation menu.
3. The editor opens with two tabs: **Button** (or **Products** if on-page form is enabled) and **Signup form**.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_nsh2q3.png)
##### Step 2 - Navigate to Dev Mode

1. In the sidebar, scroll to the **Advanced** section at the bottom.
2. Click **Dev Mode**.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_wb5uxf.png)
##### Step 3 - Enable Dev Mode

1. Turn on the **Dev mode** toggle.
2. The help text reads: **"Use advanced settings to set up the 'Notify me' widget on your store."**
3. Once enabled, additional selector fields appear in other sections of the editor (Button position & style, Collection page, Home page, Search page).

| Note: After enabling dev mode, visit the individual sections like Button position & style, Collection page, and others. Adjust where the "Notify me" widget appears on each page using the settings in those sections.

### Product Page Settings

When dev mode is enabled, the **Button position & style** section gains a **Custom position** option for placing the "Notify me" button on product pages.

##### Custom Position Selector

1. Go to the **Button** (or **Products**) tab.
2. Click **Button position & style** in the sidebar.
3. Under **Button position**, select the **Custom position** radio button. This option only appears when dev mode is enabled.
4. A **"Sold out" button selector** field appears.
5. Enter a CSS selector (`.class` or `#id`) that targets the element on your product page where you want the "Notify me" button to appear.
6. The button is placed after the specified element.

**Example:** Enter `.product-buttons` to add the "Notify me" button after the element with that class.

##### Button Position Options

| Position | Description |
| ---- |
| **Floating on right side** | Button floats on the right side of the screen. |
| **Floating on left side** | Button floats on the left side of the screen. |
| **Below Sold Out button** | Button appears below the theme's "Sold out" button (auto-detected). |
| **Custom position** | You specify the exact CSS selector. Only available in dev mode. |

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

### Inline Form Position

When dev mode is enabled **and** the signup form is set to **On page** (inline form mode), additional positioning controls appear in the dev mode panel.

##### Configure Inline Form Position

1. In the dev mode panel, locate the **Inline form position** section.
2. Enter a **Form container selector** — a `.class` or `#id` where the signup form should appear on your product page. Example: `.product-form`.
3. Choose the **Position relative to selector** from the dropdown. This controls whether the form is placed before, inside, or after the target element.

|| Tip: The inline form position settings only appear when you have selected the On page form appearance mode (instead of Button + Popup).

### Collection, Home, and Search Page Settings

When dev mode is enabled and a page is turned on, additional CSS selector fields appear in each page's settings panel. These let you control where the "Notify me" button appears in product listing grids.

##### Collection Page Selectors

1. Go to the **Button** (or **Products**) tab.
2. Under **Pages**, expand **Collection, home & search**.
3. Click **Collection page**.
4. Make sure the **"Notify me" on Collection pages** checkbox is enabled.
5. When dev mode is on, a bordered section labeled **Collection page settings** appears with:
* **Custom position selector** — The element you want to add the "Notify me" button closest to. Example: `.card-info .price`.
* **Insertion type** — Choose where the button appears relative to the selector.
* **Products container (optional)** — The container that holds all products on collection pages. Use this to avoid adding the button to the wrong place.

##### Home Page Selectors

1. Click **Home page** under the **Collection, home & search** section.
2. Enable the **"Notify me" on Home page** checkbox.
3. When dev mode is on, a **Home page settings** section appears with:
* **Custom position selector** — The element to target. Example: `.card-info .price`.
* **Products container (optional)** — The container holding all products on the home page.

##### Search Page Selectors

1. Click **Search page** under the **Collection, home & search** section.
2. Enable the **"Notify me" on Search page** checkbox.
3. When dev mode is on, a **Search page settings** section appears with:
* **Custom position selector** — The element to target. Example: `.card-info .price`.
* **Products container (optional)** — The container holding all products on the search page.

### Understanding Insertion Types

Several selector fields include a dropdown that controls where STOQ places the element relative to your CSS selector.

| 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 (Add after container) 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 "Notify me" 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" or "Buy Now" button accessible at all times while scrolling. When a product is out of stock, the bar may still show a disabled button or disappear entirely — leaving no way for customers to sign up for restock alerts.

### 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 "Notify me" widget can only be set up by the STOQ support team**. This is not a self-service configuration.

### How to Request 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 "Notify me" 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 "Notify me" button will then automatically appear in the sticky bar whenever a product variant is out of stock.

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

### Custom CSS

Dev mode includes a **Custom CSS** field where you can add your own styles to fine-tune the appearance of the "Notify me" widget.

1. In the **Dev mode** panel, scroll to the **Custom CSS** section.
2. Enter any valid CSS rules targeting STOQ's back-in-stock elements.

**Example:**

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

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

### 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" or "Sold out" 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_55rzw1.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**, and a **screenshot** of where the button should appear. We'll set it up for you, usually in a few minutes.
### 
### Advanced Tips

* **Start with the defaults.** Only enable dev mode if the "Notify me" button is not appearing correctly with the automatic placement. Most themes work without dev mode.
* **Use the Products container field.** On collection, home, and search pages, entering the products container selector prevents the button from being added to unrelated elements that happen to match the position selector.
* **Test on multiple product pages.** Your CSS selector should work across all product pages, not just one. Check products with different templates if your theme uses alternate layouts.
* **Use browser developer tools often.** The Inspect tool is the fastest way to find the correct selector for any element.
* **Combine with custom CSS for fine-tuning.** Use selectors to get the button in the right location, then use custom CSS to adjust spacing, margins, or visual styling.

### Known Limitations

* **CSS and selector changes cannot be previewed** inside the app. You must save and visit your storefront to verify.
* **Product page selectors apply globally.** The custom position selector for product pages applies to all product pages. You cannot set different selectors for individual products.
* **If a CSS selector does not match** any element on the page, the "Notify me" button will not appear on that page.
* **Dev mode toggle is shared.** Enabling or disabling dev mode applies across both the Button/Products tab and the Signup form tab.
* **Page must be enabled for selectors to work.** Collection, home, and search page selectors only apply when the corresponding page is enabled (checkbox checked).
* **Inline form position settings** only appear when the form appearance is set to **On page**, not **Button + Popup**.

### Troubleshooting

| Symptom | Possible Cause | Solution |
| ---- |
| **"Notify me" button does not appear on product page** | Custom position selector does not match your theme's HTML. | Right-click the "Sold out" button on your storefront, select **Inspect**, and copy the correct selector. |
| **Button appears in the wrong position** | Incorrect insertion type selected. | Try a different insertion type (e.g., switch from **afterend** to **beforeend**). |
| **Button does not appear on collection page** | Page is not enabled, or custom position selector does not match. | Verify the **"Notify me" on Collection pages** checkbox is on and the selector matches an element in your theme's collection grid. |
| **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** | Dev mode toggle was turned off. | Re-enable the **Dev mode** toggle in the **Advanced** section. |
| **Inline form position fields not visible** | Form appearance is set to **Button + Popup**. | Switch the form appearance to **On page** to see the inline form position settings. |
| **Button appears multiple times on collection page** | Position selector matches too many elements. | Add the **Products container** selector to restrict where STOQ looks for the target element. |

### FAQs

**Q: Do I need dev mode if my theme already shows the "Notify me" button correctly?**
A: No. Dev mode is only needed when STOQ cannot automatically detect where to place the "Notify me" button or signup form. If everything appears correctly on your store, leave dev mode disabled.

**Q**:** Does enabling dev mode change how back-in-stock alerts work?**
A: No. Dev mode only controls where elements are placed on the page. It does not affect how signups are collected, how alerts are sent, or any other back-in-stock functionality.

**Q: Is dev mode the same for back-in-stock alerts and preorders?**
A: They are separate settings. Back-in-stock dev mode controls the "Notify me" widget, while preorder dev mode controls the Preorder button, badge, and disclaimer. Each has its own toggle and selector fields.

**Q: What is the difference between "Button + Popup" and "On page" form modes?**
A: In **Button + Popup** mode, customers click the "Notify me" button to open a popup where they enter their email or phone. In **On page** mode, the signup form appears directly on the product page without a popup. Dev mode provides additional inline form position settings when **On page** mode is selected.

**Q: Can I preview my CSS changes inside the STOQ app?</summary>**
A: No. Custom CSS 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: What happens if I enter an invalid CSS selector?**
A: STOQ will not find a matching element on the page, so the "Notify me" widget will not appear in that location. Double-check your selector using your browser's developer tools.

**Q: Can I use different selectors for different pages?**
A: Yes. Collection, home, and search pages each have their own selector fields. You can configure different selectors for each page type. However, the product page custom position selector applies globally to all product pages.

**Q: Where do I access dev mode in the app?**
A: Go to **Back in stock alerts** in the STOQ navigation menu. In either the **Button/Products** tab or the **Signup form** tab, scroll to the **Advanced** section in the sidebar and click **Dev Mode**.