Shopify integration

You can integrate the Adjust Smart Banner SDK into Shopify to distribute smart banners via Shopify tags. Follow the steps in this guide to set this up.

Integrate the SDK in Shopify

  1. Navigate to your store admin tools at https://admin.shopify.com.
  2. Select Online Store → Themes.
  3. Select the three dot menu () on your active theme and select Edit code.
  1. Find and open the theme.liquid file.
  2. Add the SDK loading snippet inside the theme’s <head></head> tags.

  1. Scroll down to the theme’s <body> tag and enter your SDK initialization call. This call must include an appToken. Check out the SDK initialization options to configure the SDK using the init method.

    <!-- Adjust Smart Banner SDK -->
<div id="AdjSbRoot"></div>
<script>
AdjustSmartBanner.init({
   appToken: "YOUR_TOKEN",
   logLevel: "verbose",
   bannerParent: document.getElementById("AdjSbRoot"),
});
</script>
<!-- Adjust Smart Banner SDK -->
  1. Save your changes.
Note:
The snippet in this example adds a new divider with the ID AdjSbRoot. This divider is used as the parent of the smart banner. You should set this to prevent the Shopify header from overlaying the smart banner. You can apply styles to the banner parent or choose a different parent element. If you don’t add a parent element, the smart banner attaches to document.body.