Customize button & popup look with CSS
For those with coding skills or familiarity with CSS, Stoq allows you to change the appearance of the 'Notify me when available' button to better fit the design and style of your online store.
How to add custom CSS
- Select "Back in stock alerts" from the left menu.
- Click "Customize form" in the "Signup widget" section.
- Once there, click on the "CSS" tab.
- In this section, you can insert your custom CSS to modify the button and the signup form as per your preference.
- After you apply your CSS code, the visual changes will be visible on the 'Notify me when available' button and the signup form on your store's website after you save changes and refresh the page.
Here's a list of selectors you can use to make changes to the button and popup:
Fields | Selectors |
|---|---|
Notify me button (Product page) | .restock-rocket-button-product |
Notify me button (Collection & Homepage) | .restock-rocket-button-collection |
Signup form - Header | #form-Header-Container |
Signup form - Description | #form-Description |
Signup form - Product name | #form-Product-Name |
Signup form - Quantity label | #form-Quantity-Label |
Signup form - SMS field | #form-Phone |
Signup form - Email field | #form-Email |
Signup form - Consent | #form-Consent-Container |
Signup form - Notify me button | #form-Button |
Signup form - Terms | #form-Terms |
Example: If you want to change the font size of the Notify me button on product page to 12px, you can use the following CSS code -
.restock-rocket-button-product { font-size: 12px; }
If there are any issues with using CSS, please reach out to Support.
Updated on: 22/03/2025
Thank you!