Shopify Liquid – czym jest i co warto o nim wiedzieć?

Czym jest Shopify Liquid?

Shopify Liquid to język szablonów typu open source stworzony przez Shopify i napisany w języku Ruby. Czym jest Shopify Liquid? Jest on podstawą motywów Shopify i służy do ładowania dynamicznej zawartości na witrynach sklepowych. Shopify Liquid jest używany w środowisku produkcyjnym w Shopify od 2006 roku.

Składnia Shopify Liquid 

Shopify Liquid jako język szablonów używany jest w Shopify do dynamicznego generowania treści na stronach sklepów internetowych opartych na tej platformie. Składnia Shopify Liquid to m.in.:

Zmienne: Możesz używać zmiennych do przechowywania danych i wyświetlania ich na stronach. Na przykład:

{{ product.title }}

Tagi: Tagi są używane do wykonania logiki i kontroli przepływu. Na przykład:

{% if product.price > 50 %}

  This product is expensive!

{% endif %}

Filtry: Filtry są używane do modyfikowania wyjścia zmiennych. Na przykład:

{{ product.title | upcase }}

Pętle: Pętle służą do iterowania przez zbiory danych, takie jak tablice lub listy. Na przykład:

{% for product in collection.products %}

  {{ product.title }}

{% endfor %}

Include: Pozwala na zawarcie treści innego pliku szablonu. Na przykład:

{% include ‘product-grid’ %}

Komentarze: Służą do dodawania komentarzy w kodzie, które nie będą renderowane w wynikowym HTML-u. Na przykład:

{# This is a comment #}

Operatory logiczne: Liquid obsługuje standardowe operatory logiczne, takie jak and, or, ==, !=, itp.

To oczywiście tylko kilka podstawowych elementów składni. Shopify Liquid oferuje zdecydowanie więcej funkcji i możliwości, które pozwalają na dynamiczne tworzenie treści i dostosowywanie sklepów internetowych do potrzeb właścicieli sklepów. Te poszczególne składowe Shopify Liquid to również podstawowe informacje, jakie warto o nim wiedzieć.

Cechy Shopify Liquid 

Shopify Liquid ma wiele cech, które czynią go potężnym narzędziem. Poniżej omawiamy te cechy Shopify Liquid, które mają znaczący wpływ również na jego popularność: 

Prostota: Liquid został zaprojektowany z myślą o prostocie i łatwości użycia. Składnia jest przejrzysta i intuicyjna, co ułatwia tworzenie i zarządzanie szablonami.

Bezpieczeństwo: Liquid jest bezpiecznym językiem, który chroni przed atakami typu XSS (Cross-Site Scripting).

Elastyczność: Dzięki Liquid możesz tworzyć bardzo elastyczne szablony, które można łatwo dostosować do różnych potrzeb sklepu internetowego. Możesz dynamicznie wyświetlać produkty, kategorie, promocje itp.

Współpraca z Shopify: Liquid jest integralną częścią platformy Shopify, co oznacza, że ​​jest idealnie zintegrowany z jej funkcjami i możliwościami. Pozwala to na płynne tworzenie i zarządzanie szablonami sklepu.

Obsługa wielu języków: Liquid wspiera tłumaczenie treści na wiele języków, co jest kluczowe dla sklepów internetowych działających na różnych rynkach międzynarodowych.

Dostęp do danych sklepu: Liquid umożliwia dostęp do danych sklepu, takich jak produkty, kategorie, zamówienia itp., Co pozwala na dynamiczne generowanie treści na podstawie tych danych.

Modularność: Dzięki możliwości zawierania (include) innych plików szablonów oraz wykorzystywania pętli i warunków, Liquid pozwala na modularyzację kodu, co ułatwia zarządzanie szablonami i utrzymanie ich w czystości.

Powyższe cechy Shopify Liquid pozwalają również odpowiedzieć na pytanie, co warto wiedzieć o Shopify Liquid. 

Instalacja Liquid 

Instalacja Shopify Liquid nie wymaga osobnego procesu instalacji i wynika to z tego, że Liquid jest integralną częścią platformy Shopify. Oznacza to, że jest on automatycznie dostępny do użycia podczas tworzenia i edycji szablonów sklepu internetowego w panelu administracyjnym Shopify.

Jakie korzyści Shopify Liquid wprowadza dla właściciela sklepu? 

Shopify Liquid wprowadza wiele korzyści dla właściciela sklepu, zapewniając elastyczność, kontrolę i możliwość personalizacji w tworzeniu oraz zarządzaniu szablonami sklepu internetowego. Oto kilka kluczowych korzyści:

Elastyczność w projektowaniu: Dzięki Shopify Liquid właściciele sklepów mogą projektować niestandardowe i atrakcyjne szablony, które odzwierciedlają ich markę i wyróżniają się na tle konkurencji. Liquid pozwala na tworzenie dynamicznych i responsywnych szablonów, które mogą być dostosowywane do różnych urządzeń i potrzeb użytkowników.

Personalizacja treści: Liquid umożliwia personalizację treści na stronach sklepu internetowego na podstawie danych klienta, takich jak historia zakupów, preferencje produktowe, czy lokalizacja geograficzna. Dzięki temu właściciele sklepów mogą dostarczać bardziej ukierunkowane i spersonalizowane doświadczenia zakupowe dla swoich klientów.

Dynamiczne wyświetlanie produktów: Za pomocą Liquid właściciele sklepów mogą dynamicznie wyświetlać produkty na różnych stronach sklepu, takich jak strona główna, strony kategorii, czy strony produktów. Mogą również stosować filtry i sortowanie, aby pomóc klientom w znalezieniu produktów, które najlepiej odpowiadają ich potrzebom.

Integracja z aplikacjami i narzędziami zewnętrznymi: Liquid pozwala na łatwą integrację z różnymi aplikacjami i narzędziami zewnętrznymi, co umożliwia właścicielom sklepów rozszerzenie funkcjonalności swojego sklepu. Mogą korzystać z różnych aplikacji, takich jak narzędzia do marketingu e-mailowego, analizy danych, czy zarządzania magazynem i integrować je z szablonami sklepu za pomocą Liquid.

Łatwa modyfikacja i zarządzanie treściami: Liquid ułatwia modyfikację i zarządzanie treściami na stronach sklepu internetowego. Właściciele sklepów mogą szybko aktualizować treści, dodawać nowe elementy, czy też testować różne warianty treści, aby zoptymalizować doświadczenia użytkowników i wskaźniki konwersji.

Na czym polega template language? 

Template language, czyli język szablonów, to specjalny rodzaj języka programowania lub składni, który jest używany do tworzenia szablonów dokumentów lub stron internetowych. Głównym celem języka szablonów jest umożliwienie dynamicznego generowania treści na podstawie określonych danych lub wzorców. Oto trzy ważne cechy template language:

Dynamiczne generowanie treści: Język szablonów pozwala na dynamiczne wstawianie danych, warunków, pętli i innych elementów do szablonów.

Skrócenie czasu potrzebnego na tworzenie szablonów: Używanie języka szablonów może skrócić czas potrzebny na tworzenie szablonów, ponieważ umożliwia wielokrotne wykorzystanie kodu i wprowadzanie dynamicznych zmian.

Ułatwienie personalizacji treści: Dzięki językowi szablonów można łatwo personalizować treści w zależności od określonych warunków lub danych.

Jak używać Shopify Liquid? 

Oto podstawowe kroki, które należy podjąć w kontekście tego, jak używać Shopify Liquid:

→ Zaloguj się do panelu administracyjnego Shopify: Przejdź do strony logowania Shopify i zaloguj się do swojego konta, aby uzyskać dostęp do panelu administracyjnego.

→ Przejdź do sekcji Szablony: W panelu administracyjnym przejdź do sekcji “Szablony”, gdzie będziesz mógł zarządzać szablonami sklepu internetowego.

→ Wybierz szablon do edycji: Wybierz szablon, który chcesz edytować lub dostosować. Możesz wybierać spośród różnych szablonów, takich jak strona główna, strony produktów, kolekcje, itp.

→ Edytuj szablon: Po wybraniu szablonu będziesz mógł edytować jego zawartość za pomocą składni Liquid. Składnia ta pozwala na dynamiczne generowanie treści, używanie warunków, pętli, filtrów i innych funkcji.

→ Zapisz zmiany: Po dokonaniu żądanych zmian w szablonie kliknij przycisk “Zapisz” lub “Zapisz zmiany”, aby zastosować wprowadzone zmiany.

→ Podgląd zmian: Shopify oferuje funkcję podglądu zmian, dzięki której możesz zobaczyć, jak będą wyglądać Twoje zmiany przed ich opublikowaniem. Możesz użyć tego narzędzia, aby upewnić się, że wszystko wygląda zgodnie z oczekiwaniami.

→ Opublikuj zmiany: Po zatwierdzeniu zmian i upewnieniu się, że są one zgodne z oczekiwaniami, możesz opublikować je, aby były widoczne dla odwiedzających Twojego sklepu.

Ważne jest, aby zrozumieć podstawy składni Liquid, aby móc efektywnie tworzyć i modyfikować szablony. Warto korzystać z dokumentacji Shopify Liquid, która jest skarbnicą wiedzy w tym zakresie. 

Gdzie możesz uczyć się Shopify Liquid? 

Wielu programistów, którzy zaczynają swoją przygodę z Shopify zastanawia się, gdzie możesz uczyć się Shopify Liquid. Oto kilka sugestii, gdzie można szukać wiedzy:

Oficjalna dokumentacja Shopify: Oficjalna dokumentacja Shopify zawiera obszerny przewodnik po składni Liquid, w tym przykłady i objaśnienia różnych funkcji. Możesz znaleźć ją na stronie internetowej Shopify.

Kursy online: Istnieją liczne kursy online, które oferują naukę Shopify Liquid, np. na Udemy.

Społeczność Shopify: Społeczność użytkowników Shopify jest bardzo aktywna, więc możesz znaleźć wiele poradników, porad oraz przydatnych materiałów na forach internetowych, grupach dyskusyjnych, czy w serwisach społecznościowych.

YouTube: Na platformie YouTube znajdziesz wiele darmowych tutoriali wideo dotyczących Shopify Liquid. Znajdziesz tam prezentacje, kursy oraz poradniki od doświadczonych użytkowników i ekspertów.

Oficjalne szkolenia Shopify: Shopify oferuje również płatne szkolenia i kursy, w tym specjalne szkolenia dotyczące Liquid, które mogą być przydatne dla tych, którzy chcą pogłębić swoją wiedzę na ten temat.

Zastosowanie Shopify Liquid

Shopify Liquid znajduje zastosowanie we wszystkich aspektach projektowania i zarządzania sklepem internetowym opartym na platformie Shopify. Oto kilka konkretnych zastosowań tego języka:

Tworzenie niestandardowych szablonów stron: Możesz używać Liquid do tworzenia niestandardowych szablonów stron, takich jak strona główna, strony produktów, strony kolekcji, strony informacyjne itp.

Personalizacja treści: Liquid pozwala na personalizację treści w zależności od różnych czynników, takich jak np. lokalizacja geograficzna klienta. 

Zarządzanie koszykiem: Liquid umożliwia dostosowanie wyglądu i funkcjonalności koszyka zakupowego.

Integracja z aplikacjami i narzędziami zewnętrznymi: Liquid pozwala na integrację z różnymi aplikacjami i narzędziami zewnętrznymi.

Optymalizacja SEO: Liquid umożliwia optymalizację stron sklepu pod kątem wyszukiwarek internetowych (SEO) poprzez dostosowywanie treści, meta tagów, linków itp. Stronę można zoptymalizować pod kątem kluczowych słów i fraz, co może pomóc w poprawie widoczności Twojego sklepu w wynikach wyszukiwania.

Przykłady kodu

Poniżej prezentujemy przykłady kodu, jeśli chodzi o Shopify Liquid: 

1) Wyświetlanie tytułu produktu na stronie produktu:

<h1>{{ product.title }}</h1>

2) Wyświetlanie listy kategorii w menu nawigacyjnym:

<ul class=”menu”> {% for collection in collections %} <li><a href=”{{ collection.url }}”>{{ collection.title }}</a></li> {% endfor %} </ul>

3) Wyświetlanie obrazu produktu w liście produktów:

<img src=”{{ product.featured_image.src }}” alt=”{{ product.title }}”>

4) Wyświetlanie ceny produktu wraz z rabatem:

{% if product.compare_at_price > product.price %} <span class=”original-price”>{{ product.compare_at_price | money }}</span> <span class=”discounted-price”>{{ product.price | money }}</span> {% else %} <span class=”regular-price”>{{ product.price | money }}</span> {% endif %}

5) Wyświetlanie przycisku “Dodaj do koszyka” na stronie produktu:

<form action=”/cart/add” method=”post”> <input type=”hidden” name=”id” value=”{{ product.variants.first.id }}”> <input type=”submit” value=”Dodaj do koszyka”> </form>

6) Wyświetlanie pętli produktów na stronie głównej:

<div class=”products”> {% for product in collections.frontpage.products %} <div class=”product”> <h2>{{ product.title }}</h2> <img src=”{{ product.featured_image.src }}” alt=”{{ product.title }}”> <p>{{ product.price | money }}</p> <a href=”{{ product.url }}”>Więcej informacji</a> </div> {% endfor %} </div>

7) Wyświetlanie informacji o zamówieniu na stronie potwierdzenia zamówienia:

<p>Dziękujemy za złożenie zamówienia nr {{ order.order_number }}. Status Twojego zamówienia to: {{ order.fulfillment_status }}</p>

Shopify Liquid to potężny język szablonów, którego potencjał zdecydowanie warto wykorzystywać w kontekście sklepów Shopify. Noto, jako agencja Shopify należąca do grona Shopify Partner skupia się właśnie na tym, by wykorzystać Shopify Liquid możliwie jak najbardziej i tworzyć sklepy, które w oparciu o Liquid są odpowiednio zoptymalizowane, user friendly i bazują na najlepszych praktykach Shopify.