Custom Shopify Themes and `productDetailView` data layer event

❗️

Data Layer 1.0. has been depreciated

Please follow our upgrade guide to update to our latest version.

Elevar's Tag Management Suite relies on the DOM to push specific events into the data layer. Our solution has been customized across thousands of clients and works on most themes, but there are scenarios where the customizations to a theme require manually updating code to get things working. This is most commonly seen with non-standard swatch implementations that show, for example, size and color.

On product pages, we send a productDetailView data layer event when the user changes the variant that they are viewing. This event relies on the product form's select which allows specific variants to be added to the cart. The select is required for the add to cart event to function as expected.

Certain implementations of swatches utilize custom HTML to display for example size and color icons. When the user updates their selection, the swatch customization will typically update the product add to cart form's select so that the user can click add the currently selected variant to their cart.

Occasionally, the select will be changed without firing the change event which is necessary for us to know when a specific variant was selected. Below is an example of updating the select without firing the change event.

With jQuery

jQuery('form[action^="/cart/add"] select[name="id"]').val(variantId);

Below shows an example of how you could accomplish this with jQuery.

jQuery('form[action^="/cart/add"] select[name="id"]').val(variantId).trigger('change');

Native Javascript
If not using jQuery the code may look something like this:

document.querySelector('form[action^="/cart/add"] select[name="id"]').value = variantId;

document.querySelector('form[action^="/cart/add"] select[name="id"]').dispatchEvent(new Event('change'));

Elevar's dataLayer works for >95% of Shopify themes, and we are always making improvements to account for as many themes, apps, and customizations as possible. We hope this article helps those who have themes that the dataLayer does not work out of the box for!