Background
This is a unique integration of Webtrends Optimize with Shopify, allowing users to quickly utilise feature-flags in their Liquid Templates code. The method works for all versions of Shopify, including Starter/Basic through to Plus.
Shopify’s Liquid Templates are the only back-end code that users have access to, and it’s only a templating language. Users are not able to perform actions like making HTTP requests – things which traditional server-side testing requires.
Webtrends Optimize have built a novel integration with Shopify, allowing you to leverage Liquid code to build your experiments, but still using Webtrends Optimize as the decisioning and reporting engine.
Known limitations
The Liquid Templates will not have data available on the first page load.
Understood Benefits
Access to otherwise inaccessible code for experimentation.
Zero latency.
Getting started
Creating the feature flag
In your variation code, you can send data to shopify when someone falls into your variation:
let attributes = {
test_identifier: "variation"
};
fetch(window.Shopify.routes.root + 'cart/update.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ attributes })
})
.catch((error) => {
console.error('Error:', error);
});If you do this in at least your variation, you'll then be able to read the flag in liquid templates.
Note: This is not appropriate for Split tests, where we're looking to redirect the user immediately to another page.
Reading / using the feature flag in Liquid Templates
You can use code similar to this in your liquid template.
{%- if cart.attributes.homepage_usp == "variation" -%}
<div>Some content to only show if you're in the test. < /div>
{%- endif -%}
You will also need to send pageviews to Optimize manually, and so the full code will look somewhat similar to:
{%- if cart.attributes.homepage_usp == "variation" -%}
<div>Some content to only show if you're in the test.</div>
<script>
window.opt_data = window.opt_data || [];
opt_data.push({
event: "pageview",
testAlias: "ta_123"
});
</script>
{%- endif -%}
You are also able to not show content based on the same feature-flag using != or else.
Together, this will allow you to either:
Introduce some new content if users are in your test
Swap out content based on which variation users fall into
Advanced Experimentation with Segmentation
Let’s say you want to display a message saying “Spend £50 for free delivery” if:
The user is in your variation
The user is an existing customer
Other conditions, like basket value
We can achieve this with Webtrends Optimize, and refined use of Shopify’s Liquid Templates:
{%- if cart.attributes.homepage_usp == "variation" and customer and ... other checks .... -%}