Skip to main content

Adding the Compose Snippet to a Shopify Store

There are two methods to add the Compose script to your Shopify store: manual script placement and using the Compose Shopify App. We recommend manually placing the script tag in your theme for better performance.

Method 1: Manual Script Placement (Recommended)

This method offers better performance and is the recommended approach.

Prerequisites:

  1. You have completed the Compose onboarding process.
  2. You have created at least one project in your Compose organization.

Steps to Manually Add the Compose Script

  1. Log in to your Compose dashboard.
  2. Go to your project settings.
  3. Navigate to the "Snippets" section.
  4. Under 'Tracking Code', copy the provided script tag. (You can ignore the Advanced Tracking code)
  5. Log in to your Shopify admin panel.
  6. Go to "Online Store" > "Themes".
  7. Find your current theme and click "Actions" > "Edit code".
  8. In the theme editor, locate the theme.liquid file (usually under "Layout").
  9. Find the closing </head> tag in the file.
  10. Just before the </head> tag, paste the Compose script tag you copied in step 4.
  11. Click "Save" to apply the changes.

Important Notes

Method 2: Using the Compose Shopify App

This is our no code solution to make setup and test creation more approachable. While this method is easier to set up, it may result in slower performance compared to manual script placement.

Prerequisites:

  1. Your Compose organization is linked to your Shopify store.
  2. You have completed the Compose onboarding process.
  3. You have created at least one project in your Compose organization.
  4. You have at least one project with the 'Active Shopify Project' setting enabled in your Compose organization.
  5. More info on linking your Compose to you Shopify store here 

With these prerequisites met, Shopify will simply require you to activate the Compose App Block. 

  1. Log in to your Shopify admin panel.
  2. Navigate to "Online Store" > "Themes".
  3. Find your current theme and click "Customize".
  4. In the theme editor, click on "App embeds" in the left sidebar.
  5. Look for the Compose app embed block and enable it.
  6. Click "Save" to apply the changes.

Important Notes

  • Only one project can be set as the 'Active Shopify Project' per Compose organization. Learn more
  • The app block will use the injection script from the project marked as 'Active Shopify Project'.
  • If you change which project is marked as 'Active Shopify Project' in Compose, the app block will automatically update to use the new project's script.

Revenue Tracking Snippet

Method 1: Manual Script Placement (Recommended)

If you are using Shopify, Compose will require the 'Shopify Usage' Code in conjunction with the regular tracking code to track revenue. You can find it under the 'Advanced Usage' snippet in the Project Settings.

Screenshot 2024-06-23 at 2.40.22 PM.png

This will be saved as a pixel. To get to 'Pixels' in Shopify, go to your Shopify Settings at the bottom of the left side bar:

From settings, click on ‘Customer events’ and select `Add custom pixel`: 

You can name this custom pixel whatever you would like, such as "Compose Revenue Tracking" then select `Add pixel`

Now you can edit your new custom pixel. Under `Permission`, you can leave just "Analytics" toggled on.

Under `Code`, you can now paste in the 'Shopify Usage' snippet that was found in your project settings.

Select `Save` at the top. This will now let you select `Connect` at the bottom. Shopify will ask you one more time to connect this `custom pixel`. Once you approve, Compose can now securely track revenue analytics on your store!

 

Method 2: Compose Shopify App

If you are using the Compose Shopify App, revenue tracking is on by default. You can toggle this off by visiting your Organization settings

 

If you want to track revenue but are not using Shopify, you can use this code snippet. It will need to be positioned to fire when revenue-based events happen, but the specifics will depend on what platform you're using. If you need help with revenue tracking, contact us for assistance. 

<script>
  window.compose = window.compose || {
    queue: [],
    dispatchEvent(event) {
      this.queue.push(event);
    },
  };
  window.compose.dispatchEvent(
    new CustomEvent("goal:revenue", {
      detail: {
        value: passCheckoutSubtotalsHere,
      },
    })
  );
</script>

 

Recommendation

We recommend using Method 1 (Manual Script Placement) for optimal performance. The app block method, while convenient, may lead to slower load times for your Shopify store.

If you encounter any issues with either method, please contact Compose support for assistance.

Was this article helpful?