> ## 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 add preorder button on different page types

By default, STOQ displays the preorder button on product pages. However, many stores also want customers to preorder directly from collection pages, home pages, search results, or custom sections like "Featured Products" and "Quick Buy" modals. STOQ's Pages settings let you extend the preorder button to these non-product pages, giving customers more opportunities to place preorders throughout your store.

|| Note: If you sell in multiple markets, use this guide to set up [Locations & Markets](https://help.stoqapp.com/en/article/how-does-stoq-interact-with-shopify-locations-markets-and-shipping-wkbc6s/) for preorders to work correctly on non product pages
### Why Add Preorder Buttons to Other Pages

Extending preorder functionality beyond product pages offers several benefits.

###### Benefits

* **Faster checkout**: Customers can preorder without visiting the product page
* **Better conversion**: More touchpoints mean more opportunities to capture preorders
* **Consistent experience**: Preorder availability is visible wherever products appear
* **Quick buy support**: Works with quick buy modals and featured product sections

###### Supported Page Types

STOQ supports adding the preorder button to:

* **Collection pages**: Product grids on collection/category pages
* **Home page**: Featured products, product carousels, and product grids on your homepage
* **Search pages**: Products displayed in search results
* **Custom pages**: Any page with product sections, quick buy modals, or featured product blocks

### Supported Page Types

STOQ supports adding the preorder button to several page types. Some are self-service (you toggle them on yourself), while others require a custom integration built by the STOQ team.

##### Self-Service Page Types

You can enable preorders on these page types immediately by toggling a switch:
* Collection pages — product grids on collection or category pages
* Home page — product grids, carousels, and "Best sellers" or "New arrivals" sections
* Search pages — products displayed in search results

##### Page Types That Require STOQ Team Setup

These page types require a custom integration built specifically for your theme by the STOQ team. You cannot simply toggle them on yourself:
* Quick Buy modals — popup modals that let customers add to cart without visiting the product page (available on collection pages, home page, and search pages)
* Featured Product sections — theme sections that display a single featured product with an add-to-cart button (available on the home page)

|| Important: Quick Buy and Featured Product integrations must be set up by the STOQ team because each theme implements these components differently. The STOQ team reviews your specific theme and configures the correct CSS selectors and variant detection logic so the preorder button works reliably.

### Accessing Pages Settings

The Pages settings are located in the Preorders section of STOQ.

###### Navigating to Pages Settings

1. From your Shopify admin, open the **STOQ** app.
2. Click **Preorders** in the left navigation menu.
3. Navigate to the **Settings** tab and scroll down to the **Pages** section.
4. Click **Customize** to open the Pages & Locations settings.
 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/pages-1_kattjh.png)
### Enabling Preorders on Collection Pages

Collection pages display products in a grid format. You can add the preorder button to these product cards.

###### Enabling Collection Page Preorders

1. In the Pages settings, click on **Collection page**.
2. Toggle the switch to **enable** preorders on collection pages.
3. The preview on the right shows how the button will appear.
4. Click **Save changes** to apply.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/pages-2_1ofbvew.png)
###### How It Works

###### **When enabled:**

* Products in your preorder offers show the preorder button on collection pages
* In-stock products continue to show the regular "Add to Cart" button
* The button replaces or appears alongside the existing add to cart button (depending on your theme)

###### Collection Page Settings

**For advanced customization, you can configure:**

* **Form selector**: CSS selector for the product form on collection pages
* **Add to cart button selector**: CSS selector for the button to replace
* **Badge selector**: CSS selector for where to place the preorder badge
* **Badge position**: Where to insert the badge relative to the selector (before, after, inside)

|| Note: Most themes work automatically without custom selectors. Only use these settings if the button isn't appearing correctly.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/pages-3_w2q40a.png)
### Enabling Preorders on Home Page

Your home page often features products in carousels, grids, or featured sections. STOQ can add the preorder button to these areas.

###### Enabling Home Page Preorders

1. In the Pages settings, click on **Home page**.
2. Toggle the switch to **enable** preorders on the home page.
3. The preview shows how the button will appear.
4. Click **Save changes** to apply.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/pages-4_uontit.png)
###### Supported Home Page Sections

**The preorder button can appear in:**

* Featured product sections
* Product carousels and sliders
* Product grids and collections
* "Best sellers" or "New arrivals" sections
* Any section that displays products with an add to cart button

###### Home Page Settings

**For advanced customization:**

* **Form selector**: CSS selector for product forms on the home page
* **Add to cart button selector**: CSS selector for buttons to replace
* **Badge selector**: CSS selector for badge placement

### Enabling Preorders on Search Pages

When customers search your store, preorder products can display the preorder button in search results.

###### Enabling Search Page Preorders

1. In the Pages settings, click on **Search page**.
2. Toggle the switch to **enable** preorders on search pages.
3. Click **Save changes** to apply.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/pages-5_4jbuy9.png)
###### How Search Page Preorders Work


