Shopify Source Version

• If you are not on the latest version of our Shopify Source, you'll see the following introduction to our Simplified source when logging into the Elevar App
  • Rest assured your existing tracking is still up and running. You can continue to edit any of your existing destinations as needed
• Click on the "Continue to My Tracking" button in the bottom left-hand corner of the pop-up window
  • (See Figure 1)

Figure 1

Start Upgrade

Accessing My Tracking:

• Begin on your Elevar homepage.
  • Using the left-hand menu manager, click on the "My Tracking" tab.
• Locate your Shopify Source and click on the button labeled "Go to Upgrade".
  • (See Figure 2)

Figure 2

• Once in the Shopify Source, navigate to the "Overview" tab of the Setup Steps.
• Click on the "Start Upgrade" button at the bottom of this section.
  • (Figure 3)

Figure 3

🚧

Heads Up Message:

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

If this message applies to you, learn more before proceeding.

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

Configure Checkout Script

• If applicable, remove any previous Elevar scripts from your checkout settings.
  • Navigate to your Shopify's Settings. Next, click on the "Checkout" button and navigate to the "Order Status Page Additional Scripts box" section. This is to prevent duplicate tracking should you revert from Thank You Extensibility.
• Copy the code by clicking the "Copy to Clipboard" button.
• Open your "Customer Events" settings by clicking the link in the Elevar app, or navigate within Shopify by going to Settings and then navigating to Customer Events.
  • Click "Add a custom pixel" and name it "Elevar - Checkout Tracking" as long as you don't already have an "Elevar - Checkout Tracking" custom pixel.
  • 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").
  • Paste the code from the above into the "Code" input box, click "Save", then "Connect".
• Return to the Elevar App, and select the "Mark as Complete" button.

🚧

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.

(Optional): Make a Copy of your Theme

• We trust you won't have any issues making these next updates, but you may feel more comfortable making a duplicate of your theme as it is. This can be useful should you need to revert back to your previous setup.
• Within Shopify, navigate to your Online Stores. Then use the left-hand menu and click on the "Themes" tab.
  • Locate the "Customize" button and click on the three dots to the left of it. Click on the "Duplicate" button from the drop-down menu.
  • Shopify will create a duplicate that begins with "Copy of". Leave this copy as is or rename it if you choose and proceed to the next step.
  • (See Figure 4)

Figure 4

Delete Legacy Elevar Snippets

• Within Shopify, navigate to your Online Stores. Then use the left-hand menu and click on the "Themes" tab. Ensure that you are on your current live theme.
  • Locate the "Customize" button and click on the three dots to the left of it. Click on the "Edit Code" button from the drop-down menu.
  • (See Figure 5)

Figure 5

• 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.
  • (See Figure 6)

Figure 6

• Go to the Snippets folder. Delete the following snippets by clicking on the "trash can" icon if you have them: elevar-head, elevar-head-listener, elevar-checkout-end, elevar-checkout-script, and elevar-body-end.
  • (See Figure 7)

Figure 7

• Return to the Elevar app and click on the "Mark as Complete" button at the bottom of the page.
  • (See Figure 8)

Figure 8

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 a notification that reads "Detected on Live Theme".
• This means you are done & fully up to date! You can stop here.
  • (See Figure 9)

Figure 9

Not Yet on App Theme Embed:

• Review the Final Step, when you are ready select the "Go to Shopify" button.
  • (See Figure 10)
• Our app embed will be installed, but you'll need to go to Shopify to enable it.
• 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.

(Figure 10)

Activate the App Embed in Shopify

• When you click the "Go to Shopify" button, you'll be transferred into your Shopify 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!
    • Click on the "Save" button in the upper right-hand corner of the page.
    • (See Figure 11)

Figure 11

Confirm your App Embed is enabled:

• You'll know you've enabled the App Embed code when you see a notification that reads "Detected on Live Theme".
  • (See Figure 12)
• 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.

Figure 12

Review your Destinations

• Now is a 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 your Destinations. Check for any new server-side destinations you may not have set up in the "Add Destination" drop-down in the upper right.
  • (See Figure 13)

Figure 13

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.

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