Liquid to otwartoźródłowy język szablonów stworzony przez Shopify, w którym pisze się wygląd sklepu, czyli motywy. Składa się z trzech elementów: obiektów ({{ }}), tagów ({% %}) i filtrów (|). Motyw możesz opublikować w Theme Store (15% prowizji, wymagania m.in. Lighthouse na poziomie 60 i 90), a aplikację w App Store (jednorazowa opłata 19 USD i przegląd Shopify).
Liquid to pierwsza rzecz, którą poznaje każdy Shopify developer, a zarazem jedna z najmniejszych technologii, jakich się uczysz. Poniżej opisujemy, czym jest, jak wygląda składnia, na jakie błędy trafiają początkujący, jak opublikować motyw lub aplikację w sklepie Shopify i gdzie zdobyć certyfikat. Jeśli dopiero zastanawiasz się, czy ten zawód jest dla Ciebie, zacznij od artykułu Shopify developer: od czego zacząć, dlaczego warto i jak wygląda rynek pracy.
Czym jest Liquid i do czego służy w Shopify?
Liquid to język szablonów (template language) stworzony przez Shopify i udostępniony jako open source. Pozwala wstawiać do strony dane sklepu, na przykład nazwę i cenę produktu, oraz sterować tym, co się wyświetli, na przykład pokazać napis „wyprzedane”. Liquid nie jest pełnoprawnym językiem programowania, bo nie pobiera danych z internetu ani nie zapisuje ich w bazie. Dostaje dane od Shopify i zamienia je na HTML.
Motyw Shopify to połączenie Liquid z HTML, CSS, JavaScriptem i plikami JSON. Liquid odpowiada za szkielet strony, a CSS i JavaScript za wygląd i zachowanie.
Jak wygląda składnia Liquid?
Składnia opiera się na trzech elementach:
| Element | Zapis | Do czego służy | Przykład |
|---|---|---|---|
| Obiekty (objects) | {{ }} | wypisują dane | {{ product.title }} |
| Tagi (tags) | {% %} | dodają logikę, nie wypisują treści | {% if %}, {% for %}, {% assign %} |
| Filtry (filters) | | | zmieniają wynik, można je łączyć od lewej do prawej | {{ product.title | upcase }} |
Zobacz to na działającym przykładzie. Lista produktów, w której niedostępny towar dostaje dopisek:
{% for product in products %}
{{ product.title | upcase }} - {{ product.price | divided_by: 100.0 | round: 2 }} zł{% if product.available == false %} (wyprzedane){% endif %}
{% endfor %}
Dla kubka (4900 groszy, dostępny) i koszulki (8900 groszy, niedostępna) wynik to KUBEK - 49 zł oraz KOSZULKA - 89 zł (wyprzedane). Przykłady w tym artykule uruchomiliśmy w bibliotece liquidjs (implementacja Liquid w JavaScripcie), a nie w samym Shopify. W prawdziwym motywie ceny formatuje się filtrami Shopify do walut.
Jak zapisać zmienną, warunek i pętlę?
Zmienną tworzysz tagiem assign, a dłuższy fragment tekstu tagiem capture:
{% assign items = "kubek,koszulka,czapka" | split: "," %}
{% for i in items %}{{ forloop.index }}. {{ i | capitalize }}{% unless forloop.last %}, {% endunless %}{% endfor %}
{% capture greeting %}Cześć, {{ name }}!{% endcapture %}
{{ greeting }}
Pierwsza linia zamienia tekst na tablicę, pętla wypisuje 1. Kubek, 2. Koszulka, 3. Czapka, a zmienna forloop mówi, który to obieg i czy ostatni. Dla name równego „Ola” capture zwraca Cześć, Ola!. Warunki piszesz tagami if, elsif, else i unless, a operator contains sprawdza, czy tablica lub tekst zawiera dany element, na przykład {% if product.tags contains "sale" %}promocja{% endif %}.
Dwa małe udogodnienia warto znać od początku. Pętla for ma gałąź else, która wykona się dla pustej listy: {% for p in products %}...{% else %}pusto{% endfor %}. Filtr default podstawia wartość zastępczą, gdy zmienna nie istnieje: {{ missing.title | default: "brak tytułu" }} daje brak tytułu. Komentarz pomiędzy {% comment %} i {% endcomment %} nie trafia na stronę.
Czy Liquid jest trudny do nauczenia?
Naszym zdaniem nie. To mały język, z którego na co dzień używasz kilkunastu tagów i filtrów, więc jego składnię opanujesz w kilka dni. Prawdziwą trudnością jest co innego: struktura motywu (które pliki za co odpowiadają i jak sekcje łączą się z szablonami) oraz JavaScript, bez którego nie zrobisz nic ponad statyczny wygląd. Początkujący często zbyt długo szlifują samą składnię, zamiast budować coś w całym motywie.
Jak zacząć pracę z Liquid?
- Załóż konto Partner i sklep deweloperski (development store). Pozwala testować bez prawdziwego sklepu. Sklep deweloperski możesz utworzyć poleceniem
shopify store create dev. - Zainstaluj Shopify CLI. To narzędzie do tworzenia, podglądu, testowania i udostępniania motywów lokalnie.
- Zacznij od motywu Skeleton. Dokumentacja wskazuje go jako punkt wyjścia do nowego motywu.
- Poznaj sekcje i bloki. Motywy Online Store 2.0 pozwalają dodawać i usuwać sekcje (sections) z dowolnego szablonu, a bloki (blocks) składają się na sekcje.
- Używaj Theme Check. Narzędzie wykrywa błędy i pilnuje dobrych praktyk, gdy piszesz kod.
Pamiętaj, że sam Liquid to za mało. W ofertach pracy pojawiają się też JavaScript, Git i integracje z API, więc jeśli zaczynasz od zera, najpierw nadrób frontend w naszym kursie frontendu.
Jakie są najczęstsze problemy początkujących z Liquid?
Ranking pytań ze Stack Overflow pokazuje, na czym utykają ludzie. Poniżej opisujemy sześć powtarzających się tematów własnymi słowami.
| Problem | Pytanie na Stack Overflow (wyświetlenia) | Co zrobić |
|---|---|---|
| Tekst zamiast liczby | konwersja tekstu na liczbę (ok. 77,7 tys.) | dodaj zero: "42" | plus: 0 |
| Produkt po handle | pobranie konkretnego produktu (ok. 64,4 tys.) | all_products['handle'] |
| Podgląd obiektu | odpowiednik print_r (ok. 29,8 tys.) | {{ product | json }} |
| Data | obliczenia na datach (ok. 34,3 tys.) | zamień datę na liczbę sekund filtrem date |
| Nowa linia | podział tekstu po nowej linii (ok. 25,6 tys.) | newline_to_br, potem split |
| Edytor | podświetlanie składni (ok. 19 tys. i 24,6 tys.) | użyj rozszerzenia do Liquid w edytorze |
Jak zamienić tekst na liczbę?
Wartości z pól tekstowych przychodzą jako tekst, więc działania na nich nie zawsze działają. Najprostszy sposób to dodanie zera: {{ "42" | plus: 0 | times: 2 }} zwraca 84. W bibliotece liquidjs działa to dokładnie tak, a w Shopify ten trik jest szeroko opisywany, ale dokumentacja filtra plus mówi tylko o dodawaniu liczb, więc przetestuj go na swoim sklepie.
Jak pobrać konkretny produkt po handle?
Handle to adres produktu w sklepie, na przykład kubek-ceramiczny. Obiekt all_products pozwala odwołać się do produktu: {{ all_products['kubek-ceramiczny'].title }}. Jeśli produktu nie ma, wynik jest pusty (empty). Uwaga: dokumentacja podaje limit 20 unikalnych handles na jedną stronę. Przy większej liczbie produktów użyj kolekcji.
Jak podejrzeć, co siedzi w obiekcie?
Filtr json zamienia obiekt na tekst w formacie JSON: {{ product | json }}. Wynik dla przykładowego produktu to {"title":"Kubek","price":4900}. Dokumentacja Shopify zastrzega, że dla nowszych sklepów filtr pomija pola inventory_quantity i inventory_policy wariantów, więc stany magazynowe czytaj z konkretnego wariantu.
Jak debugować Liquid krok po kroku?
Liquid nie zgłasza błędu, gdy odwołasz się do właściwości, która nie istnieje, tylko po cichu wypisuje pustkę. Literówka w nazwie pola łatwo więc umyka. Przykład: dla produktu z polami title i price zapis [{{ product.titel }}] zwraca [], a nie komunikat o błędzie. Proponujemy trzy nawyki:
- Wypisz cały obiekt:
{{ product | json }}pokaże dostępne pola, w przykładzie{"title":"Kubek","price":4900}, więc od razu widać, że polatitelnie ma. - Podstaw widoczną wartość zastępczą:
{{ product.titel | default: "BRAK: product.titel" }}zwracaBRAK: product.titeli wskazuje, której zmiennej szukać. - Uruchom Theme Check: narzędzie wykrywa błędy i niezgodności z dobrymi praktykami jeszcze przed publikacją.
Usuń tymczasowe wypisywanie przed wysłaniem zmian na sklep, żeby klient nie zobaczył surowego JSON-a. Przykłady uruchomiliśmy w liquidjs; komunikaty błędów w Shopify mogą różnić się od tych w innych implementacjach.
Jak policzyć coś na datach i podzielić tekst na linie?
W obu przypadkach pomaga zamiana na wygodniejszy format. Datę możesz zamienić filtrem date na liczbę sekund i odjąć lub dodać liczbę, a tekst z wieloma liniami zamienić newline_to_br na znaczniki <br /> i podzielić po nich: {% assign lines = text | newline_to_br | split: "<br />" %}, co dla trzech linii daje lines.size równe 3.
Jak opublikować motyw lub aplikację w marketplace Shopify?
Shopify ma dwa oficjalne sklepy: Theme Store na motywy i App Store na aplikacje.
Jak sprzedawać motyw w Theme Store?
Pierwszym krokiem jest zostanie partnerem motywów (Theme Partner). Potem motyw musi spełnić wszystkie wymagania, bo brak choćby jednego oznacza odrzucenie i poprawki przed ponownym zgłoszeniem. Najważniejsze z nich:
| Wymaganie | Wartość |
|---|---|
| Baza kodu | wyłącznie motyw Skeleton; motywy oparte na Dawn lub Horizon nie kwalifikują się |
| Odmienność | motyw musi się zasadniczo różnić od innych w sklepie, także Twoich |
| Wydajność (Lighthouse) | średnio co najmniej 60 na stronach produktu, kolekcji i głównej, desktop i mobile |
| Dostępność (Lighthouse) | średnio co najmniej 90 |
| Nazwa | poniżej 30 znaków, 1–2 słowa |
| Kolory | co najmniej 4 w ustawieniach |
| Dystrybucja | nie wolno sprzedawać motywu w innych sklepach ani dodawać linków afiliacyjnych |
| Prowizja | 15% revenue share |
Motyw testujesz pod kątem wymagań, zgłaszasz go z opisem dla sprzedawców, a po publikacji go utrzymujesz: odpowiadasz na opinie i aktualizujesz kod.
Jak opublikować aplikację w App Store?
Aplikację zaczynasz poleceniem shopify app init z szablonem React Router, a testujesz na sklepie deweloperskim. Masz dwie drogi dystrybucji:
| Dystrybucja | Dla kogo | Zatwierdzenie | Uwagi |
|---|---|---|---|
| Własna (custom) | jeden sklep lub kilka w jednej organizacji Plus | nie | nie można pobierać opłat przez rozliczenia Shopify |
| Publiczna | wielu sprzedawców w App Store | tak | rejestracja i przegląd Shopify |
Metody dystrybucji nie zmienisz po wyborze, więc wybierz ją na aplikacji produkcyjnej. Dla publicznej aplikacji obowiązują opłaty: jednorazowe 19 USD za konto Partner, brak prowizji od pierwszego miliona dolarów przychodu (liczonego od 1 stycznia 2025), potem 15%, a do tego 2,9% opłaty za przetwarzanie płatności.
Przed zgłoszeniem sprawdź, czy aplikacja jest gotowa do produkcji: instaluje się na sklepie deweloperskim, przekierowuje na ekran OAuth, ma przetestowane rozliczenia i instrukcję testową z danymi logowania oraz krótki film. Najczęstsze powody odrzucenia to błędne informacje o cenach, brak przekierowania do OAuth, błędy po instalacji (404 lub 500) oraz brak instrukcji testowych.
Od czego zacząć zarabiać: Theme Store czy klienci?
Z wymagań widać, że Theme Store to wysoka poprzeczka: oparcie na Skeleton, wyniki Lighthouse, motyw wyraźnie inny od wszystkich w sklepie i brak sprzedaży gdzie indziej. Naszym zdaniem pierwsze pieniądze częściej przyjdą z pracy dla konkretnych sklepów, na przykład z drobnych zmian w motywie albo aplikacji w dystrybucji własnej (bez przeglądu Shopify), niż z własnego motywu w Theme Store. To wniosek z wymagań, a nie z danych o zarobkach. Motyw do Theme Store to dobry projekt na później, gdy znasz już struktury motywów z doświadczenia.
Gdzie zdobyć certyfikat Shopify?
Certyfikaty wydaje Shopify w ramach Partner Academy. Dwa najważniejsze dla programistów to:
- Theme Development Certification. Egzamin składa się z 80 pytań losowanych za każdym razem, a liczba podejść nie jest ograniczona.
- App Development Certification. Dotyczy tworzenia aplikacji.
Aktualną cenę egzaminu, próg zaliczenia i zasady ważności certyfikatu sprawdź bezpośrednio w Shopify Partner Academy, bo oficjalna strona wskazuje je w różnych miejscach i część źródeł jest nieaktualna. Certyfikat pomaga na starcie, ale w ofertach pracy liczy się przede wszystkim doświadczenie, więc dobrym uzupełnieniem jest portfolio kilku motywów lub małych aplikacji.
Czy warto uczyć się Liquid?
Tak, jeśli chcesz pracować ze sklepami Shopify, które według W3Techs stanowią 5,3% wszystkich stron w internecie. Liquid jest mały, więc jego składnię opanujesz szybko. Sam Liquid nie wystarczy jednak do pracy: motywy i aplikacje opierają się na JavaScripcie, a nowoczesne sklepy (aplikacje i podejście headless) budowane są we frameworkach, czyli w Reakcie, TypeScripcie i Next.js. Dlatego po Liquid zaplanuj naukę tych technologii, a jeśli zaczynasz od zera, najpierw zbuduj fundament w ścieżce Zaawansowany JavaScript. Szerszy obraz systemów zarządzania treścią znajdziesz w artykule Czym jest CMS.
