Liquid Tricks for Jekyll, Eleventy, Shopify etc.

Table of Contents

Liquid Tricks

Syntax highlighting & auto-formatting in VS Code~editors

  1. 🧩 Install /prettier/prettier-vscode (if not yet)
  2. 🧩 Install /docs/storefronts/themes/tools/shopify-liquid-vscode
    (2-in-1 extension for highlighting & formatting)

This is a huge advantage for .liquid over .njk so far.

Prevent unclosed html tags from breaking auto-formatting

{% # prettier-ignore %} might not help with that, because the parser crashes on the "broken" HTML before it even reads the ignore command.

But there is a trick with "fake" {% if true %} condition:

{% if true %}<html>{% endif %}
<head>
  ...
</head>
{% if true %}<body>{% endif %}
  ...

{% if true %}</body><html>{% endif %}

This "fake conditional" trick is a clever way to bypass the Abstract Syntax Tree (AST) parsers used by formatters like Prettier. Since the formatter sees the tag wrapped in a logic block, it often treats the HTML as a string or a partial fragment rather than a structural error.

Create array 

{% capture _new_array %}
1
2
3
{% endcapture %}
{% assign _new_array = _new_array | strip | split: '\n' %}

Beware: False Positives in .liquid

❌ Wrong:

{% if my_string %} This will always show if the string exists, even if empty. {% endif %}

✅ Right (Checking for content):

{% if my_string != blank %} This only shows if there is actual text. {% endif %}

✅ Right (Checking arrays/strings by size):

{% if my_array.size > 0 %} This ensures the list isn't empty. {% endif %}

Universal Template 'Bricks' (.njk & .liquid)
from /anydigital/bricks

The package includes reusable templates in the ./src/bricks/ directory. These are useful for common web development patterns.

Install Templates 

npm install @anydigital/bricks
cd ./src/_includes
ln -s ../../node_modules/@anydigital/bricks/src/bricks

Base HTML Template (__html.*)

A unified base HTML template bricks/__html.{njk|liquid} that provides the essential document structure with built-in support for modern web best practices.

Usage:

{% extends 'bricks/__html.njk' %}

{% block body %}
  <!-- YOUR page content -->
{% endblock %}

Example: /anydigital/sveleven/blob/main/src/_theme/__layout.njk

{% capture body %}
  <!-- YOUR page content -->
{% endcapture %}

{% include 'bricks/__html' %}

Example: /anydigital/sveleven/blob/main/src/_theme/__layout.liquid

Features:

Variables:

A navigation template bricks/_nav.{njk|liquid} that renders a list of navigation links with proper accessibility attributes.

Parameters:

Usage example with Eleventy Navigation plugin:

{% assign nav_pages = collections.all | eleventyNavigation %}
{% render 'bricks/_nav', nav_pages: nav_pages, current_url: page.url %}

Output:

<nav>
  <a href="/">Home</a>
  <a href="/about" aria-current="page">About</a>
  <a href="/contact">Contact</a>
</nav>

Google Tag Manager (_gtm.*)

A template bricks/_gtm.{njk|liquid} for embedding Google Tag Manager scripts in your pages.

Parameters:

  • site.gtm_id - Your Google Tag Manager container ID (e.g., GTM-XXXXXXX)
  • site.prod - Boolean flag to enable GTM only in production
  • for_body - Boolean flag (default: false). When false, renders the script tag for the <head>. When true, renders the noscript fallback for the <body>.

Note: This template is automatically included when using __html.liquid. You only need to manually render it if you're not using that base template, see examples:

Featured in: