Advanced placement and custom CSS

Use this guide if you want to place the ‘Notify me’ widget somewhere the automatic options don’t reach, or add your own CSS to it. It’s code-facing: expect to know basic CSS. Dev mode and Custom CSS are available on every plan, free or paid, and by the end customers will see the widget positioned and styled exactly as you set it up.

Before you begin

Requirement	Detail
The ‘Notify me’ widget is enabled	On the Back in stock alerts page, the ‘Notify me’ widget toggle must be on
Comfort with CSS selectors	Custom position and inline form placement require a .class or #id selector from your theme’s HTML
A safe way to test	Changes in Dev mode’s code fields cannot be previewed in the editor: you save, then check your live storefront

If you’re not comfortable identifying a CSS selector or writing CSS, leave Dev mode off and use the automatic positions instead, or contact STOQ support for help placing the widget.

Choose your setup

Turning on Dev mode reveals additional controls across the editor, not just the code fields on this page. Turn it on for any of these:

• Custom position for the button: in Button position & style, a Custom position option appears under Button position, letting you enter a CSS selector for your theme’s “Sold out” button so STOQ can insert the ‘Notify me’ button next to it.
• Custom position for collection, home, search, and custom pages: similar selector-based placement options appear in those sections when Dev mode is on. See Notify me button on store pages.
• Inline form position: control exactly where an on-page signup form is inserted, set up below.
• Custom CSS: the code field on this page, set up below. Dev mode also shows a read-only Custom JavaScript field (see below).

What customers will see

Customers never see the Dev mode section itself: it’s a merchant/developer-only editing surface. What they experience is the effect of what you configure here:

• Any custom position selectors take effect where the widget or inline form is inserted on the page.
• Custom CSS changes how the widget looks.

Set it up

On a phone, this menu is collapsed. In the Shopify mobile app, tap the STOQ logo at the top of the screen to open it, then choose the section named below. There is no hamburger icon. See Finding the STOQ menu.

Turn on Dev mode

1. Open the widget editor

   1. In the left menu bar of the STOQ app, click Back in stock alerts.
   2. Click the Settings tab.
   3. Open the Signup widget sub-tab.
   4. Click Customize widget.

   

2. Open the Advanced (Dev mode) section

   On the Button tab, click Advanced (Dev mode) in the sidebar. The Signup form tab has its own Advanced (Dev mode) section in its sidebar too.

   

3. Turn on the Dev mode toggle

   Switch on Dev mode. This doesn’t change any of your current settings: it only reveals additional advanced controls across the other design sections.

   

Note

Turning Dev mode off again doesn’t erase anything you set up: it just hides the advanced controls. Any custom CSS you saved keeps running on your storefront either way.

Set the inline form position

If you’ve switched your signup experience to an on-page (inline) form instead of the button-and-popup flow (see Design the signup form), Dev mode adds a way to control exactly where that form is inserted on the product page.

1. Enter a form container selector

   In Form container selector, enter a .class or #id from your theme, for example .product-form, marking the element the form should be placed relative to.

2. Choose the position relative to that selector

   In Position relative to selector, choose one of four insertion points:

   • Add before container (beforebegin): form is inserted immediately before the selected element
   • Add to start of container (afterbegin): form is inserted as the first child inside the selected element
   • Add to end of container (beforeend): form is inserted as the last child inside the selected element
   • Add after container (afterend): form is inserted immediately after the selected element, this is the default

   

Add custom CSS

The Custom CSS field lets you write CSS that STOQ inserts into a <style> tag on every storefront page where the widget loads. Use it to override colors, spacing, fonts, or anything else the visual controls elsewhere in the editor don’t expose.

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

The field accepts plain CSS only. STOQ won’t save HTML tags (such as <style> or <script>), @import of anything other than a font stylesheet, or files loaded with url() from a website other than your store, Shopify, or STOQ. To use your own image or font file, upload it to Shopify Files and use that URL. If a save is refused, a “Custom CSS wasn’t saved” message says why. CSS you saved before keeps working; only a new problem stops a save.

STOQ adds its own class and id names to every element it puts on your storefront, so you can target them from the Custom CSS field. Because STOQ also applies its own styles, you often need !important to make an override stick.

The ‘Notify me’ button

Selector	What it targets
.restock-rocket-button	The button on any page
.restock-rocket-button-product	The button on product pages
.restock-rocket-button-collection	The button on collection pages
.restock-rocket-button-container	The wrapper around the button
.restock-rocket-button-float	The floating button
.restock-rocket-button-container-float-right	The floating button container, right side
.restock-rocket-button-container-float-left	The floating button container, left side
.restock-rocket-button-hover	The button’s hover state

The restock note

Selector	What it targets
.restock-rocket-restock-note	The restock note container
#restock-rocket-restock-note-container	The restock note container, by id
.restock-rocket-restock-note-text	The restock note text

The signup popup and form

