Clean, Simple but Powerful

How to Add Pre Order Button in Shopify


Last Update: 31 Aug, 2022

Setup a new shop on Shopify and ready to launch? Or out of items on your stock? You can sell your product by taking pre orders. 

Today we are going to show you how to add pre order button in Shopify and also how to authorize the pre order payments. 

So, keep reading the guide and learn how to set up  pre order on Shopify. Firstly, You need to create a successful Shopify store within 30 min please check this article if you are not still opening a store: How to create a successful Shopify store in 30 minutes

order button in shopify

Here’s How to Add Pre Order Button in Shopify

The importance of the Shopify pre order button is immense. You can sell your products even after your product is out of stock. 

We will show you a technique that will help you show an automatic pre order button when the “Continue selling when out of stock ” option is checked under the product variant in your Shopify admin.

Setting Up Shopify Pre order Button

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 the Locales folder. In our case, this is the 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 our 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;
}

How To Authorize Pre order Payments

Be careful not to complete a transaction for a pre order till the customer has been made aware that the product they’re ordering is not available immediately. You can capture payments at a later date when you have the product available and ready for dispatch.

Remember not to capture the payment after the product has been dispatched. Or else, some customers may not have the money to clear the transaction.

Here’s how to authorize pre order payments.
Log into your Shopify dashboard using your user credentials. Now, navigate to the ‘Settings’ page and there click on ‘Payments’.

Look for the ‘Payment Authorization’ section and click on the option ‘Manually capture payment for orders. You can click on the ‘Save’ option.

The authorization period for Shopify is seven days. If you expect to collect payment after this date, you should use a third-party payment gateway.

Add A Pre order Product Page Template

In order to ensure that the customer knows that the product they’re ordering is a pre order product, you should follow the steps below.

Log into your Shopify dashboard using your user credentials. Click on ‘Online Store’ and then ‘Themes’. In the theme that you’re using, click on the ‘Actions’ and the ‘Edit Code’. In the ‘Templates Directory’ click on the ‘Add a new Template’ button. Select the ‘product’ option from the drop-down menu and name the template as ‘pre-order’.

Click on the ‘Create template’ button and then you will have a new template with the name pre-order. liquid template and you should open this document in the code editor. There you will find this code

{% section ‘product-template’ %}
and change it to,
{% section ‘product-pre-order-template’ %}

Click on the ‘Save’ option. Now click on the ‘Section directory’ and then ‘Add a new section’. You should add product-pre-order-template in the text field open.

Click on the ‘Create Section’. A code editor will open. You should delete all the default and copy and paste all the content to the product-pre-order-template.liquid file found in the Section Directory from the ‘product-template.liquid file in the Section Directory.

Next you need to change the add to cart button text in the product-pre-order-template.liquid file. For this, you will need to change a few lines of code. You’re searching for

{{ ‘products.product.add_to_cart’ | t }}
addToCart: {{ ‘products.product.add_to_cart’ | t | json }}
and want to replace these respectively with
{{ ‘Pre-order’ | json | remove: ‘”‘ }}
addToCart: {{ ‘Pre-order’ | json }},

Now click on the ‘Save’ button. You need to assign the template to products that should be pre-ordered. To do this navigate to your ‘Products’ page.

Find the products that you’re looking for and enter their editing screen. Go to the Theme Templates section and change this to the product to pre-order. Then you can ‘Save’ your changes.

In the product’s editing screen, click on the option ‘Allow customers to purchase this product when it’s out of stock. Now you can ‘Save’ your changes.

Conclusion

So, now you know how to add pre-order button in Shopify and also showed you how to authorize pre order payments. 

Sometimes you want to allow your customers to buy products that are not in stock. This way you can still earn revenue even when you don’t have enough products on your Shopify store.

Editor Team


We are a group of WordPress experts (editorial team) from Themeim. All of these articles go through manual testing to reveal the ultimate outcome.