What is Liquid? Open Source Templating by Shopify

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" />  <title>What is Liquid? Open Source Templating by Shopify | Consent Kit</title> <meta name="generator" content="Jekyll v4.2.2" /> <meta property="og:title" content="What is Liquid? Open Source Templating by Shopify" /> <meta property="og:locale" content="en_GB" /> <meta name="description" content="This guide covers everything you need to know about Liquid, the open source templating language built by Shopify. Read more to get the most out of Consent Kit." /> <meta property="og:description" content="This guide covers everything you need to know about Liquid, the open source templating language built by Shopify. Read more to get the most out of Consent Kit." /> <link rel="canonical" href="https://consentkit.com/help/what-is-liquid" /> <meta property="og:url" content="https://consentkit.com/help/what-is-liquid" /> <meta property="og:site_name" content="Consent Kit" /> <meta property="og:image" content="https://consentkit.com/assets/images/opengraph/default-1200x630.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://consentkit.com/assets/images/opengraph/default-1200x630.png" /> <meta property="twitter:title" content="What is Liquid? Open Source Templating by Shopify" /> <meta name="twitter:site" content="@consentkit" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","dateModified":"2020-04-08T00:00:00+00:00","description":"This guide covers everything you need to know about Liquid, the open source templating language built by Shopify. Read more to get the most out of Consent Kit.","headline":"What is Liquid? Open Source Templating by Shopify","image":"https://consentkit.com/assets/images/opengraph/default-1200x630.png","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://consentkit.com/assets/images/logomark.svg"}},"url":"https://consentkit.com/help/what-is-liquid"}</script>  <link type="application/atom+xml" rel="alternate" href="https://consentkit.com/feed.xml" title="Consent Kit" /> <link rel="stylesheet" href="/assets/css/main.css" /> <link rel="icon" type="image/png" href="/assets/images/icons/favicon.png" /> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" integrity="sha256-qXBd/EfAdjOA2FGrGAG+b3YBn2tn5A6bhz+LSgYD96k=" crossorigin="anonymous"></script> <script type="text/javascript" src="/assets/js/bundle.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>  <script id="cookieyes" type="text/javascript" src="https://cdn-cookieyes.com/client_data/7a5afe69865ffdd2581d3820/script.js"></script>   <script> (function (h, o, t, j, a, r) { h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments); }; h._hjSettings = { hjid: 3266144, hjsv: 6 }; a = o.getElementsByTagName("head")[0]; r = o.createElement("script"); r.async = 1; r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv; a.appendChild(r); })(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv="); </script> <script> (function (ss, ex) { window.ldfdr = window.ldfdr || function () { (ldfdr._q = ldfdr._q || []).push([].slice.call(arguments)); }; (function (d, s) { fs = d.getElementsByTagName(s)[0]; function ce(src) { var cs = d.createElement(s); cs.src = src; cs.async = 1; fs.parentNode.insertBefore(cs, fs); } ce("https://sc.lfeeder.com/lftracker_v1_" + ss + (ex ? "_" + ex : "") + ".js"); })(document, "script"); })("bElvO73y5yGaZMqj"); </script> <script src="https://cdn.usefathom.com/script.js" data-site="TVDJIUYS" defer></script> <script> (function (ss, ex) { window.ldfdr = window.ldfdr || function () { (ldfdr._q = ldfdr._q || []).push([].slice.call(arguments)); }; (function (d, s) { fs = d.getElementsByTagName(s)[0]; function ce(src) { var cs = d.createElement(s); cs.src = src; cs.async = 1; fs.parentNode.insertBefore(cs, fs); } ce("https://sc.lfeeder.com/lftracker_v1_" + ss + (ex ? "_" + ex : "") + ".js"); })(document, "script"); })("bElvO73y5yGaZMqj"); </script> </head> <body> <a href="#content" class="sr-only">Skip to main content</a> <div class="relative bg-white"> <div class="container-xl"> <div class="flex justify-between items-center px-4 py-6 sm:px-6 md:justify-start md:space-x-10"> <div class="flex justify-start lg:w-0 lg:flex-1"> <a href="/" class="flex items-center"> <img class="h-4 sm:h-5" src="/assets/images/logo.svg" alt="Consent Kit logo" width="30" height="40" /> <h2 class="md:block text-lg ml-2 font-display font-medium"> Consent Kit <span class="text-green-500 ml-2">Help Docs</span> </h2> </a> </div> <div class="-mr-2 -my-2 md:hidden" data-controller="dropdown"> <button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-green-500" data-action="click->dropdown#toggle click@window->dropdown#hide" > <span class="sr-only">Open menu</span> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> </button> <div class="hidden absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden z-50" data-dropdown-target="menu"> <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50"> <div class="pt-5 pb-6 px-5"> <div class="flex items-center justify-between"> <div> <a href="/" class="flex items-center"> <img class="h-4 sm:h-5" src="/assets/images/logo.svg" alt="Consent Kit logo" /> <h2 class="md:block text-lg ml-2 font-display font-medium"> Consent Kit <span class="text-green-500 ml-2">Help Docs</span> </h2> </a> </div> <div class="-mr-2"> <button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-green-500" data-action="click->dropdown#toggle click@window->dropdown#hide" data-dropdown-id-value="mobile" > <span class="sr-only">Close menu</span>  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> </div> <div class="py-6 px-5"> <a href="/help" class="text-base font-medium text-gray-900 hover:text-gray-700 mb-3">Help centre home</a> </div> <div class="py-6 px-5"> <h4 class="mb-3 lg:mb-3 text-base font-display font-semibold text-green-500 tracking-wide uppercase">Get started</h4> <div class="grid grid-cols-2 gap-4"> <a href="/help/quick-start" class="text-base font-medium text-gray-900 hover:text-gray-700">Quickstart</a> <a href="/help/panels-quickstart" class="text-base font-medium text-gray-900 hover:text-gray-700">Set up your research panel</a> <a href="/help/brand-consent-forms" class="text-base font-medium text-gray-900 hover:text-gray-700">Brand your consent forms</a> <a href="/help/set-data-retention" class="text-base font-medium text-gray-900 hover:text-gray-700">Set data retention policy</a> <a href="/help/import" class="text-base font-medium text-gray-900 hover:text-gray-700">Import data from a spreadsheet</a> </div> </div> <div class="py-6 px-5"> <h4 class="mb-3 lg:mb-3 text-base font-display font-semibold text-green-500 tracking-wide uppercase">Manage your team</h4> <div class="grid grid-cols-2 gap-4"> <a href="/help/invite-your-team" class="text-base font-medium text-gray-900 hover:text-gray-700">Invite your team</a> <a href="/help/roles-permissions" class="text-base font-medium text-gray-900 hover:text-gray-700">Roles and permissions</a> </div> </div> <div class="py-6 px-5"> <h4 class="mb-3 lg:mb-3 text-base font-display font-semibold text-green-500 tracking-wide uppercase">Forms</h4> <div class="grid grid-cols-2 gap-4"> <a href="/help/ask-remotely" class="text-base font-medium text-gray-900 hover:text-gray-700">Ask for consent remotely</a> <a href="/help/ask-in-person" class="text-base font-medium text-gray-900 hover:text-gray-700">Ask for consent in person</a> <a href="/help/forms/set-language" class="text-base font-medium text-gray-900 hover:text-gray-700">How to set the form language</a> </div> </div> <div class="py-6 px-5"> <h4 class="mb-3 lg:mb-3 text-base font-display font-semibold text-green-500 tracking-wide uppercase">Consent templates</h4> <div class="grid grid-cols-2 gap-4"> <a href="/help/how-org-templates-work" class="text-base font-medium text-gray-900 hover:text-gray-700">How Consent Templates work</a> <a href="/help/what-is-liquid" class="text-base text-gray-900 font-bold">What is Liquid?</a> <a href="/help/template-cheat-sheet" class="text-base font-medium text-gray-900 hover:text-gray-700">Consent template cheat sheet</a> <a href="/help/templates/how-to-use-study-categories-to-power-templates" class="text-base font-medium text-gray-900 hover:text-gray-700">Using study categories</a> <a href="/help/document-workflows" class="text-base font-medium text-gray-900 hover:text-gray-700">Document workflows</a> </div> </div> <div class="py-6 px-5"> <h4 class="mb-3 lg:mb-3 text-base font-display font-semibold text-green-500 tracking-wide uppercase">Email templates</h4> <div class="grid grid-cols-2 gap-4"> <a href="/help/email-template-cheat-sheet" class="text-base font-medium text-gray-900 hover:text-gray-700">Email template cheat sheet</a> <a href="/help/email" class="text-base font-medium text-gray-900 hover:text-gray-700">Email formatting</a> </div> </div> <div class="py-6 px-5"> <h4 class="mb-3 lg:mb-3 text-base font-display font-semibold text-green-500 tracking-wide uppercase">Integrations</h4> <div class="grid grid-cols-2 gap-4"> <a href="/help/calendly-integration" class="text-base font-medium text-gray-900 hover:text-gray-700">Integrating with Calendly</a> <a href="/help/zapier-integration" class="text-base font-medium text-gray-900 hover:text-gray-700">Integrating with Zapier</a> </div> </div> <div class="py-6 px-5"> <h4 class="mb-3 lg:mb-3 text-base font-display font-semibold text-green-500 tracking-wide uppercase">Manage projects</h4> <div class="grid grid-cols-2 gap-4"> <a href="/help/create-a-project" class="text-base font-medium text-gray-900 hover:text-gray-700">Create a project</a> <a href="/help/share-project" class="text-base font-medium text-gray-900 hover:text-gray-700">Share a project</a> <a href="/help/share-for-review" class="text-base font-medium text-gray-900 hover:text-gray-700">Share for review</a> </div> </div> <div class="py-6 px-5"> <h4 class="mb-3 lg:mb-3 text-base font-display font-semibold text-green-500 tracking-wide uppercase">Security</h4> <div class="grid grid-cols-2 gap-4"> <a href="/help/2fa" class="text-base font-medium text-gray-900 hover:text-gray-700">Setup 2 factor authentication</a> <a href="/help/saml" class="text-base font-medium text-gray-900 hover:text-gray-700">Configuring SAML</a> </div> </div> <div class="py-6 px-5"> <h4 class="mb-3 lg:mb-3 text-base font-display font-semibold text-green-500 tracking-wide uppercase">Sending email</h4> <div class="grid grid-cols-2 gap-4"> <a href="/help/email-deliverability" class="text-base font-medium text-gray-900 hover:text-gray-700">Email deliverability</a> <a href="/help/email/bounces" class="text-base font-medium text-gray-900 hover:text-gray-700">Email bounces: why they happen & how to fix them</a> <a href="/help/email/spam-complaints" class="text-base font-medium text-gray-900 hover:text-gray-700">Spam complaints: why they happen and how to fix them</a> <a href="/help/email/blocked" class="text-base font-medium text-gray-900 hover:text-gray-700">Blocked emails: why they happen and how to fix them</a> </div> </div> <div class="py-6 px-5"> <p class="mt-6 text-center text-base font-medium text-gray-500"> Still need help? <a href="mailto:help@consentkit.com" class="ml-6 text-base font-medium text-gray-500 hover:text-gray-900 _text-xl" target="_blank"> <i class="fas fa-envelope"></i> Contact support </a> </p> </div> </div> </div> </div> <div class="hidden md:flex items-center justify-end md:flex-1 lg:w-0"> <a href="mailto:help@consentkit.com" class="ml-6 text-base font-medium text-gray-500 hover:text-gray-900 _text-xl" target="_blank"> <i class="fas fa-envelope"></i> Contact support </a> </div> </div> </div> </div> <div class="bg-white"> <div class="container-xl py-16 sm:py-12"> <div class="lg:grid lg:grid-cols-8">  <div id="sidebar" class="col-span-2 hidden lg:block lg:sticky lg:top-0 relative lg:mr-10 h-legal-sidebar"> <div class="overflow-y-visible z-40 overflow-hidden h-full relative mt-10"> <div class="overflow-y-auto scrolling-touch relative overflow-hidden block"> <nav class="mb-10"> <ul> <li class="mt-8"> <a href="/help" class="px-3 py-2 relative text-xl block hover:text-gray-900 text-gray-500">Help centre home</a> </li> <li class="mt-8 " data-controller="toggle"> <span data-action="click->toggle#toggle" class="px-3 mb-3 mt-10 text-xl text-gray-500 hover:text-gray-900 block relative pr-7 cursor-pointer"> Get started <span class="pointer-events-none absolute top-0 right-0 p-0.5 text-gray-300 group-hover:text-gray-400" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </span> <ul class="mt-3 ml-4" data-toggle-target="toggleable"> <li> <a href="/help/quick-start" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Quickstart</a> </li> <li> <a href="/help/panels-quickstart" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Set up your research panel</a> </li> <li> <a href="/help/brand-consent-forms" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Brand your consent forms</a> </li> <li> <a href="/help/set-data-retention" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Set data retention policy</a> </li> <li> <a href="/help/import" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Import data from a spreadsheet</a> </li> </ul> </li> <li class="mt-8 " data-controller="toggle"> <span data-action="click->toggle#toggle" class="px-3 mb-3 mt-10 text-xl text-gray-500 hover:text-gray-900 block relative pr-7 cursor-pointer"> Manage your team <span class="pointer-events-none absolute top-0 right-0 p-0.5 text-gray-300 group-hover:text-gray-400" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </span> <ul class="mt-3 ml-4" data-toggle-target="toggleable"> <li> <a href="/help/invite-your-team" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Invite your team</a> </li> <li> <a href="/help/roles-permissions" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Roles and permissions</a> </li> </ul> </li> <li class="mt-8 " data-controller="toggle"> <span data-action="click->toggle#toggle" class="px-3 mb-3 mt-10 text-xl text-gray-500 hover:text-gray-900 block relative pr-7 cursor-pointer"> Forms <span class="pointer-events-none absolute top-0 right-0 p-0.5 text-gray-300 group-hover:text-gray-400" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </span> <ul class="mt-3 ml-4" data-toggle-target="toggleable"> <li> <a href="/help/ask-remotely" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Ask for consent remotely</a> </li> <li> <a href="/help/ask-in-person" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Ask for consent in person</a> </li> <li> <a href="/help/forms/set-language" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">How to set the form language</a> </li> </ul> </li> <li class="mt-8 active" data-controller="toggle"> <span data-action="click->toggle#toggle" class="px-3 mb-3 mt-10 text-xl text-gray-500 hover:text-gray-900 block relative pr-7 cursor-pointer"> Consent templates <span class="pointer-events-none absolute top-0 right-0 p-0.5 text-gray-300 group-hover:text-gray-400" aria-hidden="false"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </span> <ul class="mt-3 ml-4" data-toggle-target="toggleable"> <li> <a href="/help/how-org-templates-work" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">How Consent Templates work</a> </li> <li> <a href="/help/what-is-liquid" class="px-3 py-2 relative text-lg block text-gray-900 font-bold">What is Liquid?</a> </li> <li> <a href="/help/template-cheat-sheet" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Consent template cheat sheet</a> </li> <li> <a href="/help/templates/how-to-use-study-categories-to-power-templates" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Using study categories</a> </li> <li> <a href="/help/document-workflows" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Document workflows</a> </li> </ul> </li> <li class="mt-8 " data-controller="toggle"> <span data-action="click->toggle#toggle" class="px-3 mb-3 mt-10 text-xl text-gray-500 hover:text-gray-900 block relative pr-7 cursor-pointer"> Email templates <span class="pointer-events-none absolute top-0 right-0 p-0.5 text-gray-300 group-hover:text-gray-400" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </span> <ul class="mt-3 ml-4" data-toggle-target="toggleable"> <li> <a href="/help/email-template-cheat-sheet" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Email template cheat sheet</a> </li> <li> <a href="/help/email" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Email formatting</a> </li> </ul> </li> <li class="mt-8 " data-controller="toggle"> <span data-action="click->toggle#toggle" class="px-3 mb-3 mt-10 text-xl text-gray-500 hover:text-gray-900 block relative pr-7 cursor-pointer"> Integrations <span class="pointer-events-none absolute top-0 right-0 p-0.5 text-gray-300 group-hover:text-gray-400" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </span> <ul class="mt-3 ml-4" data-toggle-target="toggleable"> <li> <a href="/help/calendly-integration" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Integrating with Calendly</a> </li> <li> <a href="/help/zapier-integration" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Integrating with Zapier</a> </li> </ul> </li> <li class="mt-8 " data-controller="toggle"> <span data-action="click->toggle#toggle" class="px-3 mb-3 mt-10 text-xl text-gray-500 hover:text-gray-900 block relative pr-7 cursor-pointer"> Manage projects <span class="pointer-events-none absolute top-0 right-0 p-0.5 text-gray-300 group-hover:text-gray-400" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </span> <ul class="mt-3 ml-4" data-toggle-target="toggleable"> <li> <a href="/help/create-a-project" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Create a project</a> </li> <li> <a href="/help/share-project" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Share a project</a> </li> <li> <a href="/help/share-for-review" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Share for review</a> </li> </ul> </li> <li class="mt-8 " data-controller="toggle"> <span data-action="click->toggle#toggle" class="px-3 mb-3 mt-10 text-xl text-gray-500 hover:text-gray-900 block relative pr-7 cursor-pointer"> Security <span class="pointer-events-none absolute top-0 right-0 p-0.5 text-gray-300 group-hover:text-gray-400" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </span> <ul class="mt-3 ml-4" data-toggle-target="toggleable"> <li> <a href="/help/2fa" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Setup 2 factor authentication</a> </li> <li> <a href="/help/saml" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Configuring SAML</a> </li> </ul> </li> <li class="mt-8 " data-controller="toggle"> <span data-action="click->toggle#toggle" class="px-3 mb-3 mt-10 text-xl text-gray-500 hover:text-gray-900 block relative pr-7 cursor-pointer"> Sending email <span class="pointer-events-none absolute top-0 right-0 p-0.5 text-gray-300 group-hover:text-gray-400" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </span> <ul class="mt-3 ml-4" data-toggle-target="toggleable"> <li> <a href="/help/email-deliverability" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Email deliverability</a> </li> <li> <a href="/help/email/bounces" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Email bounces: why they happen & how to fix them</a> </li> <li> <a href="/help/email/spam-complaints" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Spam complaints: why they happen and how to fix them</a> </li> <li> <a href="/help/email/blocked" class="px-3 py-2 relative text-lg block hover:text-gray-900 text-gray-500">Blocked emails: why they happen and how to fix them</a> </li> </ul> </li> </ul> </nav> </div> </div> </div> <div id="content" class="lg:col-span-6 lg:max-h-full lg:sticky lg:overflow-visible"> <div class="prose prose-lg prose-indigo">  <h1 id="what-is-liquid">What is Liquid?</h1> <p>Liquid is an open source templating language built by Shopify. They have <a href="https://shopify.github.io/liquid/">excellent documentation</a> if you want to go deeper, but we’ve pulled out the important bits you need to know to get the most out of Consent Kit in this article.</p> <p>We use Liquid in our templates and emails to do two things:</p> <ol> <li>Minimise the effort for Researchers creating specific forms for their project</li> <li>Ensure generated forms are inline with what was agreed by the organisation</li> </ol> <p>We primarily use two elements from Liquid: Objects and Tags.</p> <h2 id="objects">Objects</h2> <p>Objects tell Liquid where to show content. Objects are denoted by double curly braces: <code class="language-plaintext highlighter-rouge">{% raw %}{{ object }}{% endraw %}</code>.</p> <p>For example, if I put this into an Org Template:</p> <p>“Hello, my name is <code class="language-plaintext highlighter-rouge">{% raw %}{{ researcher.name }}{% endraw %}</code>. I work for <code class="language-plaintext highlighter-rouge">{% raw %}{{ organisation.name }}{% endraw %}</code>.”</p> <p>If I generated a form using that template, it would give me:</p> <p>“Hello, my name is Phil Hesketh. I work for Consent Kit.”</p> <p>At the point of generating a form to be used in a project, Consent Kit takes a snapshot of your Org Template and populates all of these Objects with information relative to the person who is generating the form.</p> <p>For a complete list of objects available to you in Consent Kit - checkout our <a href="/help/template-cheat-sheet">Template cheat sheet</a>.</p> <h2 id="tags">Tags</h2> <p>Tags are a bit more complicated. They create the logic and control flow for templates and are denoted by curly braces and percent signs.</p> <p>Any text used inside these tags is not visible when a form is generated. This means that you can assign variables and create conditions and loops without showing any of the Liquid logic on the page.</p> <h3 id="conditional-tags">Conditional tags</h3> <p>Conditional tags are handy when you want to check that something is true or not before populating part of your consent form with content.</p> <p>Let’s look at an example that will display content only if a condition is true.</p>  <p>{% highlight liquid %} {% raw %} {% if researcher.email %} {{ researcher.email }} {%- else -%} [ enter researcher email address here ] {%- endif -%} {% endraw %} {% endhighlight %}</p> <p><code class="language-plaintext highlighter-rouge">{% raw %}{% if researcher.email %}{% endraw %}</code> is a shorthand to say: “If researcher.email equals true” (ie: If the researcher who has generated this consent form has an email address in Consent Kit) “Then include this next bit of text in the form”.</p> <p>If they do have an email address in the system, it uses an Object to populate that information when the form is generated. If they don’t, it will insert the placeholder text from the <code class="language-plaintext highlighter-rouge">{% raw %}{%- else -%}{% endraw %}</code> to instruct the researcher to enter their email address manually.</p> <p>Finally, the conditional tag must be closed with <code class="language-plaintext highlighter-rouge">{% raw %}{%- endif -%}{% endraw %}</code>.</p> <h3 id="case-tags">Case Tags</h3> <p>Case tags are useful when you want to populate content, but you have more than one possible outcome (eg: not just true or false).</p> <p>We use case tags to populate parts of the form which change depending on the type of research being done. For example:</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">raw</span><span class="w"> </span><span class="p">%}</span> {%- case event.category -%} {%- when "interview" -%} This text will only appear for an interview. {%- when "workshop" -%} This text will only appear for a workshop. {%- when "usability_testing" -%} This text will only appear for a usability test. {%- else -%} This text will appear if no event category is selected. {% endcase %} <span class="p">{%</span><span class="w"> </span><span class="nt">endraw</span><span class="w"> </span><span class="p">%}</span> </code></pre></div></div> <p>This is essentially a chain of conditions. It starts with a “case” or thing to look at (in this case, a study). Then it asks questions of that case until it finds one that is true. When it finds one that is true, it populates the generated form with the content from that section.</p> <p>Let’s break this down.</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">raw</span><span class="w"> </span><span class="p">%}</span> {%- case event.category -%} <span class="p">{%</span><span class="w"> </span><span class="nt">endraw</span><span class="w"> </span><span class="p">%}</span> </code></pre></div></div> <p>Is saying: “If there is a study associated with this form, then…”</p> <p><code class="language-plaintext highlighter-rouge">{% raw %}{%- when "interview" -%}{% endraw %}</code> means: “If that event is an interview - then display the text from this part only.” ie: “This text will only appear if the form is being used for an interview.”</p> <p>If there is a study and it is not an interview, it will ignore whatever text is in the interview bit and move onto the next statement: <code class="language-plaintext highlighter-rouge">{% raw %}{%- when "workshop" -%}{% endraw %}</code>.</p> <p>You might have noticed that the last statement before the endcase just says <code class="language-plaintext highlighter-rouge">{% raw %}{% else %}{% endraw %}</code>. This is a catch all to say “if none of these things are true, then display this instead.” This will always be true, so it should only be just before the endcase.</p> <p>Liquid will search through as many statements as you want to include until it reaches the first one that is true or it gets to the <code class="language-plaintext highlighter-rouge">{% raw %}{% endcase %}{% endraw %}</code>.</p> <p>For a complete list of tags available to you in Consent Kit - checkout our <a href="/help/template-cheat-sheet">Template cheat sheet</a>.</p> <h2 id="controlling-whitespace">Controlling whitespace</h2> <p>You might have noticed that some of the tags we use are formatted like this: <code class="language-plaintext highlighter-rouge">{% raw %}{% case event.category %}{% endraw %}</code> while others are like this <code class="language-plaintext highlighter-rouge">{% raw %}{%- case event.category -%}{% endraw %}</code>.</p> <p>The hyphens within the tag tell Liquid to remove any whitespace from around the content when it is generated. Without this, your text would break onto a new line at the point of including the tag and then resume on another new line after it.</p> <p>If you find that that is happening to you - check your tags for hyphens!</p> </div> <div class="bg-white"> <div class="mx-auto mt-24"> <div class="lg:flex lg:items-center lg:justify-between bg-green-700 rounded-lg py-6 px-4 lg:px-12 lg:py-12"> <div> <h3 class="text-3xl font-extrabold font-display text-white sm:text-4xl">Get help</h3> <p class="mt-2 text-white text-xl">Can't find what you are looking for?</p> </div> <div class="lg:ml-8 mt-8 flex lg:mt-0 lg:flex-shrink-0"> <div class="inline-flex rounded-md shadow"> <a href="mailto:help@consentkit.com" target="_blank" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50" > <i class="fas fa-envelope mr-2"></i> Get in touch <span class="ml-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="-mr-1 h-5 w-5 inline " aria-hidden="true" > <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </span> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <footer class="mt-8 bg-white" aria-labelledby="footerHeading"> <h2 id="footerHeading" class="sr-only">Footer</h2> <div class="container-xl py-12"> <div class="md:grid md:grid-cols-4 gap-8 mb-16 pt-8 border-t border-gray-200"> <div class="col-span-1 flex flex-col mb-4 md:mb-0"> <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase _lg:flex-grow">Say hello</h3> <div class="mt-4 space-x-6 flex md:mt-11"> <a href="mailto:founders@consentkit.com" class="text-gray-400 hover:text-gray-300 text-2xl" target="_blank"> <span class="sr-only">Email</span> <i class="fas fa-envelope"></i> </a> <a href="https://www.linkedin.com/company/consent-kit" class="text-gray-400 hover:text-gray-300 text-2xl"> <span class="sr-only">LinkedIn</span> <i class="fab fa-linkedin"></i> </a> </div> </div> <div class="col-span-3"> <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">Trusted by</h3> <div class="flow-root mt-2"> <div class="-ml-2 flex flex-wrap justify-between space-y-6"> <div class="mt-6 ml-2 flex flex-grow flex-shrink-0 items-center"> <img class="h-6 filter grayscale opacity-50" src="/assets/images/customer-logos/loom.svg" loading="lazy" alt="The loom logo" /> </div> <div class="mt-2 ml-2 flex flex-grow flex-shrink-0 items-center"> <img class="h-8" src="/assets/images/customer-logos/heritage-fund.svg" alt="The National Lottery Heritage Fund logo" loading="lazy" /> </div> <div class="mt-8 ml-2 flex flex-grow flex-shrink-0 items-center"> <img class="h-8" src="/assets/images/customer-logos/nile.svg" loading="lazy" alt="Nile logo" /> </div> <div class="ml-2 flex flex-grow flex-shrink-0 items-center"> <img class="h-6 mt-1 filter grayscale opacity-40" src="/assets/images/customer-logos/tpximpact.svg" loading="lazy" alt="TPX Impact logo" /> </div> <div class="ml-2 flex flex-grow flex-shrink-0 items-center"> <img class="h-8 filter" src="/assets/images/customer-logos/hyper-island.svg" loading="lazy" alt="Hyper Island logo" /> </div> <div class="mt-2 ml-2 flex flex-grow flex-shrink-0 items-center"> <img class="h-8" src="/assets/images/customer-logos/co-op.svg" loading="lazy" alt="the Co-op logo" /> </div> </div> </div> </div> </div> <div class="mt-12 grid grid-cols-2 grid-row-2 gap-8 md:grid-cols-4 md:grid-row-1 xl:mt-0 xl:col-span-2"> <div> <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">Product</h3> <ul class="mt-4 space-y-4"> <li> <a href="/recruit" class="text-base text-gray-500 hover:text-gray-900">Recruit</a> </li> <li> <a href="/prepare" class="text-base text-gray-500 hover:text-gray-900">Prepare</a> </li> <li> <a href="/respect" class="text-base text-gray-500 hover:text-gray-900">Respect</a> </li> <li> <a href="/features" class="text-base text-gray-500 hover:text-gray-900"> Features </a> </li> <li> <a href="/pricing" class="text-base text-gray-500 hover:text-gray-900"> Pricing </a> </li> <li> <a href="/book-demo" class="text-base text-gray-500 hover:text-gray-900"> Book demo </a> </li> <li> <a href="https://app.consentkit.com/sign-up?ref=footer" data-action="analytics#track" data-event-name="Sign Up Clicked" class="text-base text-gray-500 hover:text-gray-900"> Try for free </a> </li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">Resources</h3> <ul class="mt-4 space-y-4"> <li> <a href="/customers" class="text-base text-gray-500 hover:text-gray-900"> Success stories </a> </li> <li> <a href="/government" class="text-base text-gray-500 hover:text-gray-900"> Governments & public sector </a> </li> <li> <a href="/recruitment-strategy" class="text-base text-gray-500 hover:text-gray-900"> Research recruitment strategies </a> </li> <li> <a href="/informed-consent-checklist" class="text-base text-gray-500 hover:text-gray-900"> Informed consent Checklist </a> </li> <li> <a href="/data-management-workshop" class="text-base text-gray-500 hover:text-gray-900"> Data management workshop </a> </li> <li> <a href="/accessibility-workshop" class="text-base text-gray-500 hover:text-gray-900"> Accessibility workshop </a> </li> <li> <a href="/blog" class="text-base text-gray-500 hover:text-gray-900"> Blog </a> </li> <li> <a href="/newsletter" class="text-base text-gray-500 hover:text-gray-900">Newsletter</a> </li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">Company</h3> <ul class="mt-4 space-y-4"> <li> <a href="/about-us" class="text-base text-gray-500 hover:text-gray-900"> About us </a> </li> <li> <a href="/legal" class="text-base text-gray-500 hover:text-gray-900"> Legal centre</a> </li> <li> <a href="/legal/gdpr" class="text-base text-gray-500 hover:text-gray-900"> GDPR</a> </li> <li> <a href="/legal/privacy" class="text-base text-gray-500 hover:text-gray-900">Privacy Policy</a> </li> <li> <a href="/security" class="text-base text-gray-500 hover:text-gray-900"> Security</a> </li> <li> <a href="/accessibility-statement" class="text-base text-gray-500 hover:text-gray-900"> Accessibility statement </a> </li> <li> <a href="/contact-us" class="text-base text-gray-500 hover:text-gray-900"> Contact us </a> </li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">Customers</h3> <ul class="mt-4 space-y-4"> <li> <a href="https://app.consentkit.com/sign-in" data-action="analytics#track" data-event-name="Sign In Clicked" class="text-base text-gray-500 hover:text-gray-900"> Sign in </a> </li> <li> <a href="/help" class="text-base text-gray-500 hover:text-gray-900"> Help centre </a> </li> <li> <a href="/docs/api" class="text-base text-gray-500 hover:text-gray-900"> API documentation </a> </li> <li> <a href="https://consentkit.statuspage.io/" class="text-base text-gray-500 hover:text-gray-900"> Service Status </a> </li> <li> <a href="/whats-new" class="text-base text-gray-500 hover:text-gray-900"> What's new </a> </li> </ul> </div> </div> <div class="mt-8 border-t border-gray-200 pt-8 md:grid md:grid-cols-2 gap-8 md:items-center"> <div> <a href="/" class="flex items-center"> <img class="h-6 sm:h-8" src="/assets/images/logo.svg" loading="lazy" alt="Consent Kit logo" width="30" height="40" /> <h3 class="md:block text-xl font-display font-medium pt-1 ml-2 whitespace-nowrap">Consent Kit</h3> </a> <p class="text-gray-500 text-base mt-2">All-in-one participant management. For Research Ops.</p> </div> <p class="mt-8 text-base text-gray-500 md:mt-0 md:text-right"> <span>© 2025</span> Consent Kit Ltd. <a href="/imprint" class="border-b border-gray-500 hover:border-opacity-0 mx-6">Imprint</a> Made in Manchester, UK </p> </div> </div> </footer> </body> </html>

CINXE.COM

What is Liquid? Open Source Templating by Shopify | Consent Kit