Selector	What it targets
.restock-rocket-wrapper	The popup overlay background
.restock-rocket-wrapper-inline	The inline form overlay
#formContainer	The popup container
#formContainer-Inline	The inline form container
#restock-rocket-inline-container	The container STOQ creates for an inline (on-page) form
#formContainer-Close	The close button
#form-Header-Container	The header section
#form-Header-Icon	The header icon (the bell)
#form-Header-Text	The header text
#form-Description	The description text
#form-Product-Name	The product name
#form-Select	The variant selector dropdown
#form-Quantity-Container	The quantity field wrapper
#form-Quantity-Label	The quantity label
#form-Quantity	The quantity input
#form-Email-Container	The email field wrapper
#form-Email	The email input
#form-Phone-Container	The phone field wrapper
#form-Phone	The phone input
#form-CountryCode	The country code dropdown
#form-Name-Container	The name field wrapper
#form-Name	The customer name input
#form-Channels-Container	The channel tabs wrapper
#form-Channel-Selected	The active channel tab
#form-Channel-Available	An inactive channel tab
.form-Channel-Name	The channel tab text
#form-Consent-Container	The consent checkbox wrapper
#form-Consent-Checkmark	The consent checkmark
#form-Error-Message	The error message
#form-Button	The submit button
#form-Terms	The terms text
#form-Promotion	The ‘Powered by STOQ’ text
#form-Resubscribe-Banner	The resubscribe banner

The success state

Selector	What it targets
#form-Success-Content	The success confirmation wrapper
#form-Success-Container	The success container
#form-Success-Icon	The success icon
#form-Success-Text	The success message

Field validation states

Selector	What it targets
.form-Input-Error	A field with a validation error
.form-Input-Success	A field that passed validation

You can also use Custom CSS to hide your theme’s native Sold out button on out-of-stock products, so only the ‘Notify me’ button shows. The selector for that button belongs to your theme, not STOQ, so it varies from theme to theme. If you’re not sure which selector to target, STOQ support can set it up for you: open the purple chat icon in the bottom-right of the STOQ app and choose Talk to a human.

Custom JavaScript

The Custom JavaScript field is read-only. It shows any custom JavaScript your store already runs on its storefront pages. To add or change it, click Contact support under the field.

Check your setup

1. Save your changes in the editor.
2. Open your live storefront in a new tab (Dev mode changes are not shown in the editor’s preview pane).
3. For selector-based placement: confirm the button or form appears in the expected spot, next to the element you targeted.
4. For custom CSS: confirm the visual change appears as expected.

Troubleshooting

You can't see your CSS changes in the editor preview

This is expected. Custom CSS is injected only on the live storefront, not the editor preview. Save your changes and check your live store instead.

Your custom CSS won't save

The “Custom CSS wasn’t saved” message says what STOQ refused. Remove any HTML tags, and move images or fonts hosted on another website to Shopify Files, then save again.

A custom position selector doesn't insert the widget or form in the expected spot

Your CSS selector doesn’t match anything on your theme’s page. Double-check the class or ID and test again on your live storefront after saving.

Your custom JavaScript broke something on your storefront

Custom JavaScript runs before the ‘Notify me’ button and restock note are added to the page, so an error in it can stop them appearing. The field is read-only: click Contact support under it and STOQ support will fix or remove the code.

FAQ

Can I hide the theme's 'Sold out' button?

Yes, with custom CSS. On out-of-stock products you can hide your theme’s native Sold out button so only the ‘Notify me’ button shows. The button belongs to your theme, so its CSS selector varies from theme to theme, there’s no single rule that works everywhere. If you’re not sure which selector to target, STOQ support can set it up for you: open the purple chat icon in the bottom-right of the STOQ app and choose Talk to a human.

What does turning on Dev mode actually change?

By itself, turning on Dev mode doesn’t change anything visible to customers. It reveals extra controls across the editor, hidden by default to keep the editor simple:

1. Custom position fields for the button and store pages.
2. Inline form position fields.
3. This page’s Custom CSS field and the read-only Custom JavaScript field.

I turned off Dev mode: did I lose my custom CSS?

No. Turning Dev mode off only hides the advanced controls from view; it doesn’t clear or disable anything you’ve already saved. Your custom CSS, and any custom JavaScript, keep running on the storefront. Turn Dev mode back on any time to edit your CSS again.

What's the difference between the inline form selector here and the Custom position selector on the button?

They control different things. The button’s Custom position selector (in Button position & style) places the ‘Notify me’ button itself. The inline form selector here (Form container selector / Position relative to selector) only applies when you’ve switched to the on-page form layout, and it places the embedded signup form instead of a button.

Can I use Dev mode without writing any custom CSS?

Yes. Many merchants turn on Dev mode only to use the Custom position selector fields (for the button or store pages) or the inline form position fields, without ever touching the Custom CSS field.

Is there a list of class names I can target in Custom CSS?

The two most useful are .restock-rocket-button-container (the ‘Notify me’ button’s wrapper) and #restock-rocket-inline-container (the inline form’s container). Other elements can be targeted too, but you’ll need to inspect your storefront’s rendered HTML to find their class names, since they aren’t otherwise documented.

Related guides

Design the 'Notify me' buttonSet the button's automatic position options, or find the Custom position control that Dev mode unlocks.

Design the signup formSwitch between the popup form and the on-page (inline) form layout.

'Notify me' button on store pagesSee the Custom position selectors Dev mode adds for collection, home, search, and custom pages.

Back in stock alerts overviewSee how widget placement fits into the full back-in-stock flow.