Set up STOQ buttons on Pagefly
Pagefly pages need a small amount of setup for STOQ to place its buttons: product pages need a target class for the button, and other page types need a product link STOQ can detect.
Before you begin
- You're on an Online Store 2.0 theme with the STOQ app embed enabled. See Enable STOQ on your theme.
- Your preorder offer or back in stock signups are active for the relevant products.
- The page type is turned on in STOQ settings.
Product pages
Find the buy buttons block
In Pagefly's section tree, locate the block that holds your buy buttons.
Add a CSS class
Add a custom CSS class to that block's HTML class field, for example buy_buttons_stoq.
Publish in Pagefly
Save and publish the page. Saving alone doesn't apply the change on the storefront.
Point STOQ at the class
In STOQ, open Dev mode under Preorders > Settings (or the back in stock equivalent) and enter the class with a dot prefix, for example .buy_buttons_stoq, in the Form section field.
Collection, home, search, and custom pages
Add a product link element
Add a Product view details block from Pagefly's Shopify elements to each product. This gives STOQ the /products/ link it uses to detect the product.
Hide it on all devices
Hide the block on all devices so visitors don't see it, while the link stays in the HTML.
Publish and enable the page type
Publish the page, and make sure the matching page type is turned on in STOQ settings.
Quick Buy and Featured Product layouts need a paid plan and setup by STOQ support.
Troubleshooting
No button on the product page
Confirm the class in STOQ's Form section field exactly matches the class on the Pagefly buy-buttons block, including the leading dot, and that you published in Pagefly.
No button on a collection or custom page
Add the hidden Product view details element to each product, publish, and enable that page type in STOQ settings.
Layout conflicts with a non-standard Pagefly structure
Custom layouts may need Dev mode positioning. See Position elements with dev mode.
