Jeśli prowadzisz sklep na Shopify i choć raz zajrzałeś do plików motywu, to pewnie widziałeś rozszerzenie .liquid. I wtedy pojawia się pytanie: czy to jest programowanie? Czy muszę być deweloperem? Czy da się to w ogóle zrozumieć bez doktoratu z informatyki?
Zaraz wszystko zrozumiesz.
Shopify Liquid to język szablonów (template language), który odpowiada za to, w jaki sposób dane Twojego sklepu zamieniają się w realną stronę, którą widzi klient. To warstwa pośrednia między bazą danych Shopify (produkty, ceny, kolekcje, blogi, koszyki, ustawienia sklepu) a HTML-em generowanym w przeglądarce.
Liquid nie jest klasycznym językiem programowania jak JavaScript czy Python. Nie budujesz w nim aplikacji, nie zapisujesz danych do bazy, nie tworzysz logiki backendowej. Jego zadaniem jest renderowanie - czyli decydowanie, co i jak wyświetlać na stronie, zanim trafi ona do użytkownika.
Gdy ktoś wchodzi na stronę produktu, Shopify bierze pliki szablonu .liquid, wstawia w odpowiednie miejsca dane konkretnego produktu (tytuł, cenę, opis, zdjęcia, warianty) i generuje gotowy kod HTML. Dzięki temu nie tworzysz osobnej strony dla każdego produktu - masz jeden szablon, który dynamicznie dostosowuje się do kontekstu.
Liquid został zaprojektowany jako bezpieczny i kontrolowany sposób pracy z danymi. Shopify nie daje bezpośredniego dostępu do serwera ani do wewnętrznej logiki systemu. Zamiast tego udostępnia zestaw obiektów (np. product, collection, cart, shop) oraz narzędzia do ich wyświetlania i przetwarzania.
Dzięki temu możesz dynamicznie budować widoki, ale nie możesz przypadkowo „zepsuć” całego systemu. To kompromis między elastycznością a bezpieczeństwem – i to bardzo przemyślany kompromis.
Liquid opiera się na trzech głównych elementach: obiektach, tagach i filtrach.
Obiekty to dane, które Shopify udostępnia w danym kontekście. Na stronie produktu masz dostęp do obiektu product. Na stronie kolekcji - do collection. W koszyku - do cart. Każdy z tych obiektów ma swoje właściwości, które możesz wyświetlać w szablonie, np. tytuł produktu czy jego cenę.
Tagi odpowiadają za logikę. To dzięki nim możesz warunkowo coś pokazać lub ukryć, przejść w pętli przez wszystkie produkty w kolekcji albo przypisać wartość do zmiennej. Liquid nie służy do budowania złożonych algorytmów, ale świetnie sprawdza się w kontrolowaniu struktury i przepływu treści.
Filtry pozwalają modyfikować dane przed ich wyświetleniem. Możesz zmienić wielkość liter, przyciąć tekst, sformatować cenę w odpowiedniej walucie czy przekształcić datę. To drobne narzędzia, ale w praktyce robią ogromną różnicę w jakości wyświetlanych informacji.
Ważne jest też zrozumienie kontekstu. Nie każdy obiekt jest dostępny wszędzie. product istnieje w szablonie produktu, ale niekoniecznie w innych miejscach. Liquid działa w określonym zakresie i trzeba wiedzieć, z jakimi danymi pracujesz w danym pliku.
Liquid nie zastępuje HTML-a - on go generuje. To oznacza, że w pliku .liquid masz zwykły HTML przeplatany dynamicznymi fragmentami. Najpierw Liquid tworzy finalny HTML, a dopiero później przeglądarka go renderuje i ewentualnie uruchamia JavaScript.
To rozróżnienie jest kluczowe. Jeśli chcesz warunkowo wyświetlić sekcję tylko dla produktów dostępnych – robisz to w Liquid. Jeśli chcesz dodać animację po kliknięciu przycisku – to już rola JavaScriptu.
Mylenie tych dwóch warstw jest jednym z najczęstszych błędów przy pracy z Shopify.
W nowszej architekturze Shopify (Online Store 2.0) Liquid stał się jeszcze bardziej elastyczny. Sekcje mogą być dynamiczne, konfiguracja treści jest mocno powiązana z metafields, a szablony JSON pozwalają na większą modularność.
To oznacza, że Liquid nie jest już tylko językiem „wklejania danych w HTML”, ale elementem większego systemu budowania elastycznych, skalowalnych motywów. Możesz projektować sekcje, które marketer czy właściciel sklepu później konfiguruje z poziomu edytora – bez dotykania kodu.
Liquid nie zapisuje danych do bazy, nie komunikuje się bezpośrednio z zewnętrznymi API i nie wykonuje operacji asynchronicznych. To nie jest backend aplikacyjny. To język renderowania widoków.
Jeśli próbujesz używać Liquid do rzeczy, które powinny być rozwiązane przez aplikację, webhook czy JavaScript – prędzej czy później dojdziesz do ściany.
Bo Liquid decyduje o tym, jak działa Twój sklep od strony strukturalnej. To on odpowiada za to, czy treści są dynamiczne, czy SEO jest poprawnie generowane, czy metafields są wykorzystywane, czy motyw jest modularny i skalowalny.
Nie musisz pisać kodu samodzielnie, ale jeśli rozumiesz, czym jest Liquid i jaką pełni rolę, dużo łatwiej współpracować z developerem, podejmować decyzje technologiczne i myśleć o sklepie w sposób systemowy.
W Obfitości traktujemy Liquid nie jako „techniczny detal”, ale jako fundament architektury sklepu. To dzięki niemu możemy budować rozwiązania, które nie tylko wyglądają dobrze, ale są elastyczne, gotowe na rozwój, nowe rynki i nowe potrzeby.
Bo Shopify to system a Liquid jest jego językiem.
Tworzę branding i doświadczenia zakupowe, które zostają w głowie. W Obfitości dbam o spójność, emocje i detale. Kiedy nie siedzę w Figma, gram w gry, słucham jazzu albo uczę się latać szybowcem - precyzja to moje drugie imię.
Nie wiesz, od czego zacząć?
My wiemy - skontaktuj się z nami
i wspólnie zaprojektujmy Twój sklep!
POGADAJMY
Śmiało ;)
