Articles on: 'Notify me' button

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.

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.
You are on a paid STOQ plan. Dev mode settings are available on paid plans.
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.

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

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

Step 2 -- Navigate to Dev Mode

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

Step 3 -- Enable Dev Mode

Turn on the Dev mode toggle.
The help text reads: "Use advanced settings to set up the 'Notify me' widget on your store."
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

Go to the Button (or Products) tab.
Click Button position & style in the sidebar.
Under Button position, select the Custom position radio button. This option only appears when dev mode is enabled.
A "Sold out" button selector field appears.
Enter a CSS selector (.class or #id) that targets the element on your product page where you want the "Notify me" button to appear.
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.

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

In the dev mode panel, locate the Inline form position section.
Enter a Form container selector — a .class or #id where the signup form should appear on your product page. Example: .product-form.
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

Go to the Button (or Products) tab.
Under Pages, expand Collection, home & search.
Click Collection page.
Make sure the "Notify me" on Collection pages checkbox is enabled.
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

Click Home page under the Collection, home & search section.
Enable the "Notify me" on Home page checkbox.
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

Click Search page under the Collection, home & search section.
Enable the "Notify me" on Search page checkbox.
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.

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.

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

Example:

.restock-rocket-button-container {
  margin-top: 10px;
}

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.

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

Advanced Tips

These tips help you get the most out of dev mode for back-in-stock alerts.

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

Keep these constraints in mind when using dev mode for back-in-stock alerts.

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.
Requires a paid STOQ plan. Dev mode is not available on free plans.

Troubleshooting

Use the table below to resolve common dev mode issues.

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.

Updated on: 14/04/2026

Was this article helpful?

Thank you!