Preorder Component – User Guide


What is the Preorder Component?

The Preorder Component lets you display a “Preorder” button and an estimated delivery date for products that aren’t yet available for immediate purchase. This feature allows you to keep selling upcoming products while keeping customers informed about when their order will ship.

How It Works

  • When a product or variant is configured for preorder, the component automatically replaces the standard “Add to Cart” button with a “Preorder” button.
  • It also shows a message with either a specific delivery date or an availability note.
  • If the product isn’t set for preorder, the regular “Add to Cart” or “Sold Out” button appears.

Important: For the Preorder button to appear, the product must either be in stock or set to "Continue selling when out of stock" in Shopify.

You can control preorder status and date in two ways:

  • Per Variant: Using variant metafields (recommended if preorder info varies by variant).
  • Per Product: Using product metafields or tags (for shared preorder info across all variants).

How to Configure Preorder Settings

All settings are managed through your Shopify theme settings and product or variant metafields/tags.

✅ Using Metafields:

To set up preorder via metafields:

  1. Go to Shopify Admin > Settings > Custom data.

  2. Choose Product or Variant depending on where you want to store preorder data.

    Click Add Metafield:

    • Name: Preorder
    • Namespace & key: custom.preorder
    • Type: True/False
    • Save.

To show a delivery date:

  1. Add another metafield:
    • Name: Preorder Date
    • Namespace & key: custom.preorder_date
    • Type: Date

How to Set a Product or Variant as Preorder

Once you've created the necessary metafields, follow these steps to mark a product or variant as available for preorder:

✅ If you're using product metafields:

  1. In your Shopify Admin, go to the product you want to update.
  2. Scroll down to the Metafields section at the bottom of the product edit page.
  3. Fill in the Preorder metafield with “True”.
  4. (Optional) Set a Preorder Date if you want to show a delivery or shipping date.


✅ If you're using variant metafields:

  1. Open the product in your Shopify Admin.
  2. Click on the specific variant you want to mark as preorder.
  3. Scroll to the bottom to find the Variant Metafields section.
  4. Set the Preorder metafield to “True”.
  5. (Optional) Enter a Preorder Date if applicable.

📌 Tip: Only products or variants with Preorder = True will show the preorder button. If Preorder = False or left empty, the normal purchase button will be shown instead.


How can i set the preorder as a tag?


✅ Using Tags:

If using tags instead of metafields:

  1. In Theme Settings > Preorder Section, choose to use Tags.

    Specify:

    • Preorder Tag: Tag used to enable preorder (e.g., preorder )
    • Preorder Date Tag: Tag used to specify the date (e.g., Estimated delivery date: [date] if tag Estimated delivery date: 29.09.2025 )
  2. Add these tags to the product in Shopify.

Tip: Tag-based setup is simpler but less flexible than metafields.



2. Preorder Date Settings

  • Static Date (Theme Setting): A default date shown if no specific date is set in metafields or tags.
  • Metafields or Tags: Use to show custom dates per product or variant.
  • The selected date will be shown in the preorder message.

3. Preorder Cart Attribute

  • This is the custom property added to the cart when a product is preordered. It helps you track preorder items in orders. If you want it to be hidden for the users you can add the key with _ prefix : ex: _preorder: [date]

4. Preorder Date Text

  • This is the message shown to customers. You can use [date] as a placeholder, and it will be replaced with the actual preorder date.

5. Preorder Date Format

  • Set the format used to display the preorder date (e.g., June 1, 2024 or 01/06/2024 ).

    Note: This only applies to dates set using metafields or tags. Static theme dates will not use this format setting.



How Do These Settings Update the Preorder Component?

  • When a customer selects a product or variant, the component checks if it’s set for preorder (using metafields or tags, depending on your settings).
  • If it is, the component:
    • Shows the preorder message with the correct date.
    • Hides the normal “Buy Now” button.
    • Adds a hidden property to the cart so you know it’s a preorder.
  • If the product/variant is not set for preorder, the normal purchase flow is shown.


What Does the Customer See?

  • Preorder Available: “Preorder” button and a message like “Ships on June 1, 2024.”
  • Not Available: “Add to Cart” or “Sold Out” button, with no preorder message.


Where Do I Set This Up?

  • Theme Settings: For global settings like static preorder date, cart attribute, and date format.
  • Product/Variant Metafields: For per-product or per-variant preorder status and date.
  • Product Tags: If you use tags for preorder control.


Summary

  • The Preorder component is automatic: set your product/variant metafields or tags, and the theme does the rest.
  • Customers always see the right button and message, based on your settings.
  • You can customize the preorder message and date format in the theme settings.


If you want to change how preorder works, just update your theme settings or product metafields/tags—no code needed.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.