Shopify Source Upgrade Guide

Follow this guide to upgrade from previous versions of our data layer to App Theme Extensions. This version was introduced in Q3 of 2023.

When logging into the Elevar App you'll see the following introduction to our Simplified source. Click Continue to My Tracking

Rest assured your existing tracking is still up and running. You can continue to edit any of your existing destinations as needed. When you are ready to Upgrade

Watch a video walkthrough of the upgrade

Prefer to watch a video? View a walkthrough of the upgrade process!

Start Upgrade

Select the Go to Upgrade button.

Select Start Upgrade

You'll see this Heads Up message. If this applies to you, go to the Learn more. Before proceeding.

If you are not a headless store or any customizations proceed by clicking the Continue button

Configure Checkout Script

Which Checkout Script you use will depend on if you are on Shopify's Thank you and Order Status Page Extensibility.

You can check if you are on Thank You and Order Status Page Extensibility in Shopify by navigating to Settings > Checkout. If you see both green checkmarks selected, you are on Shopify's Thank you and Order Status Page Extensibility. If you only see the Checkout box selected or you don't see this option at all, you are not on Shopify's Thank you and Order Status Page Extensibility.

I'm not on Shopify's Thank you and Order Status Page Extensibility

In this case, you'll use the Order Status Page additional scripts box to load your Thank You page tracking.

Follow the steps on the Configure Order Status Page step:

1. Copy the code by clicking the Copy to Clipboard button
2. Open your Checkout Settings by clicking the link in app, or navigate within Shopify by going to Settings > Checkout
3. Scroll to the Order Status Page section and find the Additional Scripts box. Remove any previous Elevar scripts.
   • Example Elevar DataLayer Script you may have installed previously **[to be removed]**
   • Example Elevar Listener Script you may have installed previously **[to be removed]**
4. Paste the code copied in Step 1.
5. Click Save in Shopify
6. Return to the Elevar App, and select Mark as Complete

My Thank You and Order Status Pages are on Checkout Extensibility

If your Thank You and Order Status Pages are on Checkout Extensibility, then the only way you can load tracking is via Shopify's Customer Events setting.

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.

Knowing these limitations, if you'd still like to proceed with using Shopify's Customer Events setting, follow the below steps to set up your checkout tracking:

1. If possible, remove any previous Elevar scripts from Shopify's Settings > Checkout > Order Status Page Additional Scripts box. (to prevent duplicate tracking should you revert from Thank You Extensibility).
2. Copy the code by clicking the Copy to Clipboard button
3. Open your Customer Events Settings by clicking the link in app, or navigate within Shopify by going to Settings > Customer Events
4. Click "Add a custom pixel" and name it "Elevar - Checkout Tracking". (If you don't already have a "Elevar - Checkout Tracking" custom pixel).
5. Paste the code from the above into the "Code" input box, click "Save", then "Connect":
6. Return to the Elevar App, and select Mark as Complete

Make a Copy of your theme [optional]

We trust you won't have any issues making these next updates, but you may feel more comfortable making a duplicate of you theme as it is. This can be use full should you need to revert back to your previous setup.

Go to your theme and click Duplicate

Shopify will create a duplicate that begins with "Copy of". Leave this copy as is or rename if you chose and proceed to the next step.

Delete Legacy Elevar Snippets

Go to your live theme and click “Edit code”:

Go to the Layout folder. Within each of your layouts, search for "elevar" and remove any render snippets containing "elevar", then save your changes. All customers will have a theme.liquid file, but our snippets could also exist in checkout.liquid, theme.shogun.landing.liquid etc., so be sure to check all layouts.

Go to the Snippets folder. Delete the following snippets if you have them: elevar-head, elevar-head-listener, elevar-checkout-end, and elevar-body-end.

Return to the Elevar app and select Mark as Complete

Install App Theme Embed

Review the Final Step, when you are ready select the Go to Shopify button.

Our app embed will be installed, but you'll need to go to Shopify to and enable.

By default this step will convert your checkout funnel tracking steps from web tracking to server-side action based events. This is in response to Shopify retiring the checkout.liquid for Shopify Plus stores. If you did not previously have server-side checkout funnel events for a non-plus store or checkout extensibility, you'll now have checkout funnel tracking!

If you are triggering client-side tags on a proceed to checkout button click, uncheck this checkbox to prevent duplicate tracking, or pause your client side tracking and begin tracking with server-side checkout events.

If you use a code repository, follow our guide, Remove Legacy Elevar Snippets from your Code Repository.

Activate the App Embed in Shopify

When you click the Go to Shopify button from above you'll be transferred into Shopify to your Live theme customizations. Your App embeds will be filtered to the newly installed Elevar Data Layer. This will already be enabled for you, you'll just need to Save to have our Data Layer installed!

Select Save

Confirm your App Embed is enabled

You'll know you've enabled the App Embed code when you return to our App and see the following:

If you need to make this update to additional themes follow this guide, Remove Legacy Elevar Code Snippets. Next, manually activate the App Embed in Shopify for that theme by repeating the Activate the App Embed in Shopify Step.

Review your Destinations

Now is great time to review your existing destinations and update your web tags or add new server-side destinations.

When you return to your My Tracking page in the Elevar review you Destinations and check for any new server-side destinations you may not have setup in the Add Destination drop down in the upper right.

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 above 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, I would recommend updating the entire file to match your live theme.

That's it. You're up to date!