---
title: Shopify Liquid — poradnik języka szablonów dla developerów
description: Naucz się Liquid, języka szablonów Shopify. Obiekty, tagi, filtry, snippety, sekcje i schematy — kompletny poradnik z przykładami kodu.
canonical_url: "https://www.polar-commerce.com/wiedza/shopify-liquid-poradnik"
locale: pl
category: development
date_modified: 2026-05-05
source: "https://www.polar-commerce.com/wiedza/shopify-liquid-poradnik.md"
publisher: Polar Commerce
publisher_url: "https://www.polar-commerce.com"
---

# Shopify Liquid — poradnik języka szablonów dla developerów

> Naucz się Liquid, języka szablonów Shopify. Obiekty, tagi, filtry, snippety, sekcje i schematy — kompletny poradnik z przykładami kodu.

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ę:
```liquid
{{ product.title }}
{{ product.price | money }}
{{ shop.name }}
```

### 2. Tagi (Logic)
Kontrolują logikę:
```liquid
{% if product.available %}
  <button>Dodaj do koszyka</button>
{% else %}
  <button disabled>Niedostępny</button>
{% endif %}
```

### 3. Filtry
Transformują dane:
```liquid
{{ 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
```liquid
{{ product.title }}
{{ product.description }}
{{ product.price }}
{{ product.compare_at_price }}
{{ product.images }}
{{ product.variants }}
{{ product.tags }}
{{ product.metafields }}
```

### Collection
```liquid
{% 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
```liquid
{{ 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:

```liquid
{% 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:

```liquid
{% 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:

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

## Shopify Liquid — best practices

1. **Minimalizuj logikę w szablonach** — przenoś złożoną logikę do snippetów
2. **Używaj lazy loading** — `loading="lazy"` na obrazkach
3. **Cachuj gdzie możliwe** — wykorzystaj fragment caching
4. **Unikaj N+1 queries** — nie ładuj danych w pętlach
5. **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ę](/kontakt).