Shopify Liquid — poradnik języka szablonów dla developerów | Polar Commerce

Liquid to język szablonów stworzony przez Shopify, używany do generowania dynamicznych stron sklepów internetowych. Jest bezpieczny (sandboxed), czytelny i stosunkowo łatwy do nauki. Każdy developer pracujący z Shopify musi znać Liquid.

Podstawy Liquid

Liquid używa trzech typów znaczników:

1. Obiekty (Output)

Wypisują dane na stronę:

{{ product.title }}
{{ product.price | money }}
{{ shop.name }}

2. Tagi (Logic)

Kontrolują logikę:

{% if product.available %}
  <button>Dodaj do koszyka</button>
{% else %}
  <button disabled>Niedostępny</button>
{% endif %}

3. Filtry

Transformują dane:

{{ product.title | upcase }}
{{ product.price | money_with_currency }}
{{ 'now' | date: "%Y-%m-%d" }}
{{ product.description | strip_html | truncate: 150 }}

Kluczowe obiekty Liquid w Shopify

Product

{{ product.title }}
{{ product.description }}
{{ product.price }}
{{ product.compare_at_price }}
{{ product.images }}
{{ product.variants }}
{{ product.tags }}
{{ product.metafields }}

Collection

{% for product in collection.products %}
  <div class="product-card">
    <img src="{{ product.featured_image | img_url: '400x' }}" />
    <h3>{{ product.title }}</h3>
    <span>{{ product.price | money }}</span>
  </div>
{% endfor %}

Cart

{{ cart.item_count }}
{{ cart.total_price | money }}
{% for item in cart.items %}
  {{ item.title }} — {{ item.quantity }} × {{ item.price | money }}
{% endfor %}

Sekcje i Schematy (Theme Architecture)

Sekcje (Sections)

Sekcje to modularne bloki, które można dodawać przez Theme Editor:

{% schema %}
{
  "name": "Hero Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Nagłówek"
    },
    {
      "type": "image_picker",
      "id": "background",
      "label": "Tło"
    }
  ]
}
{% endschema %}

<section class="hero">
  <h1>{{ section.settings.heading }}</h1>
  {% if section.settings.background %}
    <img src="{{ section.settings.background | img_url: '1920x' }}" />
  {% endif %}
</section>

Bloki (Blocks)

Powtarzalne elementy wewnątrz sekcji:

{% schema %}
{
  "name": "Feature List",
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "settings": [
        { "type": "text", "id": "title", "label": "Title" },
        { "type": "richtext", "id": "description", "label": "Description" }
      ]
    }
  ]
}
{% endschema %}

{% for block in section.blocks %}
  <div {{ block.shopify_attributes }}>
    <h3>{{ block.settings.title }}</h3>
    {{ block.settings.description }}
  </div>
{% endfor %}

Metafields w Liquid

Metafields pozwalają przechowywać dodatkowe dane:

{{ product.metafields.custom.material }}
{{ product.metafields.custom.care_instructions }}
{{ product.metafields.reviews.rating }}

Shopify Liquid — best practices

Minimalizuj logikę w szablonach — przenoś złożoną logikę do snippetów

Używaj lazy loading — `loading="lazy"` na obrazkach

Cachuj gdzie możliwe — wykorzystaj fragment caching

Unikaj N+1 queries — nie ładuj danych w pętlach

Responsive images — używaj `srcset` z Shopify image API

Narzędzia developerskie

Shopify CLI — `shopify theme dev` do lokalnego developmentu

Dawn — referencyjny szablon od Shopify (open-source)

Theme Inspector — Chrome extension do profilowania Liquid

Potrzebujesz developera Liquid?

Polar Commerce to agencja Shopify z doświadczonymi developerami Liquid. Budujemy custom szablony, sekcje i integracje. Skontaktuj się.