The Pre-order product template in Be Yours allows you to display a product page with a Pre-order purchase button instead of the regular Add to cart button.
This is useful when you want to sell products before they are physically available, such as:
- Upcoming product launches
- Restock items
- Limited-edition releases
- Made-to-order products
- Backorder products
- Seasonal items arriving later
How to Use the Pre-order Product Template
STEPS:
1. Understanding How the Pre-order Template Works
In Be Yours, the Pre-order feature works through a product template.
Template file:
templates/product.pre-order.json
When a product uses this template, the theme detects the product template suffix:
pre-order
Then the theme changes the purchase button text from:
Add to cart
to:
Pre-order
This behavior applies to product purchase buttons that check the product template suffix.
Important:
- The product must be assigned to the pre-order template.
- The selected variant must still be available for purchase.
- If the selected variant is not available, the button will show Sold out instead of Pre-order.
- The Pre-order template does not automatically create a pre-order policy, payment rule, delivery date, or inventory rule.
- Inventory and checkout behavior are still controlled by Shopify.
2. Assign the Pre-order Template to a Product
To use the Pre-order template, assign it to the product that should be sold as a pre-order item.
- From your Shopify admin, go to Products.
- Open the product you want to set as a pre-order product.
- Find the Theme template setting.
- Select the pre-order product template.
Example:
pre-order
or:
product.pre-order
depending on how Shopify displays the template name in your admin.
- Click Save.
Recommended screenshot to add:
Shopify admin > Products > Product page > Theme template > pre-order
After saving, open the product page on the storefront and check the purchase button.
3. Make Sure the Product Can Be Purchased
The Pre-order template only changes the purchase button text when the product variant is available.
If the product has no inventory and Shopify does not allow customers to purchase it, the button will still display Sold out.
To allow pre-order purchases for a variant with no stock:
- From Shopify admin, go to Products.
- Open the product.
- Open the variant if the product has variants.
- Check the inventory settings.
- Enable the option that allows the variant to continue selling when out of stock.
- Click Save.
Important:
If this option is not enabled and the inventory quantity is 0, the theme cannot sell the product as a pre-order item because Shopify marks the variant as unavailable.
Recommended screenshot to add:
Shopify admin > Product variant > Inventory > Continue selling when out of stock
4. Check the Pre-order Button on the Storefront
After assigning the template and checking inventory settings, test the product page.
- Open the product page on the storefront.
- Select an available variant.
- Confirm that the purchase button displays:
Pre-order
- Add the product to cart.
- Check the cart page or cart drawer.
- Continue to checkout if needed.
Expected behavior:
| Product status | Button text |
|---|---|
| Product uses regular product template and variant is available | Add to cart |
| Product uses pre-order template and variant is available | Pre-order |
| Variant is unavailable or sold out | Sold out |
| Variant combination does not exist | Unavailable |
5. Edit the Pre-order Button Text
The Pre-order button text comes from the theme language content.
Default translation key:
products.product.pre_order
To edit the text:
- From Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme.
- Click Actions or the three-dot menu.
- Select Edit default theme content.
- Search for:
Pre-order
- Update the text.
- Click Save.
Example custom button text:
Pre-order now
Reserve yours
Coming soon - Pre-order
Important:
This text may also be used in other areas where the theme detects a pre-order product, such as product cards or cart recommendation buttons.
6. What Is Included in the Default Pre-order Template?
The default Pre-order product template in Be Yours includes a full product page layout.
Default sections include:
| Section | Purpose |
|---|---|
| Empty space | Adds spacing above the product content. |
| Main product | Displays product media, title, price, variants, inventory status, buy buttons, tabs, share, and sticky cart. |
| Product details | Displays product description and collapsible product information. |
| Product recommendations | Displays recommended products. |
| Recently viewed products | Displays products recently viewed by the customer. |
| Tab collage | Displays additional image/content blocks. |
| Testimonials | Displays customer testimonials. |
You can customize these sections in the Theme Editor.
7. Main Product Blocks in the Pre-order Template
The Main product section in the Pre-order template includes the main product information and purchase controls.
Default blocks include:
| Block | Purpose |
|---|---|
| Text / Subtitle | Displays custom subtitle text. |
| Title | Displays the product title. |
| Product rating | Displays product rating when rating data is available. |
| Countdown | Displays a countdown message. |
| Price | Displays product price. |
| Variant picker | Displays product options and variants. |
| Inventory status | Displays stock or inventory messages. |
| Buy buttons | Displays the Pre-order button and optional dynamic checkout button. |
| Collapsible tabs | Displays shipping, returns, or pre-order information. |
| Related info buttons | Displays related information buttons. |
| Share | Displays sharing option. |
| Sticky cart | Displays sticky purchase controls. |
Recommended setup for pre-order products:
| Block | Recommendation |
|---|---|
| Countdown | Use this block to show the launch date or pre-order deadline. |
| Inventory status | Use carefully. If the product has no stock but can be purchased, avoid confusing inventory messages. |
| Buy buttons | Keep enabled so customers can place the pre-order. |
| Collapsible tabs | Add pre-order shipping date, payment terms, cancellation policy, and estimated delivery information. |
| Sticky cart | Enable if you want the Pre-order button to remain accessible while scrolling. |
8. Add Pre-order Information to the Product Page
A pre-order product should clearly explain when and how the order will be fulfilled.
Recommended information to add:
| Information | Recommended location |
|---|---|
| Estimated shipping date | Collapsible tab or product description |
| Payment timing | Collapsible tab |
| Return/cancellation policy | Collapsible tab |
| Production or restock timeline | Product description or rich text block |
| Limited quantity notice | Inventory status, text block, or countdown |
| Customer support note | Collapsible tab |
Example text:
This item is available for pre-order. Orders placed today are expected to ship in late August. If your order includes in-stock items and pre-order items, they may ship together when the pre-order item becomes available.
You can add this information in:
- Product description
- Product details section
- Collapsible tabs
- Custom Liquid block
- Text block
- Product metafields connected through dynamic sources
9. Using Pre-order Products on Product Cards
When a product uses the pre-order template, Be Yours can also display Pre-order text in some product card purchase buttons.
This can apply to areas such as:
- Collection product cards
- Featured collection sections
- Product recommendation sections
- Recently viewed products
- Cart recommendation products
Important behavior:
| Product card situation | Expected behavior |
|---|---|
| Single-variant pre-order product | Quick buy button can show Pre-order. |
| Multi-variant pre-order product | Product card may show Choose options or open quick view. |
| Sold-out pre-order product | Product card may show sold-out behavior. |
| Quick buy disabled | Product card will not show the quick buy button. |
To make pre-order behavior clearer on product cards, you can also use custom product labels.
Example label:
Pre-order
Recommended related setup:
- Use the Custom product labels feature.
- Add a product label such as
Pre-order. - Choose a label color that is easy to read.
10. Dynamic Checkout Buttons and Pre-order Products
The Pre-order template can include dynamic checkout buttons if the Buy buttons block has dynamic checkout enabled.
Important:
Dynamic checkout buttons are handled by Shopify and accelerated payment providers. The theme changes the main add-to-cart button text, but dynamic checkout behavior is controlled by Shopify.
For pre-order products, we recommend reviewing whether dynamic checkout should remain enabled.
Recommended setup:
| Goal | Recommendation |
|---|---|
| Customers should read pre-order terms before checkout | Disable dynamic checkout and use the cart flow. |
| Store wants faster checkout | Keep dynamic checkout enabled, but make pre-order information clear before the button. |
| Product has important shipping delay terms | Add a clear pre-order note near the button. |
To adjust this:
- Open the product template in the Theme Editor.
- Select the Buy buttons block.
- Enable or disable Show dynamic checkout buttons.
- Click Save.
11. Recommended Setup for a Pre-order Product
For most stores, we recommend this setup:
| Area | Recommendation |
|---|---|
| Product template | Assign the product to the pre-order template. |
| Inventory | Enable continue selling when out of stock if the item has no available inventory. |
| Button text | Keep the text clear, such as Pre-order or Pre-order now. |
| Product description | Explain that this is a pre-order item. |
| Collapsible tabs | Add estimated shipping date, payment terms, and policy information. |
| Countdown block | Use for launch date, order deadline, or early-bird offer. |
| Product labels | Add a Pre-order label on product cards. |
| Dynamic checkout | Disable if customers must read cart or pre-order notes before checkout. |
| Cart message | Add extra cart or policy information if needed. |
Recommended pre-order page structure:
Product title
Product rating
Countdown or launch message
Price
Variant picker
Pre-order note
Pre-order button
Shipping / returns / pre-order policy tabs
Product details
Recommendations
Testimonials
12. Notes and Limitations
Please note the following behavior:
- The Pre-order template changes the button text based on the product template suffix.
- The template suffix must be
pre-order. - The button text comes from the translation key
products.product.pre_order. - The Pre-order template does not automatically make sold-out variants purchasable.
- Shopify inventory settings still decide whether a variant can be added to cart.
- If the selected variant is unavailable, the button will show Sold out or Unavailable.
- If the product has variants, each variant can have its own inventory and availability status.
- Pre-order terms, fulfillment timing, payment policy, and cancellation policy should be added by the merchant.
- The theme does not automatically split orders that contain both in-stock and pre-order items.
- Shipping and fulfillment behavior should be managed in Shopify admin or through the merchant's fulfillment workflow.
- The Pre-order template is still a product template, so it can be customized in the Theme Editor like other product templates.
13. Limitations of Using the Pre-order Template
The Pre-order template is a theme-level solution. It is useful when you want to change the product page layout and display a Pre-order button, but it does not replace a full pre-order or back-in-stock app.
Please note the following limitations:
| Limitation | Explanation |
|---|---|
| No automatic back-in-stock notification | The theme cannot automatically notify customers when a product or variant is back in stock. If you need this feature, you should use a back-in-stock app. |
| No customer waiting list | The template does not collect customer emails for restock alerts or pre-order waiting lists by default. |
| No automatic pre-order email flow | The theme does not automatically send pre-order confirmation, restock, delay, or shipping update emails. These should be handled by Shopify notifications, email marketing tools, or third-party apps. |
| No automatic stock monitoring | The theme cannot monitor inventory changes and trigger notifications when inventory becomes available. |
| No automatic delivery date logic | The theme does not calculate or display dynamic estimated shipping dates automatically. Merchants need to add this information manually or use an app. |
| No automatic order splitting | If an order contains both in-stock and pre-order items, the theme does not split the order automatically. Fulfillment behavior should be managed in Shopify admin or through an app. |
| No advanced pre-order rules | The theme does not support advanced rules such as deposits, partial payments, pre-order limits, scheduled release dates, or automatic pre-order closing. |
| No app-level notification system | Features like “Notify me when available”, “Back in stock alert”, SMS restock alert, or waitlist management require an app. |
Troubleshooting
If the Pre-order template does not work as expected, please check the following:
- Make sure the product is assigned to the pre-order product template.
- Make sure you are previewing the correct theme.
- Make sure you are checking the correct product.
- Make sure the selected variant is available.
- If the button shows Sold out, check the variant inventory settings.
- If the item should be purchasable with
0stock, make sure Shopify allows the variant to continue selling when out of stock. - If the button still says Add to cart, make sure the product template is saved as the pre-order template.
- If the text should be different, update the translation text in Edit default theme content.
- If product cards do not show Pre-order, check whether quick buy is enabled and whether the product has one or multiple variants.
- If dynamic checkout skips important pre-order notes, consider disabling dynamic checkout for that product template.
- If you need automatic back-in-stock notifications, customer waitlists, or restock email alerts, use a dedicated back-in-stock or pre-order app.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
Available sections in Be Yours theme
Inventory Status Block Be Your Theme