Elevar Snippets (Data Layer) Reference

🚧

This guide is depreciated and only relevant for legacy versions before 3.9 and the introduction of our unified Shopify Source and App Theme Extensions

Learn more here

This article contains three Scenarios

Scenario 1: Elevar team has installed the data layer on a backup/duplicate theme for you and sent you this doc for an overview of what files were added/modified

Scenario 2: You or your team is managing the complete integration of the Data Layer into your theme (or you have modified Elevar dataLayer).

Scenario 3: You or your team is changing a different new theme

Elevar Team Installed/Updated the Theme for you

If you've received this guide from the Elevar team to provide an overview of what files have been added to a theme so your developers can check into Github, this is how our installation works.

And these snippets are rendered/nested into each theme layout:

📘

Note: If the store is not on Shopify Plus then we've copied our dataLayer into the checkout > order status page > additional script box settings since you don't have access to the checkout.liquid.

In the Theme.liquid Layout

1. Render the elevar-head and elevar-head-listener after the tag, as shown below:

2. Render the elevar-body-end immediately after the opening , as shown below:

For Shopify Plus Store Only (in the checkout.liquid Layout)

1. Render the elevar-head and elevar-head-listener after the tag, as shown below:

2. Render the elevar-checkout-end immediately after the opening , as shown below:

Your Team Is Handling Installation

If your developers use version control (like Github) and need to check these into your codebase then we recommend completing the steps below to prevent your data layer from accidentally being removed from production.

Ensure these steps are followed closely and completed at the same time:

1. In Shopify make a duplicate of your production theme and then publish this duplicate theme
2. In the Elevar App go to My Tracking, Select the Data Layer from the Sources, Go to the Install on Store step, Click "Install" or "Reinstall" button.
3. In the Elevar App go to My Tracking, Select the Data Listener from the Sources, Go to the Install on Store step, Click "Install" or "Reinstall" button.
4. In Shopify go back to your previous theme that was live and re-publish
5. Inform your developers the duplicate theme that is now unpublished contains the Elevar snippets and updates to theme.liquid and checkout.liquid
6. Pull the following updates into your codebase
   Added Snippets:
   + elevar-head.liquid
   + elevar-head-listener.liquid
   + elevar-body-end.liquid
   + elevar-checkout-end.liquid
   Changes to the theme.liquid:
   + {% render 'elevar-head-listener' %}
   + {% render 'elevar-head' %}
   + {% render 'elevar-body-end' %}
   Changes to the checkout.liquid (if applicable):
   + {% render 'elevar-head-listener' %}
   + {% render 'elevar-head' %}
   + {% render 'elevar-checkout-end' %}

Or you can email the instructions to your Developers directly.

1. In the Elevar App go to My Tracking
2. Select the Data Layer from the Sources
3. Go to the Install on Store step
4. Click the Notify Developers button
5. Enter your developers email, or your own if you want to forward to your developers.

You or your team is moving to a new theme

See Scenario 1 above, copy each snippet into the new theme, and follow how they are being rendered in the theme layout. That's it!