* Products matching search queries show the preorder button if they're in a preorder offer
* Customers can preorder directly from search results
* Works with both instant search and full search results pages

### Adding Preorders to Custom Pages

For pages or sections not covered by the standard options, STOQ provides custom page support.

###### Accessing Custom Pages Settings

1. In the Pages settings, click on **Custom pages**.
2. Chat with our team as it requires to manually configure the integration from our backend admin tool using specific code selectors. We will review your specific setup and handle the technical implementation for you.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/pages-10_1wk9ahn.png)

###### Common Custom Page Use Cases

**Custom page settings are useful for:**

* **Quick buy modals**: Popup modals that let customers add to cart without visiting the product page
* **Featured product sections**: Custom theme sections that display individual products
* **Third-party app integrations**: Product displays from other apps
* **Custom landing pages**: Marketing pages with product displays

### Requesting Quick Buy Integration

Quick Buy modals let customers add products to the cart without leaving the current page. Because every theme implements Quick Buy differently, the STOQ team must build a custom integration for your store. You cannot enable this by toggling a switch alone.

##### How to Request Quick Buy Setup

1. In the Pages settings, click on the page type where you want Quick Buy support (e.g., **Collection page**, **Home page**, or **Search page**).
2. Look for the **Quick Buy** checkbox. Below it, you will see a **Request setup** link.
3. Click **Request setup**.
4. A **Requested** badge appears next to the checkbox, confirming your request has been submitted.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_icn97d.png)
![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_13ff33i.png)

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_17nnv0p.png)
|| **Note:** The **Request setup** link only appears if you are on a paid plan. If you do not see it, upgrade your plan first.

### What Happens After You Request Setup

1. The STOQ team receives your request and reviews your theme's Quick Buy implementation.
2. The team configures the correct selectors and variant detection for your theme.
3. Once the integration is ready, you receive an **email and chat message** confirming the setup is complete.
4. The Quick Buy checkbox becomes enabled — you can now toggle it on or off.

|| **Important:** Until the STOQ team completes the setup, the Quick Buy checkbox remains disabled. You do not need to do anything else after clicking **Request setup** — the team handles everything.

### Where Quick Buy Is Available

You can request Quick Buy setup on any of these page types:

* **Collection pages**
* **Home page**
* **Search pages**
* **Custom pages**

Each page type requires a separate request because the Quick Buy modal may use different selectors on different pages.

### Requesting Featured Product Integration

Featured Product sections display a single product with an add-to-cart button, typically on the home page. Like Quick Buy, this requires a custom integration built by the STOQ team.

##### How to Request Featured Product Setup

1. In the Pages settings, click on **Home page**.
2. Look for the **Featured products** checkbox. Below it, you will see a **Request setup** link.
3. Click **Request setup**.
4. A **Requested** badge appears next to the checkbox, confirming your request.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_1jsatzd.png)

|| **Note:** Featured Product integration is currently available on the **home page** only.

### What Happens After You Request Featured Product Setup

The process is the same as Quick Buy:

1. The STOQ team reviews your theme's Featured Product section.
2. The team configures the integration for your specific theme.
3. You receive an **email and chat message** when the setup is complete.
4. The Featured products checkbox becomes enabled and you can toggle it on or off.

|| **Important:** The checkbox remains disabled until the STOQ team finishes building the integration. Simply clicking **Request setup** is all you need to do — the team handles the rest

|| Once the setup is requested, the STOQ support team will reach out to you within 24 - 48 hours after setting it up. Please feel free to reach out via live chat on the status of the setup

| Tip: Request setup only if your theme actually uses Quick Buy modals or Featured product sections. If your theme does not have these elements, the integration will not have any effect.

### Understanding How Non-Product Page Preorders Work

Here's what happens behind the scenes when you enable preorders on non-product pages.

###### Detection Process

1. STOQ scans the page for product forms and add to cart buttons.
2. It identifies which products are in active preorder offers.
3. For preorder products, it replaces or modifies the add to cart button.
4. The preorder button inherits your offer's button text and styling.

###### Theme Compatibility

STOQ works with most Online Store 2.0 themes automatically. The app:

* Detects common theme patterns and selectors
* Adapts to different product card layouts
* Handles various add to cart button implementations

|| Important: STOQ requires Online Store 2.0 themes. Online Store 1.0 themes are not supported because they don't support app embeds.

### Configuring Button Appearance

The preorder button on non-product pages uses your offer's button settings.

###### Button Text and Style

The button displays:

* The button text from your preorder offer (e.g., "Pre-order Now")
* Colors configured in your offer's Button settings
* Badge text if badges are enabled for the offer

###### Customizing for Non-Product Pages

To change how the button appears on collection and other pages:

1. Go to **Preorders**.
2. Edit the relevant preorder offer.
3. Click the **Customize** button and click **Widget**.
4. Adjust button text, colors, and badge settings.
5. These changes apply to both product pages and non-product pages.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/pages-8_o18ut7.png)

### Testing Your Setup

After enabling preorders on non-product pages, verify everything works correctly.

