Learn how to expose a JavaScript variable on Shopify product pages, allowing Justuno to target key product details for better visitor segmentation.
On this page:
Introduction
Implementation
Breakdown of Variables
Example Workflow Triggers
Introduction
Justuno allows you to create powerful workflow enrollment triggers based on JavaScript variables exposed in your Shopify theme. This guide explains how to create JavaScript window variables using Shopify’s Liquid product object to pass key product data into Justuno.
Implementation
To expose Shopify product data as JavaScript window variables, add the following code snippet inside your Shopify theme’s <head> or <footer> section (e.g., theme.liquid file) or in the respective product.liquid file.
{% if product %}<script>
window.justunoShopifyProduct = {
id: {{ product.id | json }},
title: {{ product.title | json }},
handle: {{ product.handle | json }},
brand: {{ product.vendor | json }},
tags: {{ product.tags | json }},
collections: "{% for collection in product.collections %}{{ collection.title | json }}{% unless forloop.last %},{% endunless %}{% endfor %}",
price: {{ product.price | money_without_currency | json }},
compare_at_price: {{ product.compare_at_price | money_without_currency | json }},
metafields: {
{% for namespace in product.metafields %}
{% for key in namespace[1] %}
"{{ namespace[0] }}.{{ key[0] }}": {{ key[1] | json }}{% unless forloop.last and forloop.parentloop.last %},{% endunless %}
{% endfor %}
{% endfor %}
}
};
</script>{% endif %}
Breakdown of Variables
- id: The unique ID of the product.
- title: The name of the product.
- handle: The product’s unique URL slug (used for building URLs like /products/{handle}).
- brand: The product vendor (brand).
- tags: An array of product tags.
- collections: An array of collections the product belongs to.
- price: The product’s current price (without currency).
- compare_at_price: The original price (if a discount is applied).
- metafields: A key-value object of all product metafields, dynamically pulled from Shopify.
Examples of Justuno Workflow Segment Filters Utilizing The Above Variables
- This following example targets product pages with the product name containing "Leopard Print Pants"
- This following example targets product pages in at least the "Pants" collection
- This following example targets product pages where the current price is less than $100
