The Preorder/Backorder Experience is typically presented on a Shopify 2.0 theme using the following Metafield structure per Product Variant. Or you can use this document to build your own frontend experience for your store.
{
"message": "Shipping 20/07/2025",
"fallbackMessage": "Ships Soon",
"disableMessagingOnDate": true,
"groupId": 1234567890,
"preorder": true,
"date": "1970-01-01T00:00:00.000Z"
}message
string
yes
Frontend User Message
fallbackMessage
string
no
Fallback message for after the date has past
disableMessagingOnDate
boolean
no
Describes the behavior on the front end if the preorder hasn't been cleared by a user, either it should display nothing, or it should display the fallback message.
groupId
string (uuid)
yes
Preorder groups are mapped to a group ID to manage large batches of preorders at once.
preorder
boolean
yes
Preorder or Backorder - if set to True this data object represents a Preorder experience
date
date
no
The DateTime that this group of preorders is set to expire, if no date is set - the product will be set to Preorder/Backorder indefinitely
Preorder/Backordering does not modify inventory controls in any way, allowing a merchant to manipulate the stock levels of particular products freely. It's recommended that the merchant sets a stock level on a preorder/backorder product equal to that of what they are going to receive - as it keeps the product active on other channels' shopping feeds as the product is in stock.
We define a Preorder as an offer to sell an item of stock that the merchant has ordered, but not yet received.
Preorders usually
Have an expected delivery date - eg 20/07/2025
Have a defined pool of stock
Will ship on some future date
May ship separately from other items purchased
We define a Backorder as an offer of sale of an item of stock that a merchant has not yet ordered, but will order if a customer purchases the product.
Backorders usually
Have an expected lead time - eg 3 weeks
Have no stock pool
Will ship on some future date
May ship separately from other items purchased
The Widget is designed to be placed above an Add to Cart component in a Shopify product form,
It will read the site for any form with the action of /cart/add which contains an input with the name ID .
It will listen to changes in that ID and find matching configurations from the Variant Metafields of that product, if it finds a matching configuration it will show the message based on the logic outlined above.
It will search for the button text for "Add to cart", and replace it with either Preorder or Backorder.
The notice can be styled with regular CSS through the widgets config.
The widget will add the message as a property to that line item so that both customer and merchant have a record of the message that was shown to the customer in their invoice.
If you're having problems with the widget and your theme - contact Support and we will be happy to assist you!
Last updated