Liquid

Определение

Liquid — это открытый шаблонный язык, созданный компанией Shopify и используемый для динамического рендеринга тем интернет-магазинов, страниц и блоков контента. Он работает на стороне сервера: когда покупатель открывает карточку товара, корзину или лендинг, платформа «пробегает» по Liquid-коду и подставляет реальные данные — цену, остатки, изображения, скидки, тексты.

Простыми словами: Liquid — это «клей» между базой данных магазина и HTML, который видит покупатель. Он не программирует логику магазина, а только выводит и фильтрует уже готовые данные.

Liquid состоит из трёх строительных блоков:

- Объекты — выводят данные: {{ product.title }}, {{ cart.total_price }}

- Теги — управляют логикой: {% if %}, {% for %}, {% assign %}

- Фильтры — преобразуют вывод: {{ price | money }}, {{ image | img_url: '600x' }}

Аналогия

Представьте витрину магазина. Товары, ценники и постеры — это данные из базы. Продавец-мерчендайзер — это Liquid: он берёт нужный товар, вешает правильный ценник, ставит скидочную наклейку и выкладывает всё в нужном порядке. Сам продавец ничего не производит — он только оформляет то, что уже есть на складе.

Или так: Liquid — это как Excel-формула для сайта. Вы пишете =ЦЕНА*КУРС, Excel подставляет числа. В Liquid вы пишете {{ product.price | times: 1.2 }} — и магазин сам считает цену с наценкой 20%.

Формула и синтаксис

Базовая конструкция вывода:

{{ объект.свойство | фильтр: параметр }}

Примеры с реальными данными:

{{ product.price | money }}                     → 2 990 ₽
{{ product.price | times: 0.9 | money }}        → 2 691 ₽ (скидка 10%)
{{ cart.item_count }}                           → 3 (товара в корзине)
{{ product.featured_image | img_url: '800x' }}  → URL картинки 800px

Условие для бейджа «Хит продаж»:

{% if product.tags contains 'bestseller' %}
  <span class="badge">Хит продаж</span>
{% endif %}

Цикл по вариантам товара:

{% for variant in product.variants %}
  {{ variant.title }} — {{ variant.price | money }}
{% endfor %}

Сравнение с альтернативами

Liquid сознательно ограничен: в нём нельзя выполнять произвольный код, обращаться к файловой системе или делать SQL-запросы. Это защищает магазин от взлома через тему, но требует выносить сложную логику в приложения.

Где применяется в DTC-коммерции

1. Карточка товара. Вывод цены, сравнение с «зачёркнутой» ценой, остатки, варианты (размер, цвет), блоки «С этим покупают».

2. Корзина и чекаут. Подсчёт суммы, применение промокодов, отображение бесплатной доставки от порога, например: {% if cart.total_price >= 500000 %} Бесплатная доставка {% endif %} (порог 5 000 ₽ в копейках).

3. Коллекции и фильтры. Сортировка по цене, новизне, тегам; разбивка на страницы по 24 товара.

4. Лендинги и блоки. Динамические баннеры под сегмент: для новых покупателей — скидка 10%, для повторных — программа лояльности.

5. Локализация. Вывод цен в нужной валюте, переводы через {{ 'cart.title' | t }}.

6. Email и уведомления. Шаблоны писем о заказе, брошенной корзине, возврате.

Практический пример: интернет-магазин косметики на Shopify с 1 200 SKU. Через Liquid выводятся бейджи «Новинка» (по тегу new), «-30%» (если compare_at_price > price) и блок «Подходит вашему типу кожи» (по метаполю skin_type). Это даёт рост конверсии карточки на 8–12% без правки кода приложения.

Частые ошибки

- Путать {{ }} и {% %}. Первое — вывод, второе — логика. {% product.title %} не сработает.

- Забывать про фильтр money. {{ product.price }} выведет число в копейках (299000), а не «2 990 ₽».

- Тяжёлые циклы. {% for %} по 5 000 товарам на странице замедляет рендеринг. Используйте пагинацию по 24–48 позиций.

- Логика в шаблоне. Расчёт скидок, налогов и доставки лучше держать в приложениях или Shopify Functions, а не в Liquid.

- Хардкод текстов. Строки нужно выносить в locales/*.json, иначе магазин не масштабируется на новые рынки.

- Игнорирование nil. Обращение к несуществующему полю вернёт пустоту — проверяйте через {% if product.metafields.custom.size %}.

- Кэш и динамика. Liquid рендерится при запросе; если данные меняются часто (остатки), нужен корректный кэш-контроль.

Связанные термины

- Shopify Theme — тема магазина, состоящая из Liquid-файлов, JSON-шаблонов и ассетов.

- Section — переиспользуемый блок темы с настройками в редакторе.

- Snippet — маленький фрагмент кода, подключаемый через {% render %}.

- Metafield — пользовательское поле для товара, заказа или клиента.

- Shopify Functions — серверная логика (скидки, доставка) на замену старым Scripts.

- Hydration — «оживление» статичного HTML после рендеринга Liquid на клиенте.

- Storefront API — GraphQL-доступ к данным магазина для headless-витрин.

- Headless Commerce — архитектура, где Liquid заменяется на фронтенд-фреймворк, а данные берутся через API.