All themes - Product page - Set up a product for pre-order

The Pre-order template is crafted by Safe As Milk and is included in the theme. It's designed to help you showcase products that customers can purchase in advance.

The template adds:

• Pre-order friendly blocks by default - such as countdown timer and a callout block
• Changes the 'Add to cart' button text to 'Pre-order’,
• Automatically displays a 'Pre-order' label in product grids and on the product page

This guide covers how to apply the template, customise it for multiple products, and understand the automatic features it enables.

Limitations of this template

• Shopify does not have a native pre-order feature in the admin. The purchase process stays the same as any standard product. This includes checkout and post-purchase emails.
• You must ensure the product is in stock - the template won’t work if it’s sold out.
• The template is applied to the entire product, you won’t be able to show a pre-order button for just one variant.

Assign the Pre-order template to a product

To apply the Pre-order template to a product:

1. Go to Products in your Shopify admin.
2. Click on the product you want to mark as pre-order.
3. Scroll to the Theme template section in the right-hand column.
4. From the dropdown, select pre-order.
5. Save the product.

The product will now use the unique layout assigned to the Pre-order template.

You can now head to the theme editor and edit that particular product's page. Your changes will only apply to products assigned to that template, standard products will be unaffected.

Create additional Pre-order templates

If you plan to use the Pre-order layout on more than one product and want them to look different (for example, with different content blocks or messaging), create a custom template for each one.

1. Go to Online Store > Themes and click Customize.
2. In the theme editor, use the top dropdown to select Products → Create template.
3. Name your new template (e.g. pre-order-variant ), and base it on the pre-order  template in the dropdown. Make sure the name includes the words 'pre-order' for the automatic label and button text changes to appear.
4. Click Create template.
5. Edit the layout as needed.
6. Assign the new template to your second product using the steps above.

Display the 'Pre-order' label automatically

When a product uses the Pre-order template, a 'Pre-order' label will appear automatically in collection and product grids. This label will also appear in the labels block on the product page. This helps customers instantly recognise which items are not shipping immediately. You can disable this label if you wish.

You can edit the color of these labels in Online Store > Themes > Theme settings > Product labels

This label cannot be removed individually, and it won’t appear on products using other templates.

Edit your button text and visibility

By default the theme will display dynamic 'Buy now' buttons below the 'Pre-order' button on the product page. You can turn these dynamic buttons off in 'Buy buttons' block on the product page. You can also disable these buttons in the Quick Shop drawers and modals, although this will disable these buttons on all of your products in the Quick Shop.

If you wish to change the text that appears in your buttons and labels (i.e 'Coming Soon!') you can do this by editing the theme default content

1. Go to Online Store > Themes and click the button with the three ellipses (...) next to the theme you wish to edit
2. Once the Theme content editor is open, search for 'Pre-order' - see image below
3. Change the text for the button and/or label
4. Save your changes and check your work