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?
