Whatsapp chat on website

The following code snippets will add WhatsApp chat option on your website. If you have a Shopify store then it will eliminate the need for SuperLemon Whatsapp chat for your website if you don’t use the analytics provided by this app.

The JS code checks if the touch events are supported on the device and based on this the Web link or the App link is served.

HTML snippet for Whatsapp chat button

jQuery snippet for Whatsapp chat button

Percentage off least expensive item / Buy One Get One Free – Shopify Scripts

This post uses Shopify Scripts API to create the Buy One Get One, generally called BOGO functionality. If you want to create Buy One and get Second Item on 50% off (the discount will be applied to the least priced item), like Pela Case is doing, this code will work as well.

Shopify has already created a script for BOGO and Percentage off least expensive item but the Percentage off least expensive item script is buggy. It does not give a discount if you add the same item to cart twice because Input.cart.line_items.size counts it as just one item. So, we have to count the quantity of the same product manually.
The problem has been fixed in this code:

You can change the DISCOUNT_AMOUNT variable to 100 to give 100% on the second item, which is Bug One Get One Item free. In Shopify’s BOGO script, we have to mention the products IDs and it works for different products. But this method works on all the products irrespective of the IDs

Shopify Scripts API Documentation is worth checking if you looking to create a different functionality. Shopify scripts use Ruby programming language, so if you want to try your hands on Ruby, follow this link.

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.