Integration Guides
      Back to home
      1. Knowledge Base
      2. Shipping Testing
      3. Integration Guides

      Integration Guide: Adding the Intelligems Shipping Progress Bar

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

      In this article:

      Overview

      Intelligems offers a progress bar for Shopify carts / slide-out carts that shows visitors how much they have left to spend before reaching free shipping. The progress bar can be used as part of a shipping threshold test (visitors will be shown the correct bar based on their test group) or outside of a test. See below for an example of the progress bar in action!

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

       

      Video walkthrough

      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, etc. We recommend adding this near to the top of the cart in most instances

      <ig-shipping-progress-container></ig-shipping-progress-container>

       

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

       

      Step 2: Add the subtotal class to Intelligems app settings

      Intelligems uses classes to access the cart subtotal. In the Intelligems App, go to the Settings menu and scroll to the Progress Bar Settings section. Press Edit, and under the Cart section, replace .igSubtotal with the class corresponding to your cart's subtotal (keep the "." at the beginning of the class name). Often, you can find the name of the class in the theme file that renders the cart. See below for an example of the theme code and Intelligems settings for the progress bar shown as an example above.

      If the cart subtotal has no nearby classes, you can add igSubtotal as a class and leave ".igSubtotal" as the class in the app settings.

       

      Step 3: Customization / Styling

      You can customize the Intelligems Cart Progress Bar in the Progress Bar modal located in the Settings page - see the screenshot below. Some examples of stylizing options available include:

      • Text displayed above the bar
      • Color for the completed / uncompleted portions of the bar
      • Bar height
      • Whether or not to display the bar if the cart subtotal is zero

      You can preview what the bar will look like by filling in values for the "Test Threshold" and "Test Cart Subtotal" at the top.

       

      Integrating with Rebuy Carts

      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 progress bar. See Step 1 above.
      3. Add the subtotal class to the Shipping Progress bar settings in the Intelligems app. See Step 2 above.

       

      Using the progress bar outside of a test

      Under the Threshold section in the Progress bar section of the Intelligems settings menu, use 'Default Threshold' to set the free shipping threshold when there are no live experiments. This allows you to continue using the Intelligems Cart Progress Bar even when you are not running a test. For example, if you set the Default Threshold to $25, the Cart Progress Bar will display free shipping over $25 when there are no tests running. To hide this progress bar when no test is live, set the default threshold to 0.