Add Pre-Order Message that Only Displays on Pre-Order Template

by ONELIVE Webmaster March 6, 2017

When to Use

This code was created for the OLM Sandbag stores to display the pre-order ship by date. The feature can be turned on and off by the theme settings. https://sandbag-test-store.myshopify.com/products/pre-order-message

How The Code Works

The code checks if the product template is set to "pre-order" and the theme settings pre-order message is enabled. If both of these statements are true then diplay the pre-order text and date from the settings section.

Create pre-order-message.liquid snippet

Create a snippet named pre-order-message.liquid and add the following code:

{% if template.suffix == 'preorder' %}
    {% if settings.pre-order-message-enable %}
        <em class="pre-order">
          <strong>Your pre-order will ship by {{ settings.pre-order-ship-by-date }} </strong>. Please note that <strong>ALL</strong> items included in your order will ship at the same time.  If you wish to have a partial order shipped, you will need to make two separate orders.
        </em>
    {% endif %}
{% endif %}

product-page.liquid

Open product-page.liquid and locate the

div and place the following code inside. It should be before {{ product.title }} code.

{% include 'pre-order-message' %}

settings_schema.json

Open settings_schema.json and add the following code to the appropriate location.

  {
    "name": "Pre Orders",
    "icon": "promotions",
    "settings": [
      {
        "type":      "checkbox",
        "id":        "pre-order-message-enable",
        "label":     "Enable Pre Order Message?",
        "default":   true
      },      
      {
        "type": "text",
        "id": "pre-order-ship-by-date",
        "label": "Pre Order Ship By Date",
        "default": "03/24/2017"
      }
    ]
  },