How to add a featured preorder section to your store
EZ Preorder & Back In Stock includes a theme block called Preorder Featured Product that features one preorder product anywhere in your store, such as your home page. It shows the product's image, title, price, a quantity field, buttons for the variants that are on preorder, your custom note, deposit options if you use partial payments, and a preorder button that adds the item to the cart. Add it from Configuration → Featured Pre-Order Section → Add section to theme, or in the theme editor under Add section → Apps. It is available on the Growth, Professional and Scale plans.
Available on: Growth, Professional and Scale plans. On the Free and Core plans, the Featured Pre-Order Section tab is greyed out with an Upgrade to Growth link, and a block already in your theme hides itself from shoppers.
Where to find it: EZ Preorder → Configuration → Featured Pre-Order Section, or Online Store → Themes → Customize → Add section → Apps → Preorder Featured Product.
Before you start
- You are on the Growth, Professional or Scale plan.
- Your theme is an Online Store 2.0 theme, which supports app blocks. Shopify's free themes, such as Dawn and Horizon, are.
- The product you want to feature is in your EZ Preorder preorder list, turned on, and has at least one variant on preorder right now. See How to manage your preorder list.
How to add the featured preorder section from EZ Preorder
- In EZ Preorder, open Configuration.
- Under Visibility, click Featured Pre-Order Section.
- Click Add section to theme. The theme editor for your published theme opens in a new tab with the Preorder Featured Product block added in a new Apps section.
- Click the block. In its settings, under Product, click Select product and pick your preorder product.
- Change the Heading and colors if you like.
- Drag the section to where you want it on the page.
- Click Save in the theme editor.
How to add the featured preorder section in the theme editor
- In Shopify admin, go to Online Store → Themes and click Customize on your theme.
- Use the page menu at the top of the theme editor to open the page you want, such as Home page, a product page or a custom page.
- Click Add section, open the Apps tab, and choose Preorder Featured Product.
- Click the block and pick the Product in its settings.
- Click Save.
You can add more than one Preorder Featured Product block, each with a different product, on the same page or on different pages.
Preorder Featured Product block settings
| Setting | What it does | Default |
|---|---|---|
| Product | The product to feature. Pick a product from your preorder list. | None |
| Heading | The title above the block. If you leave it empty, the block shows "Featured Pre-order Product". | Featured Preorder |
| Button color | Background color of the preorder button. | #000000 (black) |
| Button text color | Text color of the preorder button. | #ffffff (white) |
| Variant selected color | Fill and border color of the selected variant button. Unselected variant buttons use it as their border. | #2563eb (blue) |
| Variant selected text color | Text color of the selected variant button. | #ffffff (white) |
The preorder button text comes from Configuration → Pre-order Button Text, not from the block. See How to change and translate the preorder button text.
What shoppers see in the featured preorder section
The Preorder Featured Product block shows, from top to bottom:
- The Heading.
- The product image. It shows the selected variant's image, or the product's main image if the variant has none. When Badge Settings is on, your preorder badge sits on the image. See How to show preorder badges on collection pages.
- The product title and the selected variant's price, with the compare-at price struck through if it is higher.
- A Quantity field, from 1 to 99.
- One row of buttons for each product option, such as size or color, when more than one variant is on preorder. Only values from variants on preorder appear.
- The custom note for the selected variant, if it has one, in the shopper's language. See How to add a custom note to preorder products.
- The deposit options, if partial payments are on. See Partial payments and deposits.
- The preorder button, with your Pre-order Button Text in the shopper's language, or your English text if that language has none.
- A View full details link to the product page. The image links there too.
When the shopper clicks the preorder button, it reads "Adding...", then "Added!", and the shopper is taken to the cart page. The item carries the same preorder line item property (type: preorder) as items added from the product page.
Which variants the featured preorder section shows
The Preorder Featured Product block only offers variants that are on preorder at that moment:
- Always: the variant always shows.
- Sold out: the variant shows while its inventory is 0 or less.
- Specific inventory level: the variant shows while its inventory is above 0.
- Variants you limited to other countries do not show to shoppers in a country where they are not available. See How to set preorders for specific countries and markets.
The block also follows the product's status in your preorder list. If the product is turned off, removed, or outside its scheduled start and end dates, the block shows "No preorder variants available for this product." The same message shows when no variant is on preorder right now, for example when every variant of a Sold out rule product is back in stock. See Preorder rules and How to schedule preorder start and end dates.
Featured preorder section messages
| Message | Where | Meaning |
|---|---|---|
| "Select a product in the block settings to display preorder variants." | Theme editor only | No Product is picked yet. On your live store, a block with no product shows nothing. |
| "Featured Preorder — Loading..." (with your heading) | Store and theme editor | The block is loading the product's preorder details. |
| "No preorder variants available for this product." | Store and theme editor | The product is not on preorder right now. |
| "Unable to load preorder product." | Store and theme editor | The block could not load the product's details. Reload the page. |
Limitations
- Direct to Checkout does not apply. The block always takes the shopper to the cart page after adding the item.
- The block's own words ("Quantity", "View full details", "Adding...", "Added!" and the messages in the table) are in English and cannot be changed or translated.
- If Shopify cannot add the item, for example because the quantity is more than the stock it allows, the block still shows "Added!" and opens the cart page, and the item is not in the cart.
- The product title and price are always black and the price uses a fixed large size, so place the block on a light background.
- A fixed-amount deposit shows with a
$sign, whatever your store's currency. - With several product options, a variant button only switches the variant when that exact combination is on preorder. If it is not, the button looks selected but the variant does not change.
Featured preorder section or the theme's Featured product section
EZ Preorder can also add the preorder button to your theme's own Featured product section with the Featured product switch in Configuration → Collections & Featured Product. That keeps your theme's design but only works on pages other than product and collection pages and depends on your theme's layout. The Preorder Featured Product block works the same on every page and every Online Store 2.0 theme, and only shows variants that are on preorder. See How to show the preorder button on collection pages and featured product sections.
Troubleshooting
The block shows "No preorder variants available for this product." Open Preorders in EZ Preorder and check that the product is in your list and turned on, that its scheduled dates (if any) include today, and that its rule makes at least one variant a preorder at its current stock.
The block does not appear on my store at all. Check that a Product is picked in the block settings and that you clicked Save in the theme editor. If you are on the Free or Core plan, the block hides itself; upgrade to Growth or above.
The Add section to theme button is missing. The button only shows on the Growth, Professional and Scale plans. On other plans, add the block from the theme editor after you upgrade.
I can't find Preorder Featured Product under Apps. Your theme may not support app blocks (themes older than Online Store 2.0 do not). Check that EZ Preorder is installed, and contact support if the block still does not appear.
The price or title is hard to read. The block always shows them in black. Move the block to a section with a light background.
Frequently asked questions
Can I feature more than one preorder product?
Yes. Add one Preorder Featured Product block for each product. Each block works on its own.
Can I put the featured preorder section on a page other than the home page?
Yes. The Preorder Featured Product block works on any page you can edit in the theme editor, including product, collection and custom pages.
Does the featured preorder section show variants that are in stock?
No. It only shows variants that are on preorder right now under their preorder rule. A product with no preorder variants shows "No preorder variants available for this product."
Does the featured preorder section support partial payments?
Yes. If partial payments are on, the block shows the deposit options above the preorder button, using your payment labels.
What happens to the featured preorder section if I downgrade?
On the Free and Core plans, the block hides itself on your store. It comes back if you upgrade to Growth or above again. You do not need to add it again.
Can I change the preorder button text in the block?
The block uses your Pre-order Button Text from Configuration, in the shopper's language. Change it there and the block updates.
Related articles
- How to show the preorder button on collection pages and featured product sections: add the preorder button to your theme's own Featured product section.
- How to show preorder badges on collection pages: the badge the block shows on its image.
- How to set up a custom page that lists all your preorder products: show every preorder product on one page.
- Preorder rules: which variants count as preorders.
- Partial payments and deposits: the deposit options the block shows.
- How to add a custom note to preorder products: the note under the variant buttons.