> ## 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).

# Customize popup and buttons styling 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.

### How to Add Custom CSS for Popup and Button Styling

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

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

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

| **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:

```css
.restock-rocket-button-product {
  font-size: 14px !important;
}
```

##### Example: Change the Popup Background Color

To change the signup popup background to a light grey:

```css
#formContainer {
  background-color: #f5f5f5 !important;
}
```

##### Example: Change the Restock Note Background and Border

To give the restock note a custom background color and remove the left border:

```
.restock-rocket-restock-note {
  background-color: #eef6ff !important;
  border-left: none !important;
  border: 1px solid #3b82f6 !important;
  border-radius: 8px !important;
}
```
### 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` |

##### Restock Note Selectors

These selectors target the restock note that appears below the Notify Me button when a restock date is set for a variant in Back in stock alerts > Products. You can also customize the restock note's border radius, text color, and background color from the built-in settings at Customize widget > Button tab > Restock note style. For more advanced changes like bold text, font size, or custom borders, use the CSS selectors below.

| Element | Selector |
| ---- |
| Restock note container | ` .restock-rocket-restock-note` |
| Restock note container (by ID) | `#restock-rocket-restock-note-container` |
| Restock note text | `.restock-rocket-restock-note-text` |

##### Signup Popup Selectors

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 via the live chat widget or email us at&#32;support@stoqapp.com__**