Overview

Follow this guide to learn how to update your Shopify Source in the Elevar app.

Why Update?

• Track Checkout Events: Get a better understanding of your shoppers' entire journey, including the checkout funnel. You will be able to track checkout events, both client and server side.
• Differentiate New v.s. Returning Customer Data: Send accurate new v.s. returning data with every order, including offline orders when using post purchase upsells, and when on Checkout + Thank you Extensibility.
• Shopify 2024 & 2025 Compatibility: Future proof your checkout tracking for when Shopify depreciated checkout.liquid (August 2024) and the order status page additional scripts box (August 2025).

Shopify Source Update

Access Shopify Source:

• Begin on your Elevar homepage and use the left-hand menu manager to click on the "My Tracking" tab.
• Locate your Shopify Source and click on the "Go to Update" button.
  • (See Figure 1)

Figure 1

Start Update:

• Once in the Shopify source, navigate to the "Overview" tab of the Setup Steps.
• Once you have read the Shopify source update and integration notes, click on the "Start Upgrade" button located at the bottom of this section.
  • (Figure 2)

Figure 2

🚧

Heads Up Message:

After clicking on the "Start Upgrade" button, an additional pop-up window will appear titled "Heads Up" will appear.

If you have added event tracking to your checkout.liquid as described in this guide, you will need to remove it to avoid duplicate tracking. Follow this guide to learn more.

If you have customized your purchase event, you will need to update those customizations to be compatible with the Custom Pixel. Follow this guide to learn more.

Configure Checkout Script:

• After clicking on the "Start Update" button, you will be prompted to configure the Custom Pixel.
  • If applicable, remove any previous Elevar scripts from your checkout settings before continuing. This is to prevent duplicate tracking should you revert from Thank You Extensibility. Follow this guide to learn how to remove legacy Elevar snippets from your code repository.
• Navigate to the section of the page titled "Configure Custom Pixel" and click on the "Copy to Clipboard" button.
• Once you have copied the code, open your "Customer Events" settings admin page in Shopify by clicking on the provided link.
  • (See Figure 3)

_Figure 3_

Add Custom Pixel:

• Once you have accessed the Customer Events settings admin page, click on the "Add a custom pixel" button located in the upper right-hand corner of the page.
  • An additional pop-up window will appear. Use the text-box to name the custom pixel "Elevar - Checkout Tracking". If this name has already been taken for another custom pixel, you may need to enter a different pixel name.
  • Configure the Customer Privacy settings. If your CMP doesn't integrate with Shopify's Customer Privacy API or you don't use a CMP at all, tracking may not fire for users in GDPR countries. If this is the case, you can set this setting to "not required".
  • Navigate to the section of the page titled "Code" and paste the code that you copied from the app. Click on the "Save" button located at the top of the page, then click on the "Connect" button located in the upper right-hand corner of the page.
    • (See Figure 4)
• Once you configured the Custom Pixel, return to the Elevar App. Click on the "Mark as Complete" button located at the bottom of the section.

_Figure 4_

🚧

Known Limitations of Shopify's Customer Events

As a heads up, using Shopify's Customer Events setting has two known limitations:

• The client-side new vs returning user data only populates if a shopper is logged in. Upgrade your app (instructions) to prevent this limitation from affecting your server-side tracking. Any Google Tag Manager tags that fire based on if a shopper is a new vs returning will still be affected by this limitation.
• It is not possible to trigger tags based on one time vs subscription products on a unified checkout as these steps outline.

Delete Legacy Elevar Scripts:

• Open your "Checkout" settings admin page in Shopify by clicking on the provided link. Navigate to the section of the page titled "Order status page additional scripts".
• If you have an Elevar script included in your Additional Scripts, remove the script before continuing. If the input is disabled, you can continue forward with this guide.
• Once you have deleted legacy scripts, return to the Elevar app and click on the "Mark as Complete" button at the bottom of the page.
  • (See Figure 5)

Figure 5

Confirm App Theme Embed:

• Once you have deleted legacy Elevar scripts, navigate to the "Overview" page where you will need to confirm your app theme embed is installed and detected live on your theme.
  • Enabled App Theme Embed: If you've already migrated your theme code to Elevar's App Theme Embed, then you will see a notification that reads "Detected on Live Theme". This means you fully up to date and you can stop here.
  • Not Yet on App Theme Embed: Navigate to the "Overview" page and click on the "Go to Shopify" button. Ensure that the Elevar app theme embed is enabled in your Shopify store. Follow this guide to learn how to enable the Elevar app theme embed.
• If you see a "Detected on Live Theme" message located at the top of this overview page, then you are all set!
  • (See Figure 6)

_Figure 6_

Review your Destinations:

• Once you have completed the Shopify source update, it is a great time to review your existing destinations and update your web tags.
  • Shopify's new Customer events Tracking changes the way data is available, which means that this update will impact your web tracking event customizations for new v.s. users.
  • If you have web tracking events for one time v.s. subscriptions, keep your destinations working as expected by re-importing their web containers after updating the Shopify source.

Post Purchase Upsells

• If you have post-purchase upsells that occur between completing the payment and the thank you page follow our guide on how to track post-purchase upsells.

Code Repositories

• If you are using a code repository you may have additional updates to you make. Reach out to your dev team for help if you are unsure how to make these updates.

Remove the Elevar Snippets and References from your Code Base:

• If your code repo does not automatically pull updates from your live theme into the repo you'll need to manually repeat removing the Elevar snippets as referenced in the Delete Legacy Elevar Snippets Step.

Update your Code Repo to Ensure the App Theme Embed Stays Enabled:

• You only need to complete this step if your settings_data.json file is included in your repo, and your code repo does not automatically pull updates from your live theme into your repo.
• Your settings_data.json file now contains this block to enable your Elevar Configurations via the App Theme Embed.
  • It is important that this block is included in your settings_data.json file and the disabled value is set to false. If you include your settings_data.json file in your code repo, we recommend updating the entire file to match your live theme.