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 set to 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 set to 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 doesn’t 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 will display "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. After you define and apply a custom metafield for your store's preorder products, the theme reads the metafield and updates the Add to cart button accordingly. When you set a product to use the preorder custom metafield, the "Pre-order" button label text displays on the product's Product 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. We recommend using the metafield approach for greater flexibility and easier implementation.

   OR

2. Assign the Preorder product template to a product. This approach requires you to assign the Preorder product template to specific products. After you assign the Preorder product template to a product, the theme updates the Add to cart button accordingly. When the Preorder product template is assigned to a product, the "Pre-order" button label text displays on the product's Product 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. Shapes includes a built-in Preorder product template that you can assign to relevant products. Alternatively, you can Create a custom Preorder product template.

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. After you define and apply a custom metafield for a preorder product, the Add to cart button's label text changes to "Pre-order" 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.

1. Create a boolean product metafield:

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

   • From the Metafield definitions list, select Products, and then choose Add definition to create a new metafield.

   • In the Name field, enter a name for your metafield. For example, enter preorder.

   • In the Namespace and key field, enter a unique identifier like custom.preorder. Note your chosen namespace and key. You will add these later in Theme settings.

     Note

     Configuring the Description, Category assignments and Options settings is optional. For information about configuring these settings, refer to Shopify help: Metafields

   • Choose Select type, locate the Other menu area, and then select True or false to create a boolean metafield that you can toggle on or off for each preorder product.

     

   • Select Save to save your definition.

2. Enable the preorder metafield in Theme settings, refer to Pre-order:

   • In your store’s Shopify admin, go to Sales channels > Online store > Themes.

   • Locate the theme you want to customize, and then choose Customize to open Theme editor.

   • In Theme editor’s sidebar, select Theme settings.

   • From the Theme settings menu, select 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 "." character (full-stop/ period).

     

   • 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 Metafields area.

   • Locate and 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 will display "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 Product page(s) for the product(s) you configured to confirm that the Add to cart button text changed to "Pre-order".

     

   • Preview sections displaying the preorder product 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 relevant products. After you assign a Preorder product template to a product, the Add to cart button's label text changes to "Pre-order" 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.

Note

Shopify only lists alternate templates, like the Preorder product template, for the currently published theme. Please ensure Shapes is your currently published theme when you are 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, complete the following steps:

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 can’t 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 Product page(s) for the product(s) 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 product(s) 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. In your store’s Shopify admin, go to Sales channels > Online store > Themes.

2. Locate the theme you want to customize, and then choose Customize to open Theme editor.

3. At the top of Theme editor, use the Page selector dropdown to choose Products > Create template.

   

4. 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" will be treated by the theme as a Preorder product template. When a product uses the Preorder product template, the Add to cart button text changes to "Pre-order" on Product pages assigned to the Preorder product template. 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.

5. Use the Based on dropdown to select the existing template to use as a base for your custom Preorder product template.

   

6. Select Create template.

7. 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 1000 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. Complete the following steps to change the wording. For example, to change "Pre-order" to "Preorder now!":

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

2. Locate the theme you want to customize, choose ... (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.