Shopify: Gift a product using Script Editor
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.
Solution
Take a moment and think about how are you going to achieve this, how am I;
- going to tackle the free product scenario?
- inject a product to the cart?
Free products can be tackled in two ways,
- Adding a new product making its price $0. This way you can define the quantity of the free product.
- Adding a discount to the required free product.
- 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;
- Free gift over price: Since Shopify works in cents, you will have to get the price by ({amount}*100).
- Variant ID: To retrieve the variant ID, you can go to select a product from the product list, edit the variant.
We will request the current cart items as JSON and with AJAX we will update the changed values to /cart page.
| {% assign free_gift_over_price_40 = 4000 %} | |
| {% assign variant_id = '31059890110524' %} | |
| <script> | |
| (function($) { | |
| var cartItems = {{ cart.items | json }}, | |
| qtyInTheCart = 0, | |
| cartUpdates = {}, | |
| cartTotal = {{ cart.total_price }}; | |
| for (var i=0; i<cartItems.length; i++) { | |
| if ( cartItems[i].id === {{ variant_id }} ) { | |
| qtyInTheCart = cartItems[i].quantity; | |
| break; | |
| } | |
| } | |
| if ( ( cartItems.length === 1 ) && ( qtyInTheCart > 0 ) ) { | |
| cartUpdates = { {{ variant_id }}: 0 } | |
| } | |
| else if ( ( cartItems.length >= 1 ) && ( qtyInTheCart !== 1 ) && (cartTotal >= {{ free_gift_over_price_30 }} ) ) { | |
| cartUpdates = { {{ variant_id }}: 1 } | |
| } | |
| else { | |
| return; | |
| } | |
| var params = { | |
| type: 'POST', | |
| url: '/cart/update.js', | |
| data: { updates: cartUpdates }, | |
| dataType: 'json', | |
| success: function(stuff) { | |
| window.location.href = '/cart'; | |
| } | |
| }; | |
| $.ajax(params); | |
| })(jQuery); | |
| </script> |
by 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.
| {% comment %} | |
| The contents of the cart.liquid template can be found in /sections/cart-template.liquid | |
| {% endcomment %} | |
| {% section 'cart-template' %} | |
| {% include 'free-gift-inject' %} |
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;
- Navigate to the app
- Select line items
- Create script and from the popup select Blank template
Under Code, you can add this;
| FREEBIE_PRODUCT_ID = 31059890110524 | |
| CART_TOTAL_FOR_DISCOUNT_APPLIED = Money.new(cents: 4000) | |
| DISCOUNT_MESSAGE = "Get a FREE gift for ordering $40 or more" | |
| freebie_in_cart = false | |
| cart_price_exceeds_discounted_freebie_amount = false | |
| cost_of_freebie = Money.zero | |
| # Test if the freebie is in the cart, also get its cost if it is so we can deduct from the cart total | |
| Input.cart.line_items.select do |line_item| | |
| product = line_item.variant.product | |
| if product.id == FREEBIE_PRODUCT_ID | |
| freebie_in_cart = true | |
| cost_of_freebie = line_item.line_price | |
| end | |
| end | |
| # If the freebie exists in the cart, check the subtotal of the other items to see if the freebie should be discounted | |
| if freebie_in_cart | |
| cart_subtotal_minus_freebie_cost = Input.cart.subtotal_price - cost_of_freebie | |
| if cart_subtotal_minus_freebie_cost >= CART_TOTAL_FOR_DISCOUNT_APPLIED | |
| cart_price_exceeds_discounted_freebie_amount = true | |
| end | |
| end | |
| # Only true if the freebie is in the cart | |
| was_discount_applied = false | |
| if cart_price_exceeds_discounted_freebie_amount | |
| Input.cart.line_items.each do |item| | |
| if item.variant.product.id == FREEBIE_PRODUCT_ID && was_discount_applied == false | |
| if item.quantity > 1 | |
| new_line_item = item.split(take: 1) | |
| new_line_item.change_line_price(Money.zero, message: DISCOUNT_MESSAGE) | |
| Input.cart.line_items << new_line_item | |
| next | |
| else | |
| item.change_line_price(Money.zero, message: DISCOUNT_MESSAGE) | |
| end | |
| end | |
| end | |
| end | |
| Output.cart = Input.cart |
