When it comes to Shopify scripts, there’s a lot of excitement around the different scripts you can implement to increase conversions on Shopify. With scripts being quite a complex setup for Shopify Plus merchants, quite often, scripts get left in the dark in merchant stores due to the knowledge gap.
Merchants wanting to grow their customer base and bring value to customers when they’re purchasing can take great advantage of scripts to offer customers unique shopping experiences, especially throughout holidays.
As Shopify Experts, we want to inspire more merchants to take advantage of the features that Shopify Plus has to offer. We’ve put together some of the best performing scripts that we’ve implemented for our clients on Shopify Plus.
Here are Shopify Scripts That Increase Conversions:
Shopify Plus Shipping Script
Managing your customer’s expectations in regards to shipping and cut off times for a particular method can be hard, but with the help of a JavaScript snippet, you can make it clear to consumers exactly when a method isn’t available.
The above may SEEM rather intimidating but in reality, it really is simple and follows the following:
- We check to see what step the customer is at in the checkout – if this is the shipping method, we then run the code.
- We then initialise our logic function on page load, and also when the DOM is refreshed.
Once the above has been accomplished, our logic function is then broken down as follows:
- We grab the current date via the use of JavaScript’s Date() function.
- We then compare and check the length of the current methods in the shipping methods list.
- Based on days 1 through to 4 and time, we then hide ‘Royal Mail’ as an option in the list by a simple CSS display property.
- We then repeat the above logic to represent other couriers in the list.
As you can see, through the power of pseudocode, we can break this down very easily and your customers end up with a simple to use shipping method system that doesn’t rely on any third-party apps. Customers can CLEARLY see what methods are available to them without needing to wonder if their order will ship in or on time.
Shopify Plus Gift With Purchase Script
When your business starts to become profitable or you’re simply wanting to reel in potential customers, you might launch a promotion – making those promotions as seamless as possible though, can be a challenge.
You have many on offer such as, but not limited to:
- Discount codes
- Email promotions
- Automatic cart discount
- UTM-style discounts
Apart from the ones above though, you can indeed offer a way to automatically add a free gift to their cart alongside the current purchase. For example, you might bundle a free blending sponge with the purchase of a foundation or a brush with a new hairdryer – things like this give your consumers confidence to feel they’re wanted on your store.
In order to do the above though, needs a bit of development – luckily we cover this below for you.
Firstly, you need to set up your free gift product in the back-end. This can be anything but has to be an item in your backend of Shopify.
Once done, we can then go ahead and start adding code to the theme. Select your live or duplicate, dev theme and open the code editor of your choice. Then you’ll need to find your ‘Add to Cart’ button on the product page and exchange this to the below, changing the handle of the product to equal that of the product you’d like to offer the free item on – NOT the free item handle.
So here, if Shopify detects that the product is ‘beauty-foundation’, we add a class to the button.
Next, we need to insert the actual code that will handle the addition of this free gift. It’s required that the theme you’re using uses jQuery but can be re-written to vanilla ES6 JavaScript if needed.
Create a new asset named ‘free-gift.js’ and insert the following:
As you can see, we’re tapping into Shopify’s cart API by way of ‘add.js’ and also ‘change.js’. This will firstly check the items in the cart and if true, will trigger a variable we set earlier on. Based on this, we then run another check to check if the variable is true, if so, we then add the free gift to the cart via the use of ‘/cart/add.js’, otherwise we just update the free gift’s quantity back to one – remember, we only want people to add in ONE free gift.
Ensure the variant ID is changed to reflect that of the variant ID of the free gift.
Place into your theme.liquid file, somewhere near the </body> tag.
We’ve now taken care of the bulk of the logic, now we just need to take care of the cart and add in a Shopify Script.
Find where your cart/cart items are rendered and enter the following code:
This does some basic detection, again, should the gift be found in the cart. Ensure the variant ID is changed to reflect that of the variant ID of the free gift.
Finally, open the Scripts Editor app from Shopify and paste in the below – this requires you to be on a Shopify Plus plan or higher.
This simply applies the necessary discounts to the free gift and/or item in question – again, the IDs may need to be changed to reflect that of the free gift:
And that’s it! Although it’s slightly cumbersome to get to grips with, it’s relatively easy to offer your customer a seamless way to entice them with an incentive such as a free gift. This means happy customers and more sales for you on the products you can afford to give away.