Badgezilla

Flex Theme Sections

Checkout Toolbox

Linear Shopping Experiences

Brand-It! Calendar

DIY Cart Promotions

There are plenty of apps out there that allow you to add promotions to the cart.  But your store may not need the overhead, complexity or cost of more apps.  If that's the case for you, here's how to implement your own Do-It-Yourself cart promotions.  

Implementing these requires you to edit your theme code.  The code added uses Liquid, HTML and CSS.  But it requires no JavaScript.  And this code requires that your theme use a page for the cart.  So it doesn't work for mini-carts or pop-up carts.

Here are some examples of promotions that I have added to clients' carts.  The code for all of these are provided.

Discount Code Based on Cart Size

In this promotion, you get to set a cart size threshold.  Before the threshold is hit, the promotion shows what the customer gets when they hit the threshold, like a 10% off discount code.  When they pass the threshold, the message changes to a congratulations message and they can click the button to immediately add the discount code to their order.

Gift Wrapping

This promotion allows the customer to add a gift-wrapping product to their order by clicking a button.  This promotion goes away once the Rush Order Processing product is in the cart.

Rush Order Processing

This is a great promotion for companies that take time to process their orders, for example, if they are selling personalized products.  This promotion allows the customer to add a rush processing product to their order by clicking a button.  This promotion goes away once the Rush Order Processing product is in the cart.

Product Cross-Sell

This promotion allows you to queue up to three product promotions to customers in your cart.  When one product is added to the cart by the customer than the promotion shows the second product in the queue.  When the second product is added to the cart by the customer than the promotion shows the third product in the queue.  When the second product is added to the cart by the customer than the promotion shows the third product in the queue.  When the third product is added to the cart by the customer than the promotion doesn't show.  

Out of Office Notification

 This notification allows you to provide a general message to your customers in the cart.  I've seen my clients use this to make customers aware when the office is shut down, like during the holidays, and may affect shipping times.  They've also used this to let customers know in Canada when Canada shipping was slowed down due to a strike.

Code Changes

The code edits required for this aren't too complex.  If you are comfortable with editing the Liquid code in your theme, then you should be able to this.  This code will give you ideas on how to implement DIY Cart Promotions in your theme.

Theme Disclaimer:  All of the code provided works well inside the Turbo theme by Out of the Sandbox.  If you are using a different theme, you may need to make some edits to get things working as desired.

Here are the files that need to be added/edited:

Cart-Messages.liquid

This is a snippet that I add to the theme.  The code here is what drives the promotions to display in the cart.  Then I add the following include statement - {% include 'cart-messages' %} - wherever I want the promotions to show on the cart page.  You'll add that either in the template 'cart.liquid' or section 'cart-template.liquid'. 

Additional.css.liquid

This is the CSS code that is used to render the display of the promotions in the cart. So this CSS code is used on the classes used in the cart-messages.liquid code. You can add this code to your theme's CSS file. Though I prefer to keep a seperate CSS file in the theme for all of the CSS code that I add. If that's the case for you, you'll need to load the CSS file in theme.liquid.

Settings_schema.json

This code needs to be added to the existing setttings_schema.json file in your theme. This code adds controls to Theme Customization elements to your theme that will allow to easily setup and edit the content of the promotions.

This code should give you the building blocks that you need. You'll need to edit the code to have only the promotions that you want, to have the promotions show up the way you want and get it to work in your theme.


JadePuma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.


Search