Minimum order amount validation on Checkout Page – Shopify

Setting up a minimum order amount is something which almost all the wholesale stores on Shopify need. If you’re using Shopify’s Wholesale channel then it is possible to set the minimum order amount restriction by using the default setting but if you’re using a Shopify Store as a wholesale site which most of the companies do because you can’t edit the theme of the wholesale channel, then it is something troublesome.

There are various solutions on the internet to create this function like using Minimum Orders app and Order Logic Shopify App, there is a script from Caroline called limiter which prevents the users to order less than the minimum order value for your site but none of these methods work on the checkout page. I implemented a similar code snippet for one of my clients but it failed because users were directly going to the checkout page and there was no validation, so users were able to place orders with a value less than $200. Technically, these solutions failed in all the following scenarios:

  • disable JavaScript, or
  • go directly to the checkout using,/checkout or
  • use <input type="hidden" name="return_to" value="/checkout"> injected to the add to cart form, or
  • use a cart permalink to add any amount of items to the cart at any time.

To fix this, I came with a simple solution by updating a liquid condition and some CSS code in the checkout.liquid file. Only Shopify plus customers can edit the checkout.liquid file so it does not work for Shopify customer.

Add the following code in the checkout.liquid file.

In this example, I am limiting the users to order below $200. So, the liquid condition will check the order total value and if it is less than 200, it will insert the CSS code with will hide the submit buttons on the checkout and display a message saying that the order amount should be more than $200.

The best part of using approach is, it will work in all the above-mentioned scenarios where the apps fail.