Shopify: Gift a product using Script Editor

Shopify Script editor free product banner

Client Requirement

Add a pre-defined free product to the cart if the total price is over X amount.

Well yes, there is a quick solution for this and that is to buy an Add-on. But I’m not here to convince you to do that. Rather we will be building it from scratch with the Shopify script editor.


Take a moment and think about how are you going to achieve this, how am I;

Free products can be tackled in two ways,

  1. Adding a new product making its price $0. This way you can define the quantity of the free product.
  2. Adding a discount to the required free product.
  3. Activating the Script Editor and writing a simple script to make the products price $0 if found in cart.

Now that, that’s out of the way let’s create a new snippet and let’s call it “free-gift-inject.liquid”.

Defining the variables;

We will request the current cart items as JSON and with AJAX we will update the changed values to /cart page.

After the snippet is created, edit your cart.liquid to include the created Shopify snippet. If available you can add it to cart-template.liquid instead of the cart.liquid.

Wait, where’s the code for the script editor?

If you have not worked with a script editor, it’s pretty simple, to begin with. You can add the script editor App from the store. Once it has been added;

  1. Navigate to the app
  2. Select line items
  3. Create script and from the popup select Blank template
Shopify script editor

Under Code, you can add this;

Wallah! That is how to use Shopify Script editor 😇

Go Back