Use preorder metafields and templates

This guide describes how to use Shapes theme's Preorder product feature.

Shapes theme provides a simple Preorder product feature to allow your store to accept customer orders for products that are not currently ready to ship.

When you configure a product as a preorder product, the Add to cart button's label text changes to "Pre-order" on the product's page.

The previous image shows two examples of a store's Plain t-shirt Product page. In the left-side example, the Add to cart button label text is set to default. In the right-side example, the Preorder product feature is enabled, and the button's label text is changed to Pre-order.

For a product that has the Quick buy feature enabled, when you configure the product as a preorder product, sections displaying the preorder product that support the Quick buy feature show a Pre-order button inside the sections' product tiles.

The previous image shows a store's Plain t-shirt product inside a Featured product variants section. The section supports the Quick buy feature and the product is configured as a preorder product. In the left-side example, the section's Enable quick buy option is turned off and a "Pre-order" button is not displayed inside the section's product tile. In the right-side example, the section's Enable quick buy option is turned on and the section's product tile displays a Pre-order button. Refer to Show quick buy on product tiles.

Note

This feature does not implement a full preorder workflow because Shopify does not have a native preorder feature.

Before you start, note the following considerations:

• The Preorder product feature only changes the Add to cart button label text and product tiles for relevant sections with the Quick buy feature enabled. So, for preorder products, everything about your store's Checkout, Notifications, and order management remains the same as a standard product order.

• A preorder product must be purchasable and available for sale. For example, ensure that the preorder product is not sold out. Otherwise, the button text displays "Sold out" instead of "Pre-order".

• The Preorder product feature does not work at a variant level, it only works at a product level. If you need variant-level control or deposit management, consider using a suitable preorder app.

Configure a product as a preorder product

To configure a product as a preorder product, use one of the following approaches:

1. Define a custom metafield for the Preorder product feature. We recommend using the metafield approach for greater flexibility and easier implementation.

2. Alternatively, assign the Preorder product template to a product. This approach requires you to assign the Preorder product template to specific products. Shapes includes a built-in Preorder product template that you can assign to relevant products. Alternatively, you can Create a custom Preorder product template.

After you set a product to use the preorder custom metafield or assign the Preorder product template to a product:

• The theme updates the Add to cart button accordingly, and the "Pre-order" button label text displays on the product's page.
• If a preorder product has the Quick buy feature enabled, sections displaying the preorder product that support the Quick buy feature show a "Pre-order" button. Refer to Show quick buy on product tiles.

Define a custom metafield for the Preorder product feature

Defining a custom metafield for the Preorder product feature is our recommended approach.

Shapes theme allows you to mark a product as a preorder product using a "True or false" (boolean) metafield. You set the metafield to display the preorder button on specific products.

1. Create a boolean product metafield:

   • In your Shopify admin, go to Settings > Metafields and metaobjects > Products.

   • On the Product metafield definitions page, select Add definition, and then add the following information:

     • In the Name field, enter a name for the metafield. For example, enter preorder.
     • Below the Name field, note the auto-filled custom.preorder namespace and key. You will reuse these later in the Theme editor. Alternatively, to provide a custom namespace and key, select the auto-filled custom.preorder element, and then enter your required namespace and key into the Namespace and key field.
     • Set the Type option to One value, then locate the Other menu area in the Select type list, and then select True or false. This creates a boolean metafield that you can toggle on or off for each preorder product.
     • Optional: Configure the Description, Category assignments, and Options settings. For information about configuring these settings, refer to Shopify help: Metafields.

   • Confirm that your completed metafield definition is similar to the example in the following image.

     

   • Select Save to save your definition.

2. Enable the preorder metafield in the Theme editor's Theme settings menu:

   • Open your theme in the Theme editor, then select Theme settings > Pre-order.

   • In the Pre-order settings menu, in the Metafield namespace and key field, enter the namespace and key for the preorder metafield that you created previously.

     For example, enter custom.preorder. Separate the namespace and key with a period (.) character.

     

   • Select Save to save your updated theme settings.

3. Add the preorder metafield to a specific product:

   • In your Shopify admin, select Products, and then choose a product from the Products list that you want to offer for preorder.

   • In the Product editor, locate the Product metafields area, and then select the preorder metafield you created previously.

   • Set the metafield's value to True.

     Note

     When the preorder metafield value is True, the product's Add to cart button label text displays "Pre-order". When the metafield is False or empty, the button label displays "Add to cart".

     

   • Select Save to save the changes you made to the product.

   • Repeat the previous steps for other products you want to set as preorder products.

   • Preview the products you configured to confirm that the Add to cart button text changed to "Pre-order".

   • Preview sections displaying the preorder products that have the Quick buy feature enabled to confirm that the sections' product tiles display a "Pre-order" button.

Assign the Preorder product template to a product

Shapes includes a Preorder product template that you can assign to products you want to offer on preorder. Refer to Show quick buy on product tiles.

Note

Shopify only lists alternate templates, such as the Preorder product template, for the currently published theme. Ensure Shapes is your currently published theme when assigning the Preorder product template to your store's products.

Alternatively, instead of using the built-in Preorder product template, you can Create a custom Preorder product template.

To assign the built-in Preorder product template to a product:

1. In your Shopify admin, select Products, and then choose a product you want to make available for preorder.

2. In the Product editor, use the Theme template dropdown to select preorder to assign the Preorder product template to the current product.

   Note

   If you cannot find your Preorder product template in the dropdown, make sure the theme you are editing is published.

   

3. Select Save to save the changes you made to the product page.

4. Repeat the previous steps for other products you want to set as preorder products.

5. Preview the products you configured to confirm that the Add to cart button text on the product's page has changed to "Pre-order".

6. Preview sections displaying the preorder products that have the Quick buy feature enabled to confirm that the sections' product tiles display a "Pre-order" button.

Note

Initially, the Preorder product template has the same structure as the Default product template. Customize the layout of the Preorder product template according to your requirements.

Optional: Create a custom Preorder product template

Shopify lets you create multiple versions of the same template type in a theme for different use cases. For example, you might have a specific template for your Default product page and a different template for Preorder product pages.

To create a custom Preorder product template:

1. Open your theme in the Theme editor.

2. In the Theme editor, use the dropdown at the top of the page to select Products > Create template.

3. In the Name field, enter a name for your custom Preorder product template that includes the word "preorder". For example, enter my-preorder-template-1.

   Note

   Any product template with a filename that contains the word "preorder" is treated by the theme as a Preorder product template.

4. Use the Based on dropdown to select the existing template to use as a base for your custom Preorder product template. For example, select Default product.

   

5. Select Create template.

6. To use your template, follow the previous steps to Assign the Preorder product template to a product.

Note

If you create several Preorder product templates, you can assign each template to a different product. Only the presence of the word "preorder" in the template's filename is relevant to preorder products.

Remember that alternate templates only appear if the theme is published. If you do not see your new template listed in the dropdown, publish the theme first.

Shopify allows up to 1,000 JSON templates across all template types. If you plan to create many Preorder product templates, keep this limit in mind.

Optional: Customize the preorder button text

The text that appears on the preorder button comes from the theme's translation strings. You can change the text, for example from "Pre-order" to "Preorder now!".

To change the text:

1. In your Shopify admin, select Sales channels > Online store.

2. In the Themes area, locate the theme you want to customize, select ... (the ellipsis icon) to open the Actions menu, and then select Edit default theme content.

3. Search for the products.product.preorder translation key and modify the key's value as required. For example, change Pre-order to Preorder now!.

4. Select Save to save your changes.

5. Refresh your storefront and visit a product page to confirm that the label text updated correctly.