Cart customization with Shopify Scripts

One of our favourite Shopify Plus features is Shopify Scripts, giving merchants a way to create a whole new level of store customization.

What are Shopify Scripts?

Shopify Scripts give merchants the ability to write Ruby code specifically for your store, modifying aspects of a customers cart and checkout settings based on who the customer is and what they have in their cart. Being able to modify the cart or checkout settings on the fly allows you to create sales or discounts, change shipping rates, and modify payment gateways to suit the customer. Scripts give you direct access to Shopify's environment to create your own customizations without having to make complicated and hard to use workarounds, or having to worry about maintaining complex applications and servers.

Screen shot of Script Editor App in shopify admin
Script Editor App in Shopify admin

Types of scripts

There are three different types of scripts: Line Item, Shipping, and Payment. Each is created similarly and they all look alike, but in functionality, they serve different purposes. The end result of any kind of script is to give users a better experience while shopping, whether that's by saving them money or reducing friction to make it easier for them to complete their desired actions.

Line Item Scripts are what modify the cart, or the products in it, based on a set of rules you give to the script. They allow you to do things like give discounts to specified products, modify product quantities, discount the entire cart total, or add products to the cart.

Shipping Scripts and Payment Scripts use the same conditions and parameters as Line Item Scripts.

Script Examples

Line item scripts

  • Buy one get one free
  • Amount ($) off specified products
  • Percentage (%) off specified products
  • Bulk discounts

Shipping scripts

  • Modify shipping rate price
  • Modify shipping rate name
  • Hide shipping rates
  • Reorder shipping rates

Payment scripts

  • Modify payment gateway name
  • Hide payment gateway
  • Reorder payment gateways

How scripts are being used

The possibilities for scripts are almost endless. Plus merchants are using them in all kinds of different ways to add value for their customers. One way to customize the cart experience could be to apply a 10% discount to products in the cart with a quantity of 2 or more.

Here you can see what it looks like while editing a script. There are three main parts:

  1. the code you write,
  2. the input cart,
  3. and the output order.

The input cart is just like the cart in the front end of any store, you add products, select variants, update quantities. The output order is an example of what a customers' checkout will look like after a script has modified their cart.

Screenshot of Shopify script editor example
Shopify Script editor

You can write the code, update the cart, and see what happens all at once. It really makes it easy to quickly test and make changes to a script.

Check out the code for this example script.

With the script published and running in the store, we can see the changes it makes to the cart. In this example, we have a couple products in the cart to test how the changes made by the script are displayed in the current theme.

Screen shot of Shopify store cart with shopify script example
Cart page updates from Shopify Script

Notice how the product "650C 45mm Micro Wheelset" has a quantity of 2. The script checked this and applied the 10% off discount only to this product. The "Alfa" bike didn't have any discount applied to it because there's only one in the cart.

This is a simple script that might not be very practical for real merchants but it's a good place to start. With this, we can see what Shopify Scripts are capable of and build off of it to easily create rules and customizations to fit specific business needs, and benefit users.

Theme compatibility

Shopify has a list of themes that are compatible with Shopify Scripts on the script editor help centre. This isn't to say that other themes aren't compatible though. Scripts mostly work independently from theme code, and all Shopify Scripts will work exactly as designed whether or not the current theme supports it or not. The only thing that themes need to take into account is notifying the user on changes to cart line item prices and overall cart total.

Updates to the cart made by Line Item Scripts can happen rapidly at any time while a user is adding and removing things from their cart. These updates are made available to themes through liquid objects for scripts. This means that if a script adds a product to the cart, discounts a product, or adds a discount code, the changes can be made visible to the user before they even go to checkout. Feedback like this not only keeps users from being surprised by unexpected changes when they go to checkout, but it can also give users an extra incentive to get to the checkout.

Making a theme compatible with Shopify Scripts is straightforward and doesn't require large changes to your theme's style or layout.

Find the Script Editor App in the theme store, and read how the app works in the Shopify help centre or the Shopify Scripts API.