How to show the preorder button on collection pages and featured product sections
EZ Preorder & Back In Stock can replace the theme's add to cart button with your preorder button outside the product page: on product cards and quick add popups on collection pages, and in your theme's own Featured product section on the home page. Turn on Collection page, Featured product or both in Configuration → Collections & Featured Product, then click Save. Both switches are available on the Growth, Professional and Scale plans and are off by default.
Available on: Growth, Professional and Scale plans. On the Free and Core plans, both cards are greyed out and show Upgrade to Growth in place of the switch.
Where to find it: EZ Preorder → Configuration → Collections & Featured Product.
Before you start
- You are on the Growth, Professional or Scale plan.
- The EZ Preorder app embed is turned on in your theme. See How to install EZ Preorder and turn on the app embed.
- The preorder button already works on your product pages. These switches reuse the same preorder rules, button text and theme settings.
- Your theme preset is selected in Configuration → Theme Settings → Theme Selector. The presets fill in the settings these features use.
How to turn on the preorder button on collection pages and featured products
- In EZ Preorder, open Configuration.
- Under Visibility, click Collections & Featured Product.
- Turn on Collection page to show the preorder button on product cards and in quick add popups.
- Turn on Featured product to show the preorder button in your theme's Featured product sections.
- Click Save in the save bar.
- Open a collection page and your home page in a new browser tab, reload them, and check a preorder product.
Settings
| Setting | What it does | Default |
|---|---|---|
| Featured product | Shows the preorder button in your theme's Featured product sections on pages other than product and collection pages, such as the home page. | Off |
| Collection page | Shows the preorder button on product cards and in quick add popups on collection pages, home page product grids and search results. | Off |
| Badge Settings | Adds a preorder badge to product card images. Separate from the button. See How to show preorder badges on collection pages. | Off |
How the preorder button works on collection page product cards
When Collection page is on, EZ Preorder changes product cards that have their own add to cart button. Many themes show that button directly on the card for products with a single variant. For each preorder product:
- The card's add to cart button is replaced by a button with your Pre-order Button Text in the shopper's language. See How to change and translate the preorder button text.
- The item is added to the cart with the same preorder line item property (
type: preorder) the product page adds, and that property stays on the line through checkout and into the order. - The card button does not show your custom note or the deposit options, and Direct to Checkout does not apply to it. Shoppers who want to pay a deposit choose it on the product page or in the quick add popup.
Product cards decide which products are preorders the same way preorder badges do:
- The product must be turned on in your preorder list. Scheduled products count only while their preorder is running.
- Products on the Always or Specific inventory level rule get the preorder button whenever they are turned on.
- Products on the Sold out rule get the preorder button only while at least one variant is out of stock.
How the preorder button works in quick add popups
Many themes open a quick add popup, often labeled Choose options or Quick add, for products with several variants. When Collection page is on and a shopper opens that popup for a product in your preorder list, EZ Preorder checks the selected variant:
- If the variant's preorder rule is active for its current stock, the theme's add to cart button is replaced by your preorder button, with your custom note above it and, if partial payments are on, the deposit options. See Partial payments and deposits.
- If the variant is not on preorder, the theme's own button stays.
- When the shopper picks another variant in the popup, the button updates.
Direct to Checkout does not apply in quick add popups. The item is added to the cart with the preorder line item property.
How the preorder button works in Featured product sections
Many themes include a Featured product section that shows one product with its variant picker and add to cart button, usually on the home page. When Featured product is on, EZ Preorder treats that section like a small product page:
- If the selected variant's preorder rule is active, the add to cart button is replaced by your preorder button.
- Your custom note shows above the button, and the deposit options show if partial payments are on.
- If Direct to Checkout is on, the button takes the shopper straight to checkout. See How to enable the direct to checkout preorder button.
- The elements listed under Hidden elements in Theme Settings are hidden while the preorder button shows. By default that is the theme's dynamic checkout ("Buy it now") button.
- When the shopper switches variants, the button switches between preorder and add to cart.
The Featured product switch works on pages other than product and collection pages, such as your home page and other pages you build in the theme editor. A Featured product section placed on a product page or collection page template is not changed.
Preorder buttons by surface
| Surface | Switch | Custom note | Deposit options | Direct to Checkout | "Sold out" for other countries |
|---|---|---|---|---|---|
| Product card add to cart button | Collection page | No | No | No | Yes |
| Quick add popup | Collection page | Yes | Yes | No | Yes |
| Theme Featured product section | Featured product | Yes | Yes | Yes | Yes |
"Sold out" for other countries means: if you limit a variant to certain countries and turn on Show as sold out everywhere else, shoppers in other countries see a disabled "Sold out" button instead of add to cart. See How to set preorders for specific countries and markets.
Which pages the Collection page switch affects
The Collection page switch affects product grids on:
- Collection pages, including All products.
- Pages other than product pages that list products, such as featured collection sections on the home page and the search results page.
Product grids on product pages, such as recommendations, keep the theme's own buttons.
Theme settings the preorder button uses outside the product page
EZ Preorder finds product cards, quick add popups and Featured product sections with settings in Configuration → Theme Settings. Selecting your theme in Theme Selector fills these in. You should not need to change them yourself.
| Card in Theme Settings | Setting | Used for | Default |
|---|---|---|---|
| Featured product | Section selector | Finding the theme's Featured product section | .featured-product |
| Collection page | Product wrapper selector | Finding each product card | .product-card-wrapper |
| Collection page | Product id selector | Finding the element on the card that holds the product ID | h3 |
| Collection page | Product id attribute selector | The attribute on that element that contains the product ID | id |
| Collection page | Product image selector | Where badges go (not used by the button) | .card__media |
| Quick add | Button selector | The button that opens the quick add popup | modal-opener |
| Quick add | Modal selector | The quick add popup itself | .quick-add-modal__content-info |
The defaults match Shopify's Dawn theme. These cards are greyed out below the Growth plan. For details, see Advanced theme settings.
Featured product switch or Preorder Featured Product block
EZ Preorder has two ways to feature a preorder product outside the product page:
- The Featured product switch adds the preorder button to your theme's existing Featured product section. It keeps your theme's design, but depends on your theme's layout.
- The Preorder Featured Product block is EZ Preorder's own theme block. It works the same in every Online Store 2.0 theme, can go on any page, and shows only the variants that are on preorder. See How to add a featured preorder section to your store.
Limitations
- The preorder button is added once, when the page loads. Product cards loaded later by infinite scroll, a Load more button, or filters and sorting that update the grid without reloading the page keep the theme's add to cart button. Quick add buttons on those later cards also keep the theme's behavior.
- One Featured product section per page. If a page has two or more, the preorder button may appear in the wrong one.
- Product card buttons follow the product, not the variant. A card shows the preorder button for any product that is on preorder, using the card's default variant.
- Product cards whose theme shows Choose options or View product instead of an add to cart button have no button to replace. The quick add popup or product page handles those.
- On themes marked Badge incompatible in the Theme Selector, the app cannot find product cards, so the product card button does not appear.
Troubleshooting
Nothing changes on my collection pages. Check each of these in order:
- Collection page is on and you clicked Save.
- Your plan is Growth, Professional or Scale.
- The EZ Preorder app embed is on in Online Store → Themes → Customize → App embeds.
- The product is turned on in your preorder list, and its rule makes it a preorder now.
- Your theme preset in Theme Selector matches your published theme. If you changed themes, select the new theme's preset and click Save.
- Reload the page.
The product card shows add to cart, but the product page shows the preorder button. The theme may load that card after the page loads (infinite scroll or filtering), or the card may have no add to cart button of its own. Reload the page. If the card has its own add to cart button and still does not change, contact support from the Support page in EZ Preorder.
The quick add popup still shows add to cart. The selected variant may not be on preorder: for example, a Sold out rule variant that has stock. If it should be on preorder, your theme's quick add popup may not match the Quick add settings. Contact support and we will check your theme.
My home page Featured product section still shows add to cart. Check that Featured product is on and saved, that the product is on preorder for the selected variant, and that the section is not on a product or collection page template. If it still does not change, open Theme Settings → Theme Selector, select your theme's preset again, click Save, and reload. If that does not help, contact support.
The preorder button on a product card shows "Pre order" instead of my text. The shopper's language has no Pre-order Button Text. Add text for that language in Configuration → Pre-order Button Text.
I downgraded and the buttons are still showing. The Collection page and Featured product switches lock when you move to Core or Free, but a switch that was on stays on in your store. Contact support to turn it off, or turn the switches off before you downgrade.
Frequently asked questions
Do I need the Growth plan for the preorder button on collection pages?
Yes. The Collection page and Featured product switches need the Growth, Professional or Scale plan. The preorder button on product pages works on every plan.
Does the Collection page switch also turn on preorder badges?
No. Preorder badges have their own switch, Badge Settings, on the same tab. You can use the button, the badges, or both.
Can shoppers pay a deposit from a collection page?
Yes, in the quick add popup and in Featured product sections, if partial payments are on. The add to cart button on a product card does not show deposit options, so the item is added without one.
Does Direct to Checkout work on collection pages?
No. Direct to Checkout applies to the product page and your theme's Featured product section. Product card buttons and quick add popups add the item to the cart.
Are items added from a collection page tagged as preorders?
Yes. Product card buttons, quick add popups and Featured product sections all add the same preorder line item property the product page adds.
Why does the preorder button disappear when I filter my collection?
The filter reloaded the product grid without reloading the page, so the new cards keep the theme's button. Reloading the page brings the preorder button back.
Can I show the preorder button on a Featured product section on a product page?
No. The Featured product switch works on pages other than product and collection pages. To feature a preorder product on any page, use the Preorder Featured Product block.
Related articles
- How to show preorder badges on collection pages: label preorder products on product cards.
- How to add a featured preorder section to your store: EZ Preorder's own block for featuring one preorder product.
- How to change and translate the preorder button text: the text these buttons use.
- How to enable the direct to checkout preorder button: send shoppers straight to checkout.
- Advanced theme settings: selectors for product cards, quick add and featured sections.
- The preorder button is not showing: fixes for a missing preorder button.