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?