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.

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

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.

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.

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)

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.

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.

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.

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

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

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.

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:

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.

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.

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.

Updated on: 10/04/2026