Add Pre-order button to your Shopify store

Let your customers pre-order products, that are out of stock in your Shopify store.

In this Shopify tutorial you will learn how you can automatically show pre-order button, when “Continue selling when out of stock ” option is checked under product variant in your Shopify admin.

To accomplish this we will update below files:
– product-template.liquid
– cart-template.liquid
– *(your store language).json – in our case en.default.json
– theme.js
– theme.liquid
– theme.scss.liquid

From your Shopify admin go to Themes and under Actions select “Edit code

Under Sections open product-template.liquid file find div with class “product-form__controls-group” and replace it with below code.

<div class="product-form__controls-group product-form__controls-group--submit">
              <div class="product-form__item product-form__item--submit
                {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
              >
                <button type="submit" name="add"
                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
                  {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
                  data-add-to-cart>
                
				
				  <span id="variant-pre-order" data-add-to-cart-text>
						{% unless current_variant.available %}
						  {{ 'products.product.sold_out' | t }}
						{% else %}
							{% if current_variant.inventory_quantity > 0 %}
								{{ 'products.product.add_to_cart' | t }}
							{% else %}
								{{ 'products.product.pre_order' | t }}
							{% endif %}
						{% endunless %}
					</span> 
					
					
					
                  <span class="hide" data-loader>
                    {% include 'icon-spinner' %}
                  </span>
                </button>
                
				
                
                
               {% if section.settings.enable_payment_button %}
                  <div id="variant-inventory-wrap">
					<div id="variant-inventory">	 
					{% if current_variant.inventory_quantity <= 0 and current_variant.inventory_policy == "continue" %}
					  <span class="pre-order-comment" pre-order-comment>
					  {{ 'products.product.pre_order_comment' | t }}
					  </span>
					  <span class="pre-order-delivery-time" pre-order-delivery-time>
					  {{ 'products.product.pre_order_delivery_time' | t }}
					  </span>
					  
					{% endif %} 
                    </div>
                  </div>
				  {{ form | payment_button }} 
				
                {% endif %}
				
				
                
                
              </div>
            </div>

Next move to cart-template.liquid file, under sections and add below code before the div with class “cart__remove”

					{% if item.variant.inventory_quantity <= 0 %}	
				
						<span class="pre-order-delivery-time" pre-order-delivery-time>
						{{ 'products.product.pre_order_cart_comment' | t }}
						</span>
						
					{% endif %}




                    //<p class="cart__remove">

After that we will move to *(your store language).json, under Locales folder. In our case this is en.default.json file. Here we will add text, that will be displayed when pre-ordering. Add below under “product”.

"pre_order": "Pre-order",
"pre_order_comment": "Due to unexpectedly increased request this product is currently out of stock",
"pre_order_delivery_time": "Delivery time: +\/- 2 weeks",
"pre_order_cart_comment": "Pre-order: Delivery time+\/- 2 weeks",

You can amend the text, as you wish. Below is the complete code:

   "products": {
    "product": {
      "regular_price": "Regular price",
      "sold_out": "Sold out",
      "unavailable": "Unavailable",
      "availability": "Availability",
      "on_sale": "Sale",
      "from_lowest_price_html": "from {{ lowest_price }}",
      "sale_price": "Sale price",
      "quantity": "Quantity",
      "add_to_cart": "Add to cart",
      "pre_order": "Pre-order",
      "pre_order_comment": "Due to unexpectedly increased request this 
       product is currently out of stock",
      "pre_order_delivery_time": "Delivery time: +\/- 2 weeks",
      "pre_order_cart_comment": "Pre-order: Delivery time+\/- 2 weeks",
      "loader_label": "Adding product to your cart",
      "back_to_collection": "Back to {{ title }}",
      "vendor": "Vendor",
      "quantity_minimum_message": "Quantity must be 1 or more",
      "include_taxes": "Tax included.",
      "shipping_policy_html": "<a href=\"{{ link }}\">Shipping<\/a> calculated at checkout.",
      "unit_price_label": "Unit price",
      "view_cart": "View cart",
      "view_in_space": "View in your space",
      "view_in_space_label": "View in your space, loads item in augmented reality window"
    }
  },

Next we move to theme.js, under Assets, after _updateSKU: function(variant) function, add below _updateQuantity function

_updateQuantity: function(){ 

	  setTimeout(function() {
		  $( "#variant-pre-order" ).load(window.location.href + " #variant-pre-order" );
		  $( "#variant-inventory-wrap" ).load(window.location.href + " #variant-inventory" ); 
      }, null);
  
   },

Next in _onSelectChange: function() in the same file add below code, that will ensure above event will be handled accordingly.

this._updateQuantity(variant);

Below is the complete code:

    _onSelectChange: function() {
      var variant = this._getVariantFromOptions();

      this.$container.trigger({
        type: 'variantChange',
        variant: variant
      });

      if (!variant) {
        return;
      }

      this._updateMasterSelect(variant);
      this._updateImages(variant);
      this._updatePrice(variant);
      this._updateSKU(variant);
	  this._updateQuantity(variant);
      this.currentVariant = variant;

      if (this.enableHistoryState) {
        this._updateHistoryState(variant);
      }
    },

Next go to theme.liquid file, under Layout and add below under strings:

preOrder: {{ 'products.product.pre_order' | t | json }},

Below is the complete code:

<script>
    var theme = {
      breakpoints: {
        medium: 750,
        large: 990,
        widescreen: 1400
      },
      strings: {
        addToCart: {{ 'products.product.add_to_cart' | t | json }},
        preOrder: {{ 'products.product.pre_order' | t | json }},
// rest of the code ......

Last step is to customize how out Pre-order button will look in theme.scss.liquid file, under Assets. At the bottom of the file add below code. You can amend this, as you wish your button to appear.

/*================ Custom ================*/
.pre-order-delivery-time {
    font-weight: bold;
    background-color: #e4c534;
    color: white;

}

Do you want to receive more Shopify tutorials straight into your Inbox?

Subscribe to receive future Shopify tutorials straight into your Inbox

Where I can send future Shopify tutorials?