Integration Guides
      Back to home
      1. Knowledge Base
      2. Integrating Your Site
      3. Integration Guides

      Integration Guide: Launching your First Price Test on your Shopify Plus Store

      Learn how to integrate your Shopify Plus store with Intelligems for a Pricing Test using Checkout Scripts.

      In this article:

      Prerequisites: Download the Intelligems App and approve billing.

      If you have not already done so, please download the Intelligems app from the Shopify app store and approve billing in the Settings section in the app.

      ❗If you have chosen to have Intelligems complete the integration, many of these steps will be done on your behalf. Feel free to jump over to this article for an overview of the onboarding process and next steps.

      Step 1: Add Intelligems JavaScript.

      Add Intelligems JavaScript as a source into your theme.liquid file.

      <head>
        ...
        <script src="https://cdn.intelligems.io/<your_customer_id>.js"></script>
        ...
      </head>

      Your individual script tag is located on the settings page in the Intelligems App. 

      Screen Shot 2022-12-06 at 12.07.20 PM

      ❗If your store does not have a checkout.liquid file, you can request one from Shopify.

      Step 2: Set up your test.

      If you have not already done so, the next step in the integration is to create your first Pricing Test. Check out our guide on doing this here. Don't worry - it won't be going live right away and you can always make edits before launching it!

      Step 3: Tag product prices.

      The next step to start a Pricing Test is to make sure the Intelligems app is aware of all the places where prices appear in your store by confirming that all product price and compare-at-price locations be tagged - these tags allow the app to dynamically modify the price for each test group. The easiest way to do this is using the Integration Widget, which we'll walk you through step-by-step in this article.

      Step 4: Add the Checkout Script.

      ❗You must be using Shopify Plus to integrate with Intelligems using the Checkout Script. Please see our Non-Shopify Plus guide if this does not apply to you.

      The Intelligems checkout script will not apply any discounts or make other changes to orders until a price test is live

      Follow the below steps to add the Intelligems Line Items checkout script to your Scripts Editor. Shopify Scripts Editor enables changing the price in the cart so that your customers pay exactly the price they see.

      1. In your Shopify admin, go to Apps and click on Scripts Editor.
      2. If you already have a Line Items script, you can create a copy and edit it. Make sure our script runs first so that discounts get applied in the correct order. If you do not already have a Line Items script, create a new one.
      3. Paste the loop below into the script. Save and publish the script.
      class Intelligems
        def initialize(discount_property = '_igp', allow_free = false)
          @volume_discount_property = '_igvd'
          @volume_discount_message_property = '_igvd_message'
          @depreciated_property = '_igLineItemDiscount'
          @discount_property = discount_property
          @allow_free = allow_free
        end

        def discount_product(line_item)
          ig_price = Money.new(cents: line_item.properties[@discount_property])

          discount = line_item.line_price - ig_price
          if discount > Money.zero
            discount *= line_item.quantity
            line_item.change_line_price(line_item.line_price - discount, message: 'Discount')
          end

        end

        def depreciated_discount_product(line_item)
          discount = Money.new(cents: line_item.properties[@depreciated_property])
          discount *= line_item.quantity

          if @allow_free or discount < line_item.line_price
            line_item.change_line_price(line_item.line_price - discount, message: 'Intelligems')
          end
        end

        def volume_discount(line_item)
          discount = Money.new(cents: line_item.properties[@volume_discount_property])
          discount *= line_item.quantity

          if discount < line_item.line_price
            message = line_item.properties[@volume_discount_message_property]
            line_item.change_line_price(line_item.line_price - discount, message: message)
          end
        end

        def run(cart)
          cart.line_items.each do |line_item|
            if !line_item.properties[@discount_property].nil? && !line_item.properties[@discount_property].empty?
              discount_product(line_item)
            elsif !line_item.properties[@volume_discount_property].nil? && !line_item.properties[@volume_discount_property].empty?
              volume_discount(line_item)
            elsif !line_item.properties[@depreciated_property].nil? && !line_item.properties[@depreciated_property].empty?
                   depreciated_discount_product(line_item)
            end
          end
        end
      end

      intelligems = Intelligems.new()
      intelligems.run(Input.cart)

      Output.cart = Input.cart

      Step 5: Update your cart.

      During the Integration, the Intelligems discount message will occasionally show in the cart or the compare-at price will not display correctly. Should this happen, follow these steps to correct the issue and complete the integration.​

      Remove Hidden Line Item Properties​

      Most Shopify stores use a convention that any line item with a leading _ should not be displayed in the cart. Here is a common example of how that is implemented in a liquid cart.

      The key lines are as follows:

      {% assign first_character_in_key = p.first | truncate: 1, '' %}
      {% unless p.last == blank or first_character_in_key == '_' %}

      And the result should look like this:

      {% assign property_size = item.properties | size %}
      {% if property_size > 0 %}
        {% for p in item.properties %}
          {% assign first_character_in_key = p.first | truncate: 1, '' %}
          {% unless p.last == blank or first_character_in_key == '_' %}
            {{ p.first }}:
            {% if p.last contains '/uploads/' %}
              <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
            {% else %}
              {{ p.last }}
            {% endif %}
          {% endunless %}
        {% endfor %}
      {% endif %}

      You can learn more about this here.

      Hide the Discount
      If we're using the Checkout Scripts to apply a "hidden" discount on a product, we don't want to show the user that they're receiving an Intelligems discount.

      This snippet will create a variable intelligems_discount per line item which is either 0 or a non-zero number in cents which represents the Intelligems price change. This can also be used to adjust compare-at prices if desired.

          {% assign intelligems_total = 0 %}
          {% for item in cart.items %}
            {% case item.properties._igLineItemDiscount %}
              {% when "0" or nil or blank %}
                {% assign intelligems_discount = 0 %}
              {% else %}
                {% assign intelligems_discount = item.properties._igLineItemDiscount | plus: 0 %}
                {% assign intelligems_total = intelligems_total | plus: item.properties._igLineItemDiscount %}
            {% endcase %} 
           ....
          {% endfor %}

      For the strikethrough price, we might include the condition:

      {% if intelligems_discount == 0 %}
      ...
      {% endif %}

      So the final result will look like:

      {% if item.original_line_price and item.original_line_price != item.line_price and intelligems_discount == 0 %}
          <span style="text-decoration:line-through;">{{ item.original_line_price | money  }}</span><br>
      {% endif %}
      Hide the Discount Message​

      Sometimes discount messages appear to communicate bundle discounts, etc. In this case, we'll want to hide our message using the following:

      {% if item.message and item.message != "" and item.message != "Intelligems" %}
          <br><span>({{ item.message }})</span>
      {% endif %}

      Integrating Using HandleBars​

      Follow the example below if you use HandleBars in your theme. Add the HandleBar functions to the rest of your HandleBar functions.

      // JS 

      Handlebars.registerHelper('noIgDiscount', function(arg1, options) {
          return (arg1.find(discount => discount.discount_application.title === 'intelligems' )) ? options.inverse(this) : options.fn(this) ;
      });
      Handlebars.registerHelper('hasExtraDiscounts', function(arg1, options) {
          return arg1.some(discount => discount.discount_application.title !== 'intelligems' ) ;
      });

      // LIQUID EXAMPLES

      {{#if discountsApplied}}
         {{#if (hasExtraDiscounts discounts)}}
            <small class="cart__price--strikethrough">{{{price}}}</small>
            <span class="ajaxcart__price">
                {{{discountedPrice}}}
            </span>
        {{else}}
            <small class="cart__price">{{{price}}}</small>
        {{/if}}
                  
        {{else}}
           {{#if shouldShowComparePrice}}                                           
             <small class="cart__price--strikethrough">{{{comparePrice}}}</small>                                                                                    
           {{/if}}     
            <span class="ajaxcart__price {{#if shouldShowComparePrice}}tw-text-red{{/if}} ">
                {{{price}}}
            </span>
      {{/if}}

      {{#if discountsApplied}}
        <div class="text-right grid__item">
            {{#noIgDiscount discounts}}
                {{#each discounts}}
                    <small class="ajaxcart__discount cart__discount">
                        {{this.discount_application.title}}
                        (-{{{this.formattedAmount}}})
                    </small>
                {{/each}}
                {{else}}
            {{/noIgDiscount}}
        </div>
      {{/if}}

      Step 6: QA your integration.

      After you have completed all previous integration steps, go through your store using Preview Mode in the Integration Widget (see more on how to start preview mode here) and make sure everything looks correct. Follow our QA checklist here!

      Step 7: Publish your theme changes and start your first test.

      Once you have verified Intelligems is fully integrated, you can publish your theme changes (if you haven't already) and start your test from the Intelligems App! Check out our step-by-step guide on doing this here. 

      What happens next?

      Now that you've started your first test, here are some things to do next: