Set up STOQ buttons on GemPages
STOQ detects products on your storefront by looking for links (<a> tags) that point to product pages. GemPages doesn't add these product links by default, so STOQ can't identify the products on a GemPages-built page, and the Preorder and Notify me buttons don't appear. This guide shows you how to add the link STOQ needs so the buttons show on your GemPages collection, home, search, and custom pages.
Why the buttons don't appear on GemPages
STOQ scans your page for links whose URL contains /products/. It uses those links to work out which products are on the page, then adds the right Preorder or Notify me button next to each one. A product list built with GemPages often doesn't include a standard product link, so STOQ has nothing to detect and no buttons render. Adding one hidden product link per product fixes it.
Supported page types
STOQ can add the Preorder and Notify me button to any GemPages page that displays products:
- Collection pages: product grids on collection or category pages.
- Home page: featured products, carousels, and product grids.
- Search pages: products shown in GemPages search results.
- Custom pages: any landing page or section that lists products.
The fix below applies to all of them.
Before you begin
| Requirement | Detail |
|---|---|
| Online Store 2.0 theme with the app embed on | STOQ's app embed only works on Online Store 2.0 themes. See Enable STOQ on your theme. |
| The page type turned on in STOQ | Enable each page type under Preorders > Settings > Pages, or the Notify me equivalent. See Show the preorder button on store pages. |
| An active offer or signups | Your preorder offer or back in stock signups are active for the products on the page. |
Set it up
Check whether STOQ can detect the products
Before changing anything, confirm the problem is a missing product link.
- Open the GemPages page on your storefront in Google Chrome.
- Right-click the page and choose Inspect to open Chrome DevTools, then open the Console tab.
- Type
window._RestockRocketConfig.productsand press Enter.
If the output is empty or {}, STOQ can't detect any products on the page, which confirms the issue: continue below. If it lists product names or handles, STOQ is detecting products fine, so the problem is elsewhere: check that the page type is enabled under Preorders > Settings > Pages.
Add a Product view more element
In the GemPages editor, add the element that creates the /products/ link STOQ needs.
- Open the GemPages app in your Shopify admin.
- Go to Sections and open the page or section with your product list.
- In the Elements tab, find the Product view more element.
- Drag it onto any one product in the list. GemPages repeats it across every product in that list automatically, so you only add it once.
Hide the product link
The Product view more element shows a visible button you probably don't want customers to see. Hide it with a CSS class and custom code, so the link stays in the HTML but isn't shown.
- Select the Product view more element, open its Advanced tab, and in the CSS class field add a class name, for example
stoq-hidden-link. - Open the Layer tree (the seventh icon on the left sidebar), and select the Row or Product list element that contains your products.
- Right-click it and choose Custom code, then add this CSS and click Save:
.stoq-hidden-link {
display: none;
}
Save, publish, and verify
- Click Save, then Publish in GemPages. Buttons only update on the published version.
- Open the page on your storefront.
- Confirm the Product view more button is hidden and the Preorder or Notify me button now appears on the relevant products.
Add the Product view more element to each GemPages section that lists products. If you have several pages, such as a collection page and a home page, repeat this in every section separately.
Enable Quick Buy and Featured product (optional)
If your GemPages pages use Quick Buy modals or Featured product sections, the full preorder experience can appear inside them too. These integrations need a one-time setup by the STOQ team, and a paid plan.
Open the Pages editor
In the STOQ app, go to Preorders > Settings > Pages, then click Customize to open the Pages editor.
Request the integration
Under each page type, find the Quick Buy checkbox (the home page also has a Featured product checkbox), then click the Request setup link beneath it.
Wait for confirmation
The STOQ team reviews your GemPages layout and builds the integration for your theme. You get an email and a chat message when it's ready, and the Request setup link becomes a toggle you can turn on or off.
Quick Buy is available on collection, home, and search pages. Featured product is available on the home page only.
Position the button with a stable selector
If you use Dev mode to place the button, or set a selector for a custom card layout, choose the selector carefully. GemPages auto-generates dynamic class names that change from one product section to the next, so a selector built on them breaks easily.
Never target GemPages system-generated classes, such as .__instant.iuTGcy4goRfUrh3RK a[data-instant-disabled="true"]. These class names are randomly generated and differ per product section, so a selector using them can break the buttons on other pages and place the Preorder or Notify me button in the wrong spot.
Instead, use a stable, specific selector, ideally one based on a data attribute, for example:
a[data-instant-action-type="add-to-instant-cart"][data-instant-disabled="true"]Data attributes like these stay consistent across sections, so they're far safer than a random class.
If you can't find a stable selector or data attribute, add your own: apply a custom class to the button (or the relevant element) in GemPages and target that class instead. If STOQ support is helping you, they'll request collaborator access to add the class for you.
Limitations
- GemPages must keep the product links. STOQ relies on
<a>tags with/products/in the URL. If the Product view more element is removed, or a GemPages update changes the link structure, the buttons stop appearing and you re-add the element. - Online Store 2.0 is required. STOQ's app embed only works on Online Store 2.0 themes, regardless of GemPages.
- Custom product card layouts may need Dev mode. A non-standard card structure can place the button in the wrong spot. Use Dev mode to set custom selectors.
Troubleshooting
No Preorder or Notify me button on the GemPages page
The Product view more element is missing or was removed. Re-add it to the product list in GemPages and publish again. In Chrome DevTools, window._RestockRocketConfig.products should list the page's products.
Buttons still don't appear after adding the element
Check these in order:
- The page type is enabled under Preorders > Settings > Pages.
- The app embed is enabled. See Enable STOQ on your theme.
- The offer is enabled and linked to the products under Preorders > Offers.
The Product view more button is visible on the page
The CSS class or custom code isn't applied correctly. Confirm the class name in the element's Advanced tab matches the one in your custom CSS exactly.
The button appears in the wrong position
A custom product card layout can misplace the button. Enable Dev mode and set custom selectors for button placement, using a stable selector rather than a GemPages auto-generated class. See Position the button with a stable selector.
The Quick Buy modal doesn't show the preorder button
The Quick Buy integration isn't set up or isn't enabled. In the Pages editor, check the Quick Buy toggle. If it still shows Request setup, click it to request the integration.
FAQ
Does this work for both the Preorder and Notify me buttons?
Yes. Both rely on the same product detection. Once STOQ can detect products through the product links, both buttons appear based on your offer and alert settings.
Does the fix apply to all GemPages page types?
Yes. Any GemPages section that lists products, whether a collection, home, search, or custom page, needs the Product view more element for STOQ to detect the products.
Do I need to repeat this on each GemPages page?
Yes. Every GemPages section that contains a product list needs the element added separately. Adding it to one product in a list covers the rest of that list, but a different page or section needs its own.
Will I need to redo this if I update my GemPages layout?
Only if you rebuild the product list section from scratch. Minor edits usually preserve the Product view more element and its CSS class.
Can I use a different class name to hide the element?
Yes. Any class name works, as long as the name in the element's Advanced tab matches the one in your custom CSS.
Does this also work with PageFly or other page builders?
These exact steps are specific to GemPages. Other builders have their own methods. See Set up STOQ buttons on Pagefly, or contact support for another builder.
Related guides
Set up STOQ buttons on Pagefly
The equivalent setup for Pagefly pages.
Show the preorder button on store pages
Turn on the button for collection, home, and search pages.
Add the Notify me button to other pages
Show the Notify me button beyond the product page.
Enable STOQ on your theme
The app embed has to be on first.
