Skip to main content
All CollectionsFor Server Side
Server-Side Experimentation in Shopify
Server-Side Experimentation in Shopify
Updated over 9 months ago

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 .... -%}

Did this answer your question?