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: 24/08/2024