> ## 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).
# How to set up the on-page signup form for back in stock alerts
STOQ offers two ways for customers to sign up for back in stock alerts: a **Button + Popup** (default) or an **On page** embedded signup form. The on-page form displays the email and phone number fields directly on your product page — no popup or extra click required. This gives customers a faster signup experience and can increase conversion rates for out-of-stock products.
### Choosing Between Button + Popup and On Page
STOQ lets you choose how the signup form appears on your product pages. You can switch between these two options at any time.
##### Button + Popup (Default)
* Customers see a **Notify me** button on the product page.
* Clicking the button opens a popup where they enter their email or phone number.
* This works on all themes out of the box.
##### On Page (Embedded Form)
* The signup form appears **directly on the product page** without a popup.
* Customers enter their email or phone number inline, right where the product details are.
* This option requires a paid plan.
* Some themes may need additional setup (via Dev mode or STOQ support) for the form to appear in the correct position.
### How to Enable the On-Page Signup Form
Follow these steps to switch from the default popup to the embedded on-page form.
1. In the STOQ app, go to **Back in stock alerts → Signup widget → Customize widget**.
2. Click the form type selector to expand the options. It will show either **Button + Popup** or **On page** depending on your current setting.
3. Select **On page**.
4. Click **Save**.
|| **Note:** The on-page form option requires a paid plan. If you are on a free plan, the **On page** option will be disabled with a prompt to upgrade.
After saving, visit a product page on your storefront that has an out-of-stock variant. The signup form should now appear directly on the page instead of showing a button that opens a popup.
| **Tip:** When you switch to the on-page form, the product image is automatically hidden from the signup form since the customer is already looking at the product on the page.
### What to Do if the On-Page Form Is Not Appearing
If you enabled the on-page form but it does not show up on your storefront, the form may need to be positioned manually. This happens when STOQ cannot automatically find the right place on your theme to insert the form. You can fix this yourself using Dev mode, or contact STOQ support to have them set it up for you.
##### Option 1: Set Up Using Dev Mode
Dev mode lets you tell STOQ exactly where to place the signup form on your product page by providing a CSS selector.
1. In the STOQ app, go to **Back in stock alerts → Signup widget**.
2. Open the **Dev mode** section.
3. Enable the **Dev mode** toggle.
4. You will see the **Inline form position** settings with two fields:
* **Form container selector** — Enter the CSS class or ID of the element where the form should appear. For example: `.product-form` or `#product-form-container`
* **Position relative to selector** — Choose where the form is placed relative to that element:
* **Add before container (beforebegin)** — Places the form above the element
* **Add to start of container (afterbegin)** — Places the form inside the element, at the top
* **Add to end of container (beforeend)** — Places the form inside the element, at the bottom
* **Add after container (afterend)** — Places the form below the element (default)
5. Click **Save**.
|| Here's our detailed guide on [how to use dev mode to control placement of the notify me widget and signup form](https://help.stoqapp.com/en/article/how-to-use-dev-mode-to-control-placement-of-notify-me-widget-and-signup-form-cc3l4s/)
##### How to Find the Right CSS Selector
If you are not sure which selector to use, follow these steps:
1. Open your product page on your storefront in **Google Chrome**.
2. Right-click on the area where you want the form to appear (for example, below the "Add to cart" button area).
3. Select **Inspect** to open Chrome DevTools.
4. Look at the highlighted HTML element. Find the **class** or **id** attribute on the element or its parent container.
5. Use that as your selector:
* For a class like `class="product-form"`, enter `.product-form`
* For an ID like `id="buy-buttons"`, enter `#buy-buttons`
| **Tip:** After saving your Dev mode settings, refresh your storefront page to see the change. If the form appears in the wrong spot, try a different selector or change the position option.
##### Option 2: Contact STOQ Support
If you prefer not to configure Dev mode yourself, the STOQ support team can set up the form placement for you.
1. In the STOQ app, go to **Support**.
2. Start a chat with the support team by clicking on the chat box on the bottom right.
3. Let them know you have enabled the on-page form and it is not appearing correctly.
4. The support team will inspect your theme, find the correct selector, and configure it for you.
|| **Note:** When you switch to the on-page form and it requires a Dev mode selector, STOQ displays an info message: "On-page form may require additional setup. If you experience any issues, chat with us." You can click the **chat with us** link to contact support directly.
### Customizing the On-Page Signup Form
Once the on-page form is enabled and positioned correctly, you can customize its appearance from the same settings area.
1. Go to **Back in stock alerts → Signup widget**.
2. Use the **Form style** tab to adjust:
* Form field labels and placeholder text
* Button text and colors
* Which channels to show (email, SMS, or both)
* Success message after signup
3. Click **Save changes** after making changes.
### Known Limitations
* **Paid plan required** — The on-page form is only available on paid plans.
* **Product pages only** — The on-page form is only available on product pages. Collection, home, search, and custom pages still use the button + popup approach.
* **Theme compatibility** — Some themes may not have a standard product form structure. In these cases, you need to configure the form position using Dev mode or contact STOQ support.
* **Online Store 2.0 required** — STOQ's app embed only works with Online Store 2.0 themes.
* **Custom CSS may be needed** — If the form layout does not match your theme's styling, you can add custom CSS via the Dev mode **Custom CSS** field.
### Troubleshooting
| Symptom | Likely Cause | Fix |
| ---- |
| On-page form not appearing on product page | Form container selector not set or incorrect | Enable Dev mode and enter the correct CSS selector, or contact STOQ support |
| On-page form appears in the wrong position | Incorrect selector or position option | Try a different selector or change the **Position relative to selector** dropdown |
| "On page" option is grayed out | Store is on a free plan | Upgrade to a paid plan to access the on-page form |
| Form appears but looks broken or overlaps other elements | Theme CSS conflicts with the form layout | Add custom CSS via Dev mode to adjust spacing and positioning |
| Form does not appear after enabling on-page option | App embed is not enabled | Enable the STOQ app embed in your Shopify Theme Editor (see [How to check if STOQ app embed is enabled](https://help.stoqapp.com/en/article/how-to-check-if-stoq-app-embed-is-enabled-in-shopify-1hy6zvl/)) |
| Form shows on product pages but not on collection pages | On-page form only works on product pages | Collection pages use the button + popup. This is expected behavior |
| Changes to Dev mode selector not appearing | Browser cache showing old version | Clear your browser cache or open the page in an incognito window |
### FAQs
**Q: What is the difference between "Button + Popup" and "On page"?**
A: With Button + Popup, customers click a Notify me button that opens a popup form. With On page, the signup form appears directly on the product page without any popup — customers can enter their email or phone number right away.
**Q: Do I need Dev mode to use the on-page form?**
A: Not always. Many themes work out of the box. If the form does not appear after enabling the option, you can use Dev mode to set a custom position, or contact STOQ support to have them configure it for you.
**Q: Can I use the on-page form on collection pages?**
A: No. The on-page form is only available on product pages. On collection, home, search, and custom pages, the button + popup is used instead.
**Q: Will the on-page form work with my page builder (PageFly, GemPages, etc.)?**
A: Page builders use custom layouts that may not have standard product form elements. You will likely need to configure a Dev mode selector or contact STOQ support for setup assistance.
**Q: Can I switch back to the popup after enabling the on-page form?**
A: Yes. Go to Back in stock alerts → Signup widget, select Button + Popup, and click Save. The change takes effect immediately.
**Q: What does the "Position relative to selector" option do?**
A: It controls where the form is placed relative to the element you specified in the selector field. For example, "Add after container (afterend)" places the form directly below the element, while "Add to end of container (beforeend)" places it inside the element at the bottom.