Offers: Integrating Widgets

Learn how to add the Intelligems Offer Quantity Buttons to your product pages and Offer Progress Bar to your cart.

Overview

Intelligems offers quantity buttons for product pages so customers can quickly add multiple units to cart and achieve various discount tiers.

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 Quantity Buttons & Progress bar. If you haven't already added it, see our integration guide here.

Quantity Buttons

Step 1: Add the code snippet to your theme code

Paste the following code snippet into your Shopify theme code in the theme file that renders your product pages where you want the quantity buttons to go. It should be in the <form type="/cart/add">.

<ig-volume-quantity-widget></ig-volume-quantity-widget>

Step 2: Customize the quantity buttons to match your site's styling

You can customize the Intelligems Offer quantity buttons in the Widget Library located in the left menu. Stylizing options include:

• Button styles

• Button primary, secondary and border colors

• Customizable for both desktop and mobile

Note that quantity buttons will only reflect your store's default currency, so if you are choosing to use quantity buttons for your Offer Personalization or Offer test, you should also set up targeting for your store's default currency.

The quantity buttons are a layer over top of your store's quantity buttons. To change the default quantity selected in an offer, you will need to change the default quantity within Shopify.

Progress Bar

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 Offer progress bar in the Widget Library located in the left menu, or by selecting 'Edit Bar Style' while setting up a new offer modification 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 Offer 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 Offer progress bar. See Step 1 above.

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