Jeśli spędziłeś jakiś czas na budowaniu sklepu w Shopify, prawdopodobnie zdarzyło Ci się, że chciałeś, aby jedna strona produktu (szablon) wyglądała zupełnie inaczej niż pozostałe. Może organizujesz „Błyskawiczną wyprzedaż” i chcesz, aby na górze strony widniał wyrazisty czerwony baner. A może masz sekcję „Sprzedaż hurtowa” i chcesz ją uprościć — zostawić tylko niezbędne elementy, bez zbędnych dodatków.

Kiedyś wykorzystywaliśmy product.template_suffix, aby uzyskać taki efekt. Nadal działa, ale Shopify poszło naprzód. Teraz to obiekt template jest miejscem, w którym dzieje się magia.

Przyjrzyjmy się, jak możesz wykorzystać template.suffix, aby całkowicie odmienić wygląd sklepu dla konkretnych produktów, nie psując przy tym całego układu.

Zacznijmy od tego, czym właściwie jest „sufiks” szablonu. Za każdym razem, gdy tworzysz nowy szablon w Shopify (np. `product.premium-product.liquid`), fragment po kropce — premium-product — jest sufiksem.

Ta mała etykieta mówi Shopify: „Hej, jeśli ktoś przegląda tę specjalną wersję strony produktu, zastosuj te niestandardowe style”.

Oto jak robiliśmy to kiedyś:
{% if product.template_suffix == 'premium-product' %} ... {% endif %}

To działa, ale szybko staje się nieporęczne. Obecnie używa się globalnego obiektu template, który jest znacznie bardziej elastyczny:

- {{ template.name }} podaje podstawowy typ (np. „product”).
- {{ template.suffix }} dostarcza Twój niestandardowy fragment (np. „wholesale”).
- {{ template.directory }} pomaga zachować porządek, jeśli masz podfoldery.

Porozmawiajmy o tym, jak faktycznie wykorzystać to do stylizacji.

Podstawą jest tutaj skromna instrukcja if lub przełącznik case. Pozwalają one zamienić klasy HTML lub CSS w zależności od tego, który szablon jest załadowany.

Załóżmy, że masz specjalną stronę docelową dla swojego suplementu z Berberyną i chcesz, aby tytuł się wyróżniał — może do celów śledzenia, a może po prostu, żeby się pochwalić.

{% if template.suffix == 'premium-product' %}
  
{{ product.title }}</h1>
{% else %}
  
{{ product.title }}</h1>
{% endif %}

Jeśli przypiszesz swój produkt do szablonu „premium-product”, bum — specjalna klasa. Wszystko inne zachowuje standardowe style. Nie trzeba zaśmiecać CSSu mnóstwem nadpisów.

Jeśli Twój sklep ma więcej niż kilka specjalnych stron — Premium, Wyprzedaż, Sprzedaż hurtowa, cokolwiek — instrukcje if szybko się piętrzą. Wtedy tag case pomaga zachować porządek:

{% case template.suffix %}
  {% when 'premium' %}
    <h1 style="color: gold;">{{ product.title }}</h1>
  {% when 'sale' %}
    <h1 style="color: red;">{{ product.title }}</h1>
  {% else %}
    <h1>{{ product.title }}</h1>
{% endcase %}

Czyta się to jak menu. Shopify sprawdza sufiks i serwuje odpowiedni wariant.

Oto dobry trik: dodaj nazwę szablonu bezpośrednio do tagu <body> w pliku theme.liquid. Wtedy możesz skierować CSS na konkretny szablon — koniec z edycjami Liquid za każdym razem, gdy chcesz nowy styl.

<body class="template-{{ template.name }}{% if template.suffix %}-{{ template.suffix }}{% endif %}">

Wtedy Shopify generuje coś takiego jak <body class="template-product-wholesale">. Teraz Twój CSS może po prostu trafić na .template-product-wholesale h1 { color: blue; } i gotowe.

Dlaczego przechodzić przez to wszystko, zamiast po prostu użyć kreatora stron? Cóż, kreatory stron mogą wyglądać na proste, ale zazwyczaj spowalniają Twoją stronę. Kilka linii Liquid jest:

- Szybsze. Bez dodatkowego JavaScriptu, który wszystko spowalnia.
- Czystsze. Twoje SEO pozostaje na wysokim poziomie. Bez nieporządnych nakładek.
- Skalowalne. Ustaw raz, a każdy produkt przypisany do tego szablonu po prostu będzie działał.

Oto rzeczywisty scenariusz: masz szablon sprzedaży hurtowej i chcesz ukryć opcję „Pakowanie prezentowe”. Użyj sufiksu, aby kontrolować, co się wyświetla:

{% if template.suffix == 'wholesale' %}
  <p>Zastosowano ceny hurtowe: tylko wysyłka zbiorcza.</p>
{% elsif template.suffix == 'gift' %}
  <p>Ten produkt zawiera bezpłatne pudełko prezentowe!</p>
{% else %}
  <p>Obowiązują standardowe stawki wysyłki.</p>
{% endif %}

Podsumowując: opanowanie template.suffix otwiera przed Twoim sklepem świat możliwości personalizacji. Będziesz mógł wprowadzać specjalne promocje, dostosowywać doświadczenia dla różnych klientów i utrzymywać wszystko szybko oraz schludnie — bez konieczności kupowania drogich aplikacji.

Więc następnym razem, gdy będziesz uruchamiać promocję lub nową kolekcję, nie zadowalaj się tylko domyślnym wyglądem. Stwórz sufiks i nadaj swoim stronom ten wyjątkowy szlif. Twoi klienci to zauważą.