Tutorial: Add a coming soon product page template

In this tutorial we will create a new product template which will allow you to showcase a product that is not available for sale yet. The Add to Cart button will be replaced by a button with a custom message. Items will not be added to the cart. Variant options will exist and you can choose to show the price including variants or completely remove the price from the top and the button. 

NEW:

Added a message area to help customers contact you for instructions on how to purchase.

Plus a new contact us form option:

Example with coming soon button, message and form:

This tutorial requires Pipeline 2 and higher. Check links below for update information and to verify your version number.

1

Create a new Section file

This tutorial works best with the live published theme. The reason is products in the product admin only allow you to choose templates form the live theme. Therefore, if you create new templates in a draft theme, they won't be available to use or test. You can get around that by also creating templates in the live theme as a workaround. 

Open your Code Editor. 

Quick link if the theme is live/published:
Open Code Editor

(NEW STEP)

Check if you have a newer version of Pipeline with Shopify's Product Media support (new product media format types):

Verify if you have media.liquid in the Snippets folder:

In the Sections folder, choose Add a new section:

Call the new section:

product-soon

Example:

Choose the Create section button to continue.

Erase all the default code that's generated on the right side:

Replace with all the code from one of these code options:

OPTION A: - Pipeline 5.0 and higher with Shopify's new product media support (see above if unsure):

Click to view code

OPTION B: - Pipeline 4.7 or earlier versions with Shopify's new product media support (see above if unsure):

Click to view code

OPTION C: Older versions of Pipeline (see above if unsure):

Click to view code

Save the file.

2

Create a new product template

In the Templates folder, choose Create a new template

Choose product in the first drop-down (1) and call it soon (2):

Press the Create template button to continue

Change the default code from:

to

{% section "product-soon" %}

Save the file.

3

Assign your product the new template

We're done with the code editor. You can now open your product that will have the new coming soon template:

https://shopify.com/admin/products

Find your product and change the template drop-down to product.soon:

Note: This option will only show if the theme is published. If you're working out of a draft theme, recreate the above steps in your live theme. 

Closer look at the drop-down:

Save your product page.

4

Product page settings

Open the Theme Editor:

Or:

Quick link if the theme is live/published:
Open Code Editor

In the Theme Editor:

Navigate to a product page which has the new product.soon template assigned:

You'll now see the new "Product soon" section on the left. Click that for the new options:

You can show/hide prices:

Example if you turn off the prices:

Additional features:

(1) Enable/disable the Add to Cart button. If enabled, you can customize the button text.

(2) Show a custom message.

(3) Add a contact form which will send you an email message with reference to this product.

You will need to Save your settings in the Theme Editor to view some of the changes. 

Tabs

If you have Local tabs, you'll need to add the Description H6 tab option back in. Since this is a separate template, it won't inherit the settings from your regular Product page settings:

Needed for Local Tabs:

Once this block has been added, Local tabs will be activated. The <h6> tab titles will be pulled-in from the product description. 

Global tabs will also need to be recreated - That content will only appear on other products using the product.soon template. 

Note: If you have an older version that doesn't support tabs, these options won't function. 

Final notes

When your product is available for purchase, simply change the product template from product.soon back to the original product in your product setup.