###### Testing Collection Pages

1. Navigate to a collection that contains preorder products.
2. Verify the preorder button appears on preorder product cards.
3. Click the preorder button to ensure it adds the product to cart.
4. Complete a test checkout to confirm the preorder flow works.

###### Testing Home Page

1. Go to your store's home page.
2. Find sections that display preorder products.
3. Verify the preorder button appears correctly.
4. Test the add to cart functionality.

###### Testing Search

1. Search for a preorder product by name.
2. Verify the preorder button appears in search results.
3. Test adding to cart from search results.

Screenshot: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/pages-9_fdfod9.png)

### Troubleshooting Button Placement

If the preorder button isn't appearing correctly, try these solutions.

###### Button Not Appearing

1. **Verify the offer is enabled**: Check that your preorder offer is active.
2. **Check product assignment**: Ensure the product is added to the preorder offer.
3. **Confirm page type is enabled**: Make sure you've enabled preorders for that page type.
4. **Check theme compatibility**: Ensure you're using an Online Store 2.0 theme.

###### Button in Wrong Position

1. **Use custom selectors**: In the page settings, add custom CSS selectors for your theme.
2. **Adjust badge position**: Change the badge selector type (beforebegin, afterbegin, beforeend, afterend).
3. **Request integration**: Contact STOQ support for a custom theme integration.

###### Button Styling Issues

1. **Check offer settings**: Verify button colors and text in your offer's Button tab.
2. **Review theme CSS**: Some themes may override button styles.
3. **Use Dev Mode**: Access advanced CSS settings in the Dev Mode section.

###### Quick Buy or Featured Product Button Not Appearing

1. Confirm setup is complete: Check that the Requested badge has been replaced by an active toggle. If it still shows "Requested," the STOQ team is still working on it.
2. Enable the toggle: After setup is complete, make sure you have turned on the toggle and clicked Save changes.
3. Verify your theme supports it: Quick Buy integrations only work if your theme has Quick Buy / Quick Add modals. Featured Product integrations only work if your home page has a Featured product section.

### Best Practices

Follow these recommendations for the best results with non-product page preorders.

###### Start with Standard Settings

* Enable page types one at a time
* Test each page type before enabling the next
* Use built-in integrations when available

###### Optimize for Conversion

* Use clear, action-oriented button text
* Ensure the preorder button stands out visually
* Keep the customer experience consistent across all pages

###### Monitor Performance

* Track preorder conversions from different page types
* Use STOQ Analytics to see which pages drive the most preorders
* Adjust your strategy based on data

###### Maintain Theme Compatibility

* Test after theme updates
* Re-verify settings if you change themes
* Keep STOQ updated for the latest theme compatibility

### Known Limitations

The non-product page preorder feature has some constraints to be aware of.

* Requires Online Store 2.0 themes—Online Store 1.0 themes are not supported
* Some highly customized themes may need custom CSS selectors
* Quick buy modals from third-party apps may require custom integrations
* The preorder button inherits offer settings and cannot be styled differently per page type
* Some themes may require a custom integration request for full compatibility

### Troubleshooting

If you encounter issues with preorder buttons on non-product pages, use this guide to identify and resolve common problems.

| Symptom | Likely Cause | Fix |
| ---- |
| Button not appearing on collection page | Collection page preorders not enabled | Enable in Pages > Collection page |
| Button appears on wrong products | Product not in preorder offer | Add product to the correct offer |
| Button styling doesn't match | Theme CSS overriding styles | Adjust offer button settings or use Dev Mode |
| Button appears but doesn't work | JavaScript error | Check browser console; contact support if needed |
| Badge not showing | Badge not enabled in offer | Enable badge in offer's Button tab |
| Quick buy modal not working | Integration not enabled | Enable the relevant theme integration |

### FAQs

**Q: Do I need to enable each page type separately?**
**A**: Yes. Collection pages, home pages, search pages, and custom pages each have their own toggle. Enable only the page types where you want the preorder button to appear.

**Q: Will the preorder button appear for all products or just preorder products?**
**A**: The preorder button only appears for products that are in an active preorder offer. Regular in-stock products continue to show the standard "Add to Cart" button.

**Q: Can I use different button text on collection pages vs. product pages?**
**A**: No. The button text is configured in your preorder offer and applies to all page types. If you need different text, you would need separate offers, but products can only be in one offer at a time.

**Q: My theme isn't showing the button correctly. What should I do?**
**A**: First, check if there's a built-in integration for your theme in the Pages settings. If not, try adding custom CSS selectors. If that doesn't work, contact STOQ support to request a custom integration for your theme.

**Q: Does this work with quick buy or quick add features?**
**A**: Yes, but it depends on your theme. Many themes have built-in integrations. For third-party quick buy apps, you may need a custom integration. Check the Integrations section in Pages settings.

**Q: Will this slow down my store?**
**A**: STOQ is optimized for performance. The script that handles non-product page preorders loads asynchronously and only activates on pages where it's needed. Impact on page load time is minimal.