Articles on: Preorders

How to fix the preorder button not appearing on your storefront

You have set up preorders in STOQ, everything looks correct in the app, but the Preorder button is not appearing on your storefront. This is one of the most common issues merchants run into after configuring a preorder offer. In almost every case, the cause is one of three things: the app embed is not enabled, the offer is not active, or your theme's selectors are not compatible with the defaults. This article walks you through each cause and how to resolve it so your preorder button shows up for customers.

Cause 1: App Embed Is Not Enabled

STOQ uses Shopify's app embed feature to inject the Preorder button onto your product pages. If the app embed is not turned on, nothing from STOQ will appear on your storefront — no Preorder button, no Notify Me button, and no badges.

How to Check

Open the STOQ app in your Shopify Admin.
Go to Preorders → Offers.
If the app embed is disabled, you will see a yellow warning banner at the top that says: "App embed is disabled" with a message explaining that the Preorder widget will not appear until you enable it.

How to Fix It

Click the Enable app embed button in the warning banner.
STOQ will attempt to enable the app embed automatically. If successful, you will see a toast message: "App embed enabled".
If automatic activation is not possible, STOQ will open the Shopify Theme Editor in a new tab.
In the Theme Editor, find STOQ in the App embeds section and turn on the toggle.
Click Save in the top-right corner of the Theme Editor.
Return to STOQ and refresh the page — the warning banner should be gone.

Tip: You can also enable the app embed manually at any time. Go to Shopify Admin → Online Store → Themes → Customize → App embeds and turn on the STOQ toggle. For a detailed walkthrough, see How to check if STOQ app embed is enabled in Shopify.

Warning: STOQ requires an Online Store 2.0 theme. If your store uses a legacy 1.0 theme, app embeds are not supported and the Preorder button will not appear. You will need to upgrade to a 2.0-compatible theme.

Cause 2: Preorder Offer Is Not Enabled or Is Scheduled for the Future

Even with the app embed active, the Preorder button will only show on products that have an enabled offer linked to them. If your offer is disabled or scheduled to start at a future date, the button will not appear yet.

How to Check

In the STOQ app, go to Preorders → Offers.
Look at the status badge next to each offer:

Enabled (green badge) — The offer is live and the Preorder button should appear on linked products.
Scheduled (blue badge) — The offer has a future start date and is not yet active on your storefront.
Disabled (red badge) — The offer is turned off. No Preorder button will appear for its products

How to Fix It

If the offer is Disabled

Click on the offer to open it.
Toggle the offer to Enabled.
Click Save.

Here's our detailed guide on how to enable or disable preorder offers individually or in bulk

If the offer is Scheduled

Click on the offer to open it.
Check the schedule start date and schedule end date under the scheduling settings.
If you want the Preorder button to appear immediately, either:

Change the start date to today or
Turn off Offer scheduling to make it go live immediately.

Click Save.

Tip: When you schedule an offer, it will automatically become active once the start date is reached — no manual action is needed at that point. For a full guide on scheduling, see How to schedule a preorder offer.

Note: If your product still shows "Add to Cart" even though the offer is scheduled, it may be because the product is in stock or has "Continue selling when out of stock" enabled. See the scheduling article for details on how to prevent regular purchases before the preorder starts.

Also Check: Are Products Linked to the Offer?

The Preorder button only appears on products that are actually assigned to an offer. To verify:

Go to Preorders → Offers and click on your offer.
Check the product list — make sure the products you expect to show the Preorder button are listed.
If products are missing, add them by clicking the product assignment option within the offer.

Tip: You can also search for the product using the product name in the search bar from Preorders > Offers. If a product is in an offer, the search result will show the offer it's associated with.

Cause 3: Theme Selectors Are Not Compatible

STOQ's Preorder button works by finding the Add to Cart button on your product page and replacing or positioning itself relative to it. It uses CSS selectors to locate the right elements. Most Shopify themes work out of the box, but some custom or heavily modified themes use non-standard HTML structures that STOQ cannot detect automatically.

When this happens, the app embed is enabled and the offer is active, but the button still does not show because STOQ cannot find where to place it.

How to Fix It

STOQ provides a Dev mode feature that lets you specify the exact CSS selectors for your theme so the Preorder button can find where to appear. To set it up:

In the STOQ app, go to Preorders → Offers and click on your offer.
Navigate to Advanced settings.
Under Developer settings, turn on the Dev mode toggle.
Use browser developer tools to identify your theme's selectors (right-click the Add to Cart button on your storefront → Inspect), then enter them in the Dev mode fields.
Click Save and refresh your storefront to verify.

For the full step-by-step guide on enabling Dev mode, finding your theme's selectors, and configuring each field, see How to use Dev mode to control placement of the Preorder button and related elements.

Tip: If you are unsure which selectors to use, contact STOQ support with your store URL. The support team can identify the correct selectors for your theme.

Preorder Button on Non-Product Pages

By default, STOQ only shows the Preorder button on product pages. If you want the Preorder button to appear on other pages — such as collection pages, your home page, or search results — you need to enable each page type separately.

How to Enable Preorders on Other Pages

In the STOQ app, go to Preorders → Settings.
Scroll to the Pages section.
Click the Pages card to open the page editor.
You will see toggles for each page type:

Home page — Shows the Preorder button on featured products on your home page.
Collection pages — Shows the Preorder button on products listed in collection pages.
Search results — Shows the Preorder button on products that appear in search results.

Turn on the toggles for the pages where you want the Preorder button to appear.
Configure the button position and selectors for each page type as needed.
Click Save.

Here's our detailed guide on how to setup preorders on different page types

Quick Buy and Featured Product Integrations

The full preorder experience (including description, payment options, etc.) can also appear on Quick Buy popups and Featured product sections — not just on product pages. These integrations require a one-time setup by the STOQ team for your specific theme.

To request setup:

In the Pages editor, look for the Quick Buy or Featured product checkbox underneath each page type toggle.
Click the Request setup link.
The STOQ team will build the integration for your theme. You will receive an email and chat message once it is ready.
After setup is complete, a Requested badge will change to a toggle you can enable or disable.

Tip: The Quick Buy integration is available on collection, home, and search pages. The Featured product integration is available on the home page only. Both require a paid plan.

Known Limitations

Online Store 1.0 themes are not supported. STOQ requires Online Store 2.0 app embed functionality.
Headless or custom storefronts do not use the standard Shopify theme, so the app embed will not work. However, STOQ supports headless stores through the Preorders API. Use the API to integrate preorder functionality into your custom storefront.
Draft themes — The app embed must be enabled on your published (live) theme. Enabling it only on a draft/unpublished theme will not show the button to customers.
Password-protected stores — If your store is password-protected, the app embed may not load for visitors who have not entered the password.
Third-party page builders (e.g., PageFly, GemPages, Shogun) may use custom product form structures that require Dev mode selectors to be configured.

Troubleshooting

Symptom	Likely Cause	Fix
No STOQ elements appear on any page	App embed is disabled	Enable the app embed via the banner in Preorders → Offers or through Shopify Theme Editor
Button appears on some products but not others	Offer is not linked to those products, or offer is disabled/scheduled	Verify the offer status and product assignment in Preorders → Offers
Button shows on product pages but not on collection/home/search pages	Non-product page types are not enabled	Go to Preorders → Settings → Pages and enable the relevant page toggles
App embed is enabled but button does not show	Theme selectors are incompatible	Enable Dev mode and set custom selectors in the offer's Advanced settings
Button appeared before but stopped showing	Theme was updated or switched	Re-check app embed status and re-configure Dev mode selectors if the theme changed
"App embed is disabled" banner keeps appearing after enabling	Theme Editor save was not completed	Open Shopify Theme Editor manually, enable STOQ toggle, and click Save
Store uses Online Store 1.0 theme	Platform limitation	Upgrade to an Online Store 2.0 theme to use STOQ

FAQs

Q: Do I need to enable the app embed for every theme?

A: Yes. If you switch or update your live theme, you may need to re-enable the STOQ app embed on the new theme. Each theme has its own app embed settings.

Q: Will the Preorder button show on collection pages?

A: Not by default. The Preorder button only appears on product pages unless you enable it for other page types. Go to <strong>Preorders → Settings → Pages</strong> and turn on the <strong>Collection pages</strong> toggle. The same applies for the home page and search results.

Q: What happens when a scheduled offer's start date arrives?

A: The offer automatically becomes active and the Preorder button will appear on the linked products without any manual action. Similarly, when the end date passes, the button will be removed automatically.

Q: Can I use STOQ with a headless Shopify store?

A: Yes. While the app embed does not work on headless storefronts, STOQ provides a dedicated <a href="https://docs.stoqapp.com/preorders-api">Preorders API</a> for integrating preorder functionality into custom storefronts.

Q: How do I know which CSS selectors my theme uses?

A: Right-click the Add to Cart button on your product page and select Inspect to open browser developer tools. The highlighted HTML will show the element's tag, class names, and parent structure. Use these to build your custom selector. See the full <a href="https://help.stoqapp.com/en/article/how-to-use-dev-mode-to-control-placement-of-preorder-button-and-related-elements-zfu3qk/">Dev mode guide</a> for detailed instructions.

Q: I enabled Dev mode but the button still does not appear. What should I do?

A: Double-check that the selectors you entered match the actual HTML elements on your product page. Try using broader selectors first (e.g., <code>form[action='/cart/add']</code>). If the issue persists, contact STOQ support with your store URL for assistance.

Updated on: 06/05/2026

Was this article helpful?

Thank you!