Articles on: General

How STOQ automatically hides the Buy It Now button on preorder products

When a product is on preorder, Shopify's default Buy It Now button can bypass the preorder flow and cause payment or fulfillment issues. STOQ automatically hides the Buy It Now button on any variant with an active preorder offer. The button reappears the moment a customer switches to an in-stock variant. This works across product pages, featured product sections, and quick buy modals — no manual configuration needed.

How STOQ Auto-Hides the Buy It Now Button

STOQ uses a two-layer approach to hide the Buy It Now button on preorder products reliably, regardless of how fast or slow the page loads.

Server-Side CSS (First Layer)

The STOQ theme app extension injects a CSS rule into every page before any JavaScript runs:

.stoq-hide-buy-now .shopify-payment-button { display: none !important }

This rule lives in the critical CSS block of the theme app extension. Because CSS loads before JavaScript, the Buy It Now button is hidden the instant the page renders — there is no visible flash of the button appearing and then disappearing.

JavaScript Class Toggle (Second Layer)

Once the page loads, STOQ's JavaScript checks whether the currently selected variant has a preorder selling plan. If it does, STOQ adds the stoq-hide-buy-now class to the product form. If the customer switches to a variant that is in stock (no preorder), STOQ removes the class and the Buy It Now button reappears.

Preorder variant selected → class added → Buy It Now hidden
In-stock variant selected → class removed → Buy It Now visible

Key point: The stoq-hide-buy-now class is scoped to the preorder form element, not the entire page. If your store has multiple product forms on one page (e.g., a product page plus a featured product section), only the forms linked to preorder variants are affected.

Where It Works

STOQ hides the Buy It Now button across all standard storefront locations where a preorder product can appear.

Product Pages

On a standard product page, STOQ targets the form matching your configured form selector (default: form[action*="/cart/add"]). When a customer lands on a preorder variant, the Buy It Now button is hidden automatically. If the product has both preorder and in-stock variants, switching between them toggles the button in real time.

Featured Product Sections

Many themes include a featured product block on the homepage or other pages. STOQ detects these sections and applies the same hide logic. Each featured product section is handled independently — if one shows a preorder product and another shows a regular product, only the preorder one has its Buy It Now button hidden.

Quick Buy Modals

Quick buy (or "quick add") modals let customers purchase from collection pages without visiting the full product page. STOQ monitors for these modals and hides the Buy It Now button inside them when the product is on preorder.

quick-buy-modal-buy-now-hidden

Requirements

Before the Buy It Now button auto-hide works on your store, confirm these prerequisites are met.

Online Store 2.0 theme — STOQ requires a theme that supports app embeds. Online Store 1.0 themes are not supported.
STOQ app embed enabled — The STOQ app embed must be turned on in your theme editor. Go to Online Store → Themes → Customize → App embeds, then toggle STOQ on and click Save.
Theme app extension published — Your store must be running the latest version of the STOQ theme app extension. If you recently installed STOQ or the feature was updated, the extension may need to be republished. Contact STOQ support if you are unsure whether your extension is up to date.
Shopify Payments enabled — The Buy It Now button only appears on stores using Shopify Payments (or a compatible accelerated checkout). If your store does not show a Buy It Now button at all, this feature has no effect.

What Happens When a Customer Switches Variants

STOQ reacts to variant changes in real time. Here is the expected behavior when a product has a mix of preorder and in-stock variants.

Customer loads the product page with a preorder variant selected.
The Buy It Now button is hidden; only the Preorder button is visible.
Customer selects an in-stock variant from the variant picker.
The stoq-hide-buy-now class is removed from the form.
The Buy It Now button reappears alongside the standard Add to Cart button.
Customer switches back to the preorder variant.
The Buy It Now button is hidden again and the Preorder button returns.

Tip: This toggle happens instantly because the CSS rule is already loaded. There should be no flicker or delay when switching between variants.

Custom Buy Button Selectors

Most themes use Shopify's standard .shopify-payment-button selector for the Buy It Now button. If your theme uses a non-standard selector, STOQ's automatic CSS rule may not catch it.

In that case, STOQ support can configure a custom buy button selector for your store. This tells STOQ's JavaScript to also target your theme's specific Buy It Now element using an inline style fallback.

The default selector (.shopify-payment-button) works for the vast majority of themes.
Custom selectors are configured per-store by STOQ support — you cannot set them yourself from the app.
If you notice the Buy It Now button still appearing on preorder products, contact STOQ support via live chat with your page link where the buy now button is showing up so they can add the correct selector.

Known Limitations

Online Store 1.0 themes are not supported — The feature requires the STOQ theme app extension, which only works with Online Store 2.0 themes.
Theme app extension must be up to date — If the extension has not been republished after an update, the server-side CSS rule may be missing. Contact STOQ support to verify.
Third-party quick buy apps — Some third-party quick buy or quick add apps render their own Buy It Now buttons outside the standard Shopify form structure. STOQ may not detect or hide these buttons automatically.
Custom or heavily modified themes — Themes that override the .shopify-payment-button class or use non-standard form markup may require a custom selector configured by STOQ support.
JavaScript-disabled browsers — The server-side CSS hides the button on initial load, but variant switching (showing/hiding on change) requires JavaScript to be enabled.

Troubleshooting

Symptom	Likely Cause	Fix
Buy It Now button shows briefly then disappears	Normal behavior on very first page load if CSS loads slightly after HTML	This is cosmetic and typically imperceptible. If persistent, verify the theme app extension is republished.
Buy It Now button never hides on preorder products	STOQ app embed is not enabled	Go to Online Store → Themes → Customize → App embeds, toggle STOQ on, and click Save.
Buy It Now button hides on product page but not in quick buy modal	Theme uses a non-standard quick buy implementation	Contact STOQ support via live chat with your theme name for a custom integration.
Buy It Now button stays hidden even on in-stock variants	JavaScript error preventing class removal	Open your browser's developer console (F12), check for errors, and contact STOQ support with the details.
Buy It Now button still visible after STOQ update	Theme app extension not republished	Contact STOQ support to republish the theme app extension for your store.
Buy It Now button hidden on the entire page, not just the preorder form	Custom CSS conflict	Check for custom CSS in your theme that targets `.shopify-payment-button` globally. The `stoq-hide-buy-now` class should only be on the preorder form.

FAQs

Q:Do I need to do anything to hide the Buy It Now button on preorder products?
A: No. STOQ hides it automatically once the app embed is enabled and the theme app extension is installed. There are no settings to configure.

Q: Will hiding the Buy It Now button affect my non-preorder products?
A: No. The hide class is scoped only to product forms with an active preorder variant. In-stock products are not affected.

Q: What if my theme does not show a Buy It Now button at all?
A: If your theme or payment setup does not display a Buy It Now button, this feature has no visible effect. It will not cause any issues — the CSS rule simply has nothing to target.

Q: Can I choose to keep the Buy It Now button visible on preorder products?
A: No. Keeping the Buy It Now button visible on preorder products can bypass the preorder selling plan, resulting in incorrect payment terms or fulfillment issues. STOQ hides it to protect the preorder flow.

Q: Does this work with Shopify's dynamic checkout buttons (e.g., Shop Pay, Apple Pay)?
A: Yes. Shopify wraps all dynamic checkout buttons (Shop Pay, Apple Pay, Google Pay) inside the .shopify-payment-button container. STOQ's CSS rule hides the entire container, covering all accelerated checkout options.

Updated on: 24/06/2026

Was this article helpful?

Thank you!