Integrating the Intelligems Campaigns Progress Bar

Learn how to add the Intelligems Campaigns progress bar to your cart.

Overview

Intelligems offers a progress bar for Shopify carts and slide-out carts that will show your customers how much more they need to purchase to achieve specific discounts, prompting them to buy more to get the best deal without ever leaving their cart. See below for an example of what this looks like!

You'll need the Intelligems javascript snippet installed in your theme to render the progress bar. If you haven't already added this, see our integration guide here.

Step 1: Add the progress bar to your Shopify theme

Paste the following code snippet into your Shopify theme code, in the theme file that renders your cart. This file may be called something like cart.liquid, slideout-cart.liquid, cart-template.liquid, etc. We recommend adding this near to the top of the cart in most instances.

<ig-volume-progress-bar-widget></ig-volume-progress-bar-widget>

If you already have a progress bar, remember to comment out the existing progress bar to avoid showing two!

Step 2: Customize the progress bar to match your site's styling & language

There are a few different customizations you can make to the progress bar. See more on each of the options below.

Style and Colors

You can customize the Intelligems Campaign progress bar in the widget library located in the Campaigns tab, or by selecting 'Edit Bar Style' while setting up a new campaign and toggling the progress bar on. Stylizing options available include:

• Bar styles

• Bar color for active and inactive

• Bar background color

• Breakpoint color for active and inactive

• Container background color

• Tooltip background color

• Customizable for both desktop and mobile

Variables

In addition to customizing the look and feel of your progress bar, you can also customize what messaging appears along with it. The first step in doing this is customizing the variables you will use. The variables are the words that can be put anywhere within your messages and will be filled in dynamically with the correct value when rendered within the template string. All variables have default values that we will fall back on if you leave that option blank.

There are four variables:

1. Unit Name (#unitName): The name of your items.

   1. The default value for this is 'items'.

   2. Ex. 'Buy 2 more packs to get 10% off' or 'Buy 2 more bars to get 10% off'.

2. More (#more): The word in place of 'more'.

   1. The default value for this is 'more'.

   2. Ex. 'Buy 2 extra items to get 10% off' or 'Buy 2 additional items to get 10% off'.

3. Quantity (#quantity): This is the amount needed to qualify for the next discount tier. This is not customizable by users and is calculated by Intelligems according to whether the campaign is set up as an item or subtotal requirement.

   1. Ex. 'Buy 2 more items to get 10% off' or 'Spend $10 more to get 10% off'.

4. Discount (#discount): This is the discount amount for a customer when they get to the next discount tier. This is not customizable by users and is calculated by Intelligems according to whether the campaign is set up as a currency or percentage discount.

   1. Ex. 'Buy 2 more items to get $10 off' or 'Buy 2 more items to get 10% off'.

Messages

Once your variables are set up, you can setup your messages, which are the sentences that will appear above your progress bar. You can construct a message by stringing together words and variables. Variables can be accessed by typing '#' and then selecting from the preexisting list of variables. Variables can be placed wherever you want and can be used however many times. All messages have default values that we will fall back on if you leave that option blank.

There are three messages:

1. Buy More: The sentence that will be rendered when there are discount tiers to unlock. It will render the next tier that the customer is eligible for.

   1. The default value for this is 'Buy #quantity #more #unitName to get #discount off'.

   2. Ex. 'Buy 2 additional packs to get 10% off' or 'Spend $10 more to get $5 off'.

2. All Tiers Unlocked: The sentence that will render in place of the 'Buy More' message when a user has unlocked all tiers. This will also render below the progress bar in addition to the 'Buy More' message for each individual tier accomplishment.

   1. The default value for this is:

      1. If all tiers have been unlocked, the default value is 'Congratulations, you’ve unlocked #discount off'. This will render above the progress bar.

      2. If at least one tier has been unlocked, but not all tiers have been unlocked, the default value is 'You now have #discount off'. This will render below the progress bar, while the 'Buy More' message renders above the progress bar.

   2. Ex. 'Congrats! You've got 20% off!' or 'You have unlocked 5% off!'.

3. Tooltip: The sentences that will show on hover of each tier breakpoint in the progress bar.

   1. The default value for this is:

      1. If the minimum purchase requirement or tier type is 'Subtotal of items', the default value is 'Spend #quantity to get #discount off'.

      2. If minimum purchase requirement or tier type is 'Quantity of items', the default value is 'Buy #quantity to get #discount off'.

   2. Ex. 'Buy 3 to get $10 off' or 'Spend $50 to get 10% off'.

Integrating with Rebuy Carts

If you use Rebuy for your slide out cart, you will need to follow these steps to add the Campaigns progress bar.

1. Create a Rebuy custom smart cart template. Follow this article for instructions.

2. Edit the template to replace the Rebuy progress bar with the Intelligems Campaigns progress bar. See Step 1 above.

3. Add the subtotal class to the progress bar settings in the Intelligems app. See Step 2 above.