Shopify Source Upgrade Guide

Follow this guide to bring your Shopify Source to date.

If you are not on the latest version of our Shopify Source, 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

  1. If applicable, remove any previous Elevar scripts from your checkout settings. Navigate to 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. Configure the Customer Privacy settings in Shopify (note: 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").
  6. Paste the code from the above into the "Code" input box, click "Save", then "Connect".
  7. Return to the Elevar App, and select Mark as Complete

🚧

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.

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 useful 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, elevar-checkout-script, and elevar-body-end.

Return to the Elevar app and select Mark as Complete

Install App Theme Embed

Already on App Theme Embed

If you've already migrated your theme code to Elevar's App Theme Embed, then you will see the below screen:

This means you are done & fully up to date! You can stop here.

Not Yet on 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.

If you are triggering client-side tags on a proceed to checkout button click, upgrade them to use our dl_begin_checkout datalayer event as the trigger.

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!