Articles on: General

How to setup preorder and notify me button on Pagefly

STOQ can display the Preorder button and Notify Me button on pages built with PageFly. Because PageFly uses its own page structure, STOQ needs some extra configuration to detect your products and place buttons correctly. This article covers two setups: adding the preorder button on product pages built with PageFly, and enabling buttons on collection, home, search, and custom pages built with PageFly.


Part 1: Preorder Button on PageFly Product Pages


PageFly product pages use a custom layout for the "Add to Cart" section. STOQ needs to know exactly where the buy buttons are so it can replace or position the Preorder button correctly. You do this by adding a custom CSS class to the buy buttons block in PageFly, and then entering that class in STOQ's Dev mode settings.


Step 1: Find the Buy Buttons Block in PageFly


  1. Open the PageFly app in your Shopify Admin.
  2. Go to Sections and find the product page or section you want to configure.
  3. Select the section, then expand the tree list on the left side until you find the Block that contains the Buy buttons and quantity selector.






Step 2: Add a Custom CSS Class


  1. Select the block that holds the buy buttons.
  2. On the right side panel, scroll down to the Attributes section.
  3. In the HTML class field, enter a class name. For example: buy_buttons_stoq





Tip: Use a descriptive class name that is easy to identify, such as buy_buttons_stoq or preorder-form. Avoid spaces — use underscores or hyphens instead.


Step 3: Save and Publish in PageFly


  1. Click Save in PageFly.
  2. Click Publish to make the changes live on your storefront.


Warning: You must publish for the changes to take effect. Saving alone does not update your live storefront.


Step 4: Enter the Class in STOQ Dev Mode Settings


Now tell STOQ where to find the buy buttons by entering the custom class in Dev mode.


  1. In the STOQ app, go to Preorders → Settings.
  2. Scroll down and enable Dev mode.
  3. In the Form section field, enter the class you added in PageFly with a dot prefix. For example: .buy_buttons_stoq
  4. Click Save.


For a full guide on all Dev mode fields, see How to use Dev mode to control placement of the Preorder button or if it's for the notify me button, see How to use Dev mode to control placement of notify me widget and signup form


Note: This is a one-time setup. Once you save the class in Dev mode, the Preorder button will appear automatically on your PageFly product pages for any products assigned to an active preorder offer.


Part 2: Preorder and Notify Me Button on PageFly Collection, Home, Search, and Custom Pages


STOQ detects products on non-product pages by looking for links (<a> tags) that point to product pages. PageFly does not add these product links by default. Without them, STOQ cannot identify which products are on the page, so no Preorder or Notify Me buttons appear.


To fix this, you need to add a hidden product link block in PageFly.


Supported Page Types


STOQ supports adding the Preorder and Notify Me button to any PageFly-built page that displays products:


  • Collection pages — Product grids on collection or category pages
  • Home page — Featured products, carousels, and product grids
  • Search pages — Products displayed in search results
  • Custom pages — Any landing page or section that shows products


Note: You also need to enable each page type in STOQ. Go to Preorders → Settings → Pages and turn on the toggles for the page types where you want the buttons to appear. For a full guide, see How to add preorder button on different page types.



  1. Open the PageFly app in your Shopify Admin.
  2. Go to Sections and find the page or section that contains your product list.
  3. Click the Elements tab.
  4. Look for the Product view details block under the Shopify tab.




  1. Drag and drop the Product view details block into the parent section that holds the product list (the same section as the buy buttons).



  1. After dropping, the block will appear in the tree list. This block adds a link (<a> tag) to each product, which STOQ uses to detect the products on the page.



The "Product view details" block adds a visible link to the page. You need to hide it so customers do not see it.


  1. Select the Product view details block in the tree list.
  2. In the settings panel, enable Hide on desktop and Hide on mobile to hide the block on all device types.


Tip: Hiding the block prevents it from showing on the page while keeping the product link in the HTML so STOQ can still detect it.


Step 3: Save, Publish, and Verify


  1. Click Save and then Publish in PageFly.
  2. Open the page on your storefront.
  3. Verify that the "Product view details" link is not visible on the page.
  4. Check that the Preorder or Notify Me button now appears on the relevant products.
  5. If the buttons still do not appear, check your STOQ settings:
  • Make sure the app embed is enabled (see How to check if STOQ app embed is enabled).
  • Make sure the correct page type is enabled under Preorders → Settings → Pages.
  • Make sure your preorder offer is enabled and linked to the relevant products under Preorders → Offers.



If your PageFly pages use Quick Buy modals or Featured product sections, the full preorder experience can also appear inside these elements. These integrations require a one-time setup by the STOQ team.


  1. In the STOQ app, go to Preorders → Settings → Pages.
  2. Click the Pages card to open the page editor.
  3. Under each page type (Collection, Home, or Search), look for the Quick Buy checkbox. On the Home page, you will also see a Featured product checkbox.
  4. Click the Request setup link underneath the relevant checkbox.
  5. The STOQ team will review your PageFly layout and build the integration. You will receive an email and a chat message once it is ready.
  6. After setup is complete, the Request setup link is replaced by a toggle you can enable or disable.



Note: Quick Buy and Featured Product integrations require a paid plan. The Quick Buy and featured product integration is available on collection, home, and search pages.


Known Limitations


  • PageFly must include product links on non-product pages — STOQ relies on <a> tags with /products/ in the URL to detect products. If the "Product view details" block is removed, buttons will stop appearing on collection, home, search, and custom pages.
  • Dev mode required for product pages — You must enable Dev mode and enter the custom class from PageFly in the Form section field. See Dev mode article for details.
  • Online Store 2.0 required — STOQ's app embed only works with Online Store 2.0 themes, regardless of whether you use PageFly.
  • Custom product card layouts — If your PageFly layout uses a non-standard product card structure, STOQ may not position the button correctly. You can use Dev mode to set custom selectors for button placement.
  • Publish required — Saving in PageFly alone does not update your live storefront. You must click Publish for any changes to take effect.
  • Quick Buy and Featured Product require paid plan — These integrations also require a one-time setup by the STOQ team.


Troubleshooting


Symptom

Likely Cause

Fix

No Preorder button on PageFly product page

Custom CSS class not configured in STOQ

Enable Dev mode under Preorders → Settings and enter the class (e.g., .buy_buttons_stoq) in the Form section field

No buttons on collection/home/search pages

"Product view details" block not added or removed

Re-add the block in PageFly and re-publish

No buttons on collection/home/search pages

Page type not enabled in STOQ settings

Go to Preorders → Settings → Pages and enable the correct page type

No buttons on any page

App embed is disabled

Enable the app embed via Preorders → Offers or the Shopify Theme Editor

No buttons on any page

Offer is disabled or not linked to products

Check offer status and product assignment under Preorders → Offers

"Product view details" link is visible on the page

Hide on desktop / Hide on mobile not enabled

Select the block in PageFly and enable both hide options

Changes not appearing on storefront

PageFly was saved but not published

Click Publish in PageFly to push changes to the live storefront

Button appears in wrong position

PageFly layout uses non-standard structure

Enable Dev mode and configure custom selectors

Quick Buy modal does not show preorder button

Quick Buy integration not set up or not enabled

Check the Quick Buy toggle in Pages settings. If it shows "Request setup," click to request it


FAQs


Q: Do I need to do both Part 1 and Part 2?

A: Only if you use PageFly for both product pages and non-product pages. If your product pages use your theme's default layout (not PageFly), you only need Part 2 for collection, home, search, and custom pages.


Q: Where do I enter the custom CSS class in STOQ?

A: Go to <strong>Preorders → Settings</strong>, enable <strong>Dev mode</strong>, and enter the class with a dot prefix (e.g., <code>.buy_buttons_stoq</code>) in the <strong>Form section</strong> field. See the <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 article</a> for all available fields.


Q: Will I need to redo this if I update my PageFly layout?

A: If you rebuild the section from scratch, yes. Minor edits to the existing section should preserve both the custom CSS class and the "Product view details" block.


Q: Does this work for both Preorder and Notify Me buttons?

A: Yes. Both buttons rely on the same product detection mechanism. Once STOQ can detect products on the page, both buttons will appear based on your offer and alert settings.


Q: Why do I need to publish in PageFly for changes to work?

A: PageFly saves a draft version when you click Save. The live storefront only updates when you click Publish. STOQ reads the live page HTML, so unpublished changes will not be detected.


Q: Does this also work with GemPages or other page builders?

A: The steps in this article are specific to PageFly. GemPages has a similar but different process — see <a href="https://help.stoqapp.com/en/article/how-to-setup-preorder-button-and-notify-me-button-for-merchants-using-page-builder-gempages/">How to set up STOQ on GemPages</a> for those instructions. Contact STOQ support for help with other page builders.


Q: Do I need to repeat the Part 2 steps for each PageFly page?

A: Yes. Each PageFly section that contains a product list needs the "Product view details" block added separately. If you have multiple pages (e.g., a collection page and a home page), add the block in each section.

Updated on: 08/05/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!