Important Notice for Existing Users:

If you have previously installed our Shopify integration using the “Additional Scripts” method, please refer to our upgrade guide to update your integration.

This article is intended for new users who are installing the integration for the first time.

Introduction

This guide walks new customers through the process of installing the SocialLadder integration with Shopify, enabling link-based tracking for branded ambassador referral links. This step-by-step tutorial ensures that your Shopify store is fully integrated with SocialLadder using the new pixel-based method.

Steps for Installing or Updating the SocialLadder Shopify Integration

Step 1: Log Into Your Shopify Admin

Visit [your-store-url].myshopify.com/admin and log into your Shopify store.

Step 2: Access the Theme Editor

On the left sidebar, go to Online Store > Themes.
Find your active theme and click the Customize button.

Step 3: navigate to the Product Page

At the top of the screen, you'll see a dropdown menu with the option to select pages.
Select Product > Default Product.

Step 4: Customize Product Information

On the left-hand menu, select Product Information.

Step 5: Edit Theme Code

At the top-left corner, click the ellipsis (...) and select Edit Code.

Step 6: Add JavaScript for SocialLadder

Under Layout, select theme.liquid.

Scroll to the end of the file and paste the following code just above the </body> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://socialladder.rkiapps.com/Shopify/socialladder-shopify.js" type="text/javascript"></script>

Ensure that the scripts are pasted in this exact order.
Click Save to apply the changes.

Step 7: Return to the Shopify Admin Dashboad

After saving the code, exit the code editor by clicking Exit.
Navigate back to your Home Page.

New Steps for Shopify's Link-Based Tracking

Step 8: Setting Up the Custom Pixel

In your Shopify admin, navigate to Settings > Customer Events.
Click on Add custom pixel.
Name the pixel (e.g., "SocialLadder-Pixel").
In the Permissions section, select Not required.
In the Date sale section, select Data collected does not qualify as data sale.
Click Save to confirm the setup.

Step 9: Implementing the Updated JavaScript Code

Replace the existing script in the Code section with the following:

analytics.subscribe("checkout_completed", event => {
  var slScript = document.createElement("script");
  var jqScript = document.createElement("script");
  var img = document.createElement("img");

  // Prepare order data
  var orderId = event.data.checkout.order.id;
  var price = event.data.checkout.totalPrice.amount;
  var quantity = 0;
  var promoCode = "";
  var email = event.data.checkout.email;
  var currency = event.data.checkout.totalPrice.currencyCode;

  // Set quantity
  event.data.checkout.lineItems.forEach((lineItem) => {
    quantity += lineItem.quantity;
  })

  // Set promo code
  var discountCodeApplication = event.data.checkout.discountApplications.filter((app) => app.type == "DISCOUNT_CODE");

  if (discountCodeApplication.length > 0) {
    promoCode = discountCodeApplication[0].title;
  }

  // Send event data
  slScript.onload = function() {    
    if (typeof window.loadSLImage === "function") {
      img.onload = loadSLImage;
    }
    
    if (typeof window.SLCheckout === "function") {
      SLCheckout(orderId, price, quantity, promoCode, email);
    }
  }

  // Configure placeholder image
  img.width = "1";
  img.height = "1";
  img.src = "";
  img.id = "slPixel";

  // Append elements
  jqScript.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
  jqScript.type = "text/javascript";
  
  slScript.src = "https://socialladder.rkiapps.com/Shopify/socialladder-shopify.js";
  slScript.type = "text/javascript"

  document.body.appendChild(img);
  document.head.appendChild(jqScript);
  document.head.appendChild(slScript);
});

Click Save to apply your changes.
Click Connect to activate the Pixel.

Optional: Adding Currency Tracking

If your Shopify store operates in multiple currencies, you can extend tracking functionality.

Add the currency variable to the SLCheckout function. Example:

SLCheckout(orderId, price, quantity, promoCode, email, currency);

Once you’ve made your changes, click the Save button at the top of the screen, followed by Connect to enable the custom pixel. The pixel is now active and tracking.

Important:

Ensure that the currency conversion feature is enabled within the SocialLadder system to accurately track and reflect multi-currency sales data.
Please inform your Customer Success Manager (CSM) if you are using multiple currencies, so they can assist in ensuring that everything is properly configured on both Shopify and SocialLadder Platform.

Troubleshooting

For any issues with the setup, please contact your dedicated Customer Success Manager (CSM) or use the chat feature in the SocialLadder Admin Web Portal.

Conclusion

By following these steps, you will have successfully updated or installed the new SocialLadder integration for Shopify. This ensures continued tracking functionality after Shopify deprecates the “Additional Scripts” feature.

Installing the SocialLadder Shopify Integration for Link-Based Tracking