Articles on: Signup popup

Customize button & popup look with CSS

STOQ lets you customize the appearance of the "Notify me" button and the signup popup using your own CSS. If the built-in color and font options are not enough, you can add custom CSS to change fonts, spacing, borders, sizes, and more. This is useful when you want the button and popup to match your store's unique design. All CSS changes apply directly to your storefront after saving.

Follow these steps to add your own CSS to modify the button and signup popup.

Open the STOQ app from your Shopify admin.
Click Back in stock alerts in the left menu bar.
Click the Signup widget tab.
Click Customize widget.
In the sidebar, click Dev Mode.
Enter your custom CSS in the Custom CSS text field.
Click Save Changes in the top save bar to apply your changes.

Note: CSS changes cannot be previewed inside the STOQ app. After saving, visit your storefront and refresh the page to see your changes.

Example: Change the Notify Me Button Font Size

To change the font size of the "Notify me" button on product pages to 14px, enter the following CSS:

.restock-rocket-button-product {
  font-size: 14px;
}

To change the signup popup background to a light grey:

#formContainer {
  background-color: #f5f5f5;
}

CSS Selectors Reference

Use the selectors below to target specific parts of the "Notify me" button and signup popup on your storefront.

Notify Me Button Selectors

These selectors target the button that appears on product and collection pages when a product is out of stock.

Element	Selector
Notify me button (all pages)	`.restock-rocket-button`
Notify me button (product page)	`.restock-rocket-button-product`
Notify me button (collection page)	`.restock-rocket-button-collection`
Button container	`.restock-rocket-button-container`
Floating button (right)	`.restock-rocket-button-float`
Floating button container (right)	`.restock-rocket-button-container-float-right`
Floating button container (left)	`.restock-rocket-button-container-float-left`
Button hover state	`.restock-rocket-button-hover`

These selectors target the elements inside the signup popup (modal) that appears when a customer clicks the "Notify me" button.

Element	Selector
Popup overlay (background)	`.restock-rocket-wrapper`
Popup container	`#formContainer`
Inline form container	`#formContainer-Inline`
Inline form overlay	`.restock-rocket-wrapper-inline`
Close button	`#formContainer-Close`
Header section	`#form-Header-Container`
Header icon (bell)	`#form-Header-Icon`
Header text	`#form-Header-Text`
Description text	`#form-Description`
Product name	`#form-Product-Name`
Variant selector dropdown	`#form-Select`
Quantity container	`#form-Quantity-Container`
Quantity label	`#form-Quantity-Label`
Quantity input	`#form-Quantity`
Email input field	`#form-Email`
Email field container	`#form-Email-Container`
Phone input field	`#form-Phone`
Phone field container	`#form-Phone-Container`
Country code dropdown	`#form-CountryCode`
Customer name input	`#form-Name`
Name field container	`#form-Name-Container`
Channel tabs container	`#form-Channels-Container`
Selected channel tab	`#form-Channel-Selected`
Unselected channel tab	`#form-Channel-Available`
Channel tab text	`.form-Channel-Name`
Consent checkbox container	`#form-Consent-Container`
Consent checkmark	`#form-Consent-Checkmark`
Error message	`#form-Error-Message`
Submit button (Notify me)	`#form-Button`
Terms text	`#form-Terms`
"Powered by STOQ" text	`#form-Promotion`
Resubscribe banner	`#form-Resubscribe-Banner`

Success State Selectors

These selectors target the confirmation screen shown after a successful signup.

Element	Selector
Success content wrapper	`#form-Success-Content`
Success container	`#form-Success-Container`
Success icon	`#form-Success-Icon`
Success message text	`#form-Success-Text`

Input State Selectors

Use these selectors to style form fields based on their validation state.

State	Selector
Input field with error	`.form-Input-Error`
Input field with success	`.form-Input-Success`

FAQs

Q: Do I need coding experience to use custom CSS?

**A: **Basic familiarity with CSS is recommended. If you are not comfortable writing CSS, you can ask a developer or contact STOQ support for help with styling changes.

Q: Can I preview my CSS changes before saving?

A: No. The STOQ app does not offer a live CSS preview. After saving, visit your storefront and refresh the page to see your changes. You can also test CSS live using your browser's developer tools (right-click > Inspect) before entering it into the STOQ CSS field.

**Q: **Will my custom CSS be lost if I update the app?

A: No. Your custom CSS is saved in STOQ's settings and will persist across app updates.

**Q: **Can I target the inline form and the popup separately?

**A: **Yes. Use #formContainer to target the popup (modal) and #formContainer-Inline to target the inline form. The overlay wrapper classes are also different: .restock-rocket-wrapper for the popup and .restock-rocket-wrapper-inline for the inline form.

**Q: **Why does my CSS not affect the Notify me button color?

A: The button's background color and text color are applied inline via JavaScript. To override them, you need to use !important in your CSS rule. For example: .restock-rocket-button-product { background-color: #333 !important; }

Q: Can I use different CSS for product pages and collection pages?</summary>

**A: **Yes. The "Notify me" button uses different class names on product pages (.restock-rocket-button-product) and collection pages (.restock-rocket-button-collection), so you can write separate rules for each.

`If there are any issues with using CSS, please reach out to Support.

Updated on: 23/02/2026

Was this article helpful?

Thank you!