> ## Documentation Index
> Fetch the complete documentation index at: https://docs.codeqr.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify

> Learn how to track sale conversion events with Shopify and CodeQR

<Note>
  Conversion tracking require a [Business plan](https://codeqr.iopricing)
  subscription or higher.
</Note>

When it comes to [conversion tracking](/conversions/quickstart), a `sale` event happens when a user purchases a product from your Shopify store.

<Frame>
  <img className="rounded-lg border border-gray-100" src="https://mintcdn.com/codeqr/Dit-PkrrSHQLOViA/images/shopify-conversion-tracking.png?fit=max&auto=format&n=Dit-PkrrSHQLOViA&q=85&s=84e1c8f39bbe806e3df036b9796778bc" alt="A diagram showing how lead events are tracked in the conversion funnel" width="1387" height="694" data-path="images/shopify-conversion-tracking.png" />
</Frame>

In this guide, we will be focusing on tracking sale events from Shopify by leveraging CodeQR's Shopify integration.

<iframe width="100%" height="469px" className="rounded-xl" src="https://www.loom.com/embed/936970b8db5b41488657fa92ffec384a?sid=04030975-6d7e-4126-8487-a1d9a3095efc" title="Loom video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

## Step 1: Enable conversion tracking for your links

First, you'll need to enable conversion tracking for your CodeQR links to be able to start tracking conversions.

There are a few ways to do this:

1. [On a project-level](/conversions/quickstart#option-1-on-a-project-level)
2. [On a link-level](/conversions/quickstart#option-2-on-a-link-level)
3. [Via the API](/conversions/quickstart#option-3-via-the-api)

## Step 2: Install the CodeQR Shopify app

<Steps>
  <Step title="Install the Shopify app">
    Install the [CodeQR Shopify App](https://d.to/shopify/app) from the App Store.

    <Frame>
      <img src="https://mintcdn.com/codeqr/Dit-PkrrSHQLOViA/images/shopify/shopify-app.png?fit=max&auto=format&n=Dit-PkrrSHQLOViA&q=85&s=f50dff178b821e8f528e069bab713c19" alt="The connection status in the CodeQR Conversions app" width="2462" height="1470" data-path="images/shopify/shopify-app.png" />
    </Frame>
  </Step>

  <Step title="Connect Shopify to your CodeQR project">
    After installation, you will be prompted to link one of your CodeQR projects to
    the app. Select **Connect** to establish a connection between your
    Shopify store and your CodeQR project.

    You'll be redirected back to your Shopify store after this step and you'll see a list of the links in your CodeQR project:

    <Frame>
      <img src="https://mintcdn.com/codeqr/Dit-PkrrSHQLOViA/images/shopify/shopify-links-table.png?fit=max&auto=format&n=Dit-PkrrSHQLOViA&q=85&s=e13a7875e58ef3d65ecc761dbb5fd031" alt="The list of links in your CodeQR project" width="1480" height="810" data-path="images/shopify/shopify-links-table.png" />
    </Frame>

    With the Shopify app, you can also create [conversion-enabled links](/conversions//quickstart#step-1-enable-conversion-tracking-for-your-links) directly from your Shopify store:

    <Frame>
      <img src="https://mintcdn.com/codeqr/Dit-PkrrSHQLOViA/images/shopify/shopify-create-link.png?fit=max&auto=format&n=Dit-PkrrSHQLOViA&q=85&s=3783502cf3b664bcd3df499566da7c19" alt="Create a conversion-enabled link from your Shopify store" width="1480" height="810" data-path="images/shopify/shopify-create-link.png" />
    </Frame>

    If you want a more powerful link builder, you can also use the [CodeQR Link Builder](https://codeqr.io/help/article/codeqr-link-builder) to create conversion-enabled links.
  </Step>

  <Step title="Activate CodeQR Analytics Script">
    After installing the CodeQR Shopify app, the CodeQR Analytics script is added as an app embed. However, it needs to be activated manually to ensure it is included in your current theme.

    To activate the CodeQR Analytics script, follow these steps:

    1. Navigate to your Shopify admin panel.
    2. Go to **Online Store** > **Themes**.
    3. Click on **Customize** for your current theme.
    4. In the theme editor, select the **App embeds** tab.
    5. Locate the **Analytics Script** for the CodeQR Shopify app and toggle it to activate.

    <Frame>
      <img src="https://mintcdn.com/codeqr/Dit-PkrrSHQLOViA/images/shopify/shopify-enable-tracking-script.png?fit=max&auto=format&n=Dit-PkrrSHQLOViA&q=85&s=f038112ff6fa16ea34eaff0a2d6652b6" alt="Enable the CodeQR Analytics script in your Shopify theme" width="1412" height="983" data-path="images/shopify/shopify-enable-tracking-script.png" />
    </Frame>
  </Step>
</Steps>

<Tip>
  CodeQR’s Shopify integration will automatically forward the following events to CodeQR:

  * `orders/paid`: This event is triggered when a customer completes a purchase on your Shopify store. It is utilized to track sales that originate from CodeQR links.
  * `app/uninstalled`: This event occurs when the app is uninstalled from a store. It is used to remove the integration from your CodeQR project.

  In addition to the above, we also subscribe to the mandatory compliance webhook topics that are required by Shopify.
</Tip>

## Step 3: View conversion results

And that's it – you're all set! You can now sit back, relax, and watch your conversion revenue grow. We provide 3 different views to help you understand your conversions:

* **Time-series**: A [time-series view](https://codeqr.io/help/article/codeqr-analytics#1-time-series-analytics-chart) of the number clicks, leads and sales.

<Frame>
  <img src="https://mintcdn.com/codeqr/Dit-PkrrSHQLOViA/images/conversions/timeseries-chart.png?fit=max&auto=format&n=Dit-PkrrSHQLOViA&q=85&s=c7bac376603cd71f967f5f7b33f3cadc" alt="Time-series line chart" width="1600" height="900" data-path="images/conversions/timeseries-chart.png" />
</Frame>

* **Funnel chart**: A funnel chart view visualizing the conversion & dropoff rates across the different steps in the conversion funnel (clicks → leads → sales).

<Frame>
  <img src="https://mintcdn.com/codeqr/Dit-PkrrSHQLOViA/images/conversions/funnel-chart.png?fit=max&auto=format&n=Dit-PkrrSHQLOViA&q=85&s=001b9b2dad0f759c4031d81122069a75" alt="Funnel chart view showing the conversion & dropoff rates from clicks → leads → sales" width="1600" height="900" data-path="images/conversions/funnel-chart.png" />
</Frame>

* **Real-time events stream**: A [real-time events stream](https://codeqr.io/help/article/real-time-events-stream) of every single conversion event that occurs across all your links in your project.

<Frame>
  <img src="https://mintcdn.com/codeqr/Dit-PkrrSHQLOViA/images/conversions/events-table.png?fit=max&auto=format&n=Dit-PkrrSHQLOViA&q=85&s=93b55a350e472e6d7fbafa7e082bbc69" alt="The Events Stream dashboard on CodeQR" width="1600" height="900" data-path="images/conversions/events-table.png" />
</Frame>

## Currency conversion support

For simplicity, CodeQR records all sales in the native currency of the Shopify store. For example, if you're using USD for your Shopify store, CodeQR will record all sales in USD – even if your customers are paying in a different currency.

```json orders/paid theme={null}
// Shopify orders/paid event payload
// @see: https://shopify.dev/docs/api/webhooks?reference=toml#list-of-topics-orders/paid
{
  ...
  "current_subtotal_price_set": {
    "shop_money": {
      "amount": "398.00", // this is the amount that CodeQR will record
      "currency_code": "USD" // this is the currency of your Shopify store
    },
    "presentment_money": {
      "amount": "572.25",
      "currency_code": "CAD"
    }
  },
  ...
}
```
