Als je al een tijdje op Shopify hebt gebouwd, ben je vast wel eens tegen een moment aan gelopen waarop je wilt dat één productpagina (sjabloon) er totaal anders uitziet dan de rest. Misschien voer je een "Flash Sale" uit en wil je een opvallende rode banner bovenaan de pagina laten schreeuwen. Of je hebt een "Wholesale"-sectie en wilt deze helemaal leegmaken—alleen de essentie, geen onnodige extra's.

Vroeger vertrouwden we op product.template_suffix om dit te bereiken. Dat werkt nog steeds, maar Shopify is verder. Tegenwoordig is het template object de plek waar de magie gebeurt.

Laten we eens onderzoeken hoe je template.suffix kunt gebruiken om de uitstraling van je winkel voor specifieke producten volledig te veranderen, zonder je hele lay-out te verpesten.

Eerst even: wat is eigenlijk een "suffix" van een sjabloon? Elke keer als je een nieuw sjabloon in Shopify maakt (zoals `product.premium-product.liquid`), is het deel na de punt—premium-product—je suffix.

Dit kleine label vertelt Shopify: “Hey, als iemand naar deze speciale versie van een productpagina kijkt, pas dan deze aangepaste stijlen toe.”

Zo deden we het vroeger:
{% if product.template_suffix == 'premium-product' %} ... {% endif %}

Het werkt, maar wordt al snel onoverzichtelijk. Tegenwoordig gebruik je het globale template object, dat veel flexibeler is:

- {{ template.name }} geeft je het basistype (zoals 'product').
- {{ template.suffix }} geeft je het aangepaste deel (zoals 'wholesale').
- {{ template.directory }} helpt je georganiseerd te blijven als je submappen hebt.

Laten we het hebben over hoe je dit daadwerkelijk kunt gebruiken voor styling.

De basis hiervan is de bescheiden if statement of een case switch. Hiermee kun je HTML of CSS-klassen uitwisselen, afhankelijk van welk sjabloon is geladen.

Stel, je hebt een speciale landingspagina voor je Berberine-supplement en je wilt dat de titel opvalt, misschien voor trackingdoeleinden of gewoon om een beetje te pronken.

{% if template.suffix == 'premium-product' %}
  
{{ product.title }}

{% else %}
  
{{ product.title }}

{% endif %}

Als je je product toewijst aan het "premium-product"-sjabloon, boem—speciale class. Alles overig behoudt de gewone styling. Geen noodzaak om je CSS te vervuilen met een heleboel overrides.

Als je winkel meer dan een paar speciale pagina's heeft—Premium, Sale, Wholesale, wat dan ook—stapelen je if statements zich snel op. Dat is waar een case tag de boel overzichtelijk houdt:

{% case template.suffix %}
  {% when 'premium' %}
    
{{ product.title }}

  {% when 'sale' %}
    
{{ product.title }}

  {% else %}
    
{{ product.title }}

{% endcase %}

Het leest als een menu. Shopify controleert de suffix en serveert de juiste smaak.

Hier is een goede truc: plak de sjabloonnaam direct in je <body> tag in theme.liquid. Dan kun je je CSS richten op een specifiek sjabloon, geen Liquid-bewerkingen meer elke keer dat je een nieuwe stijl wilt.

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

Shopify spuugt dan iets uit als <body class="template-product-wholesale">. Nu kan je CSS gewoon .template-product-wholesale h1 { color: blue; } pakken en je bent klaar.

Waarom al dat gedoe volhouden in plaats van gewoon een paginabouwer te gebruiken? Nou, paginabouwers zien er misschien eenvoudig uit, maar ze vertragen je site meestal. Een paar regels Liquid zijn:

- Sneller. Geen extra JavaScript dat dingen vertraagt.
- Schoner. Je SEO blijft scherp. Geen rommelige overlays.
- Schaalbaar. Stel het één keer in en elk product dat je aan dat sjabloon toewijst, werkt gewoon.

Hier is een echt scenario: je hebt een wholesale-sjabloon en je wilt de optie "Cadeauverpakking" verbergen. Gebruik de suffix om te bepalen wat er wordt getoond:

{% if template.suffix == 'wholesale' %}
  
Groothandelsverkoopprijs toegepast: alleen verzending in bulk.</p>
{% elsif template.suffix == 'gift' %}
  
Dit product wordt geleverd met een gratis geschenkdoos!</p>
{% else %}
  
Standaard verzendkosten zijn van toepassing.</p>
{% endif %}

Kortom: comfortabel worden met template.suffix opent een wereld van aanpassing voor je winkel. Je kunt speciale promoties uitrollen, ervaringen op maat maken voor verschillende klanten en alles snel en netjes houden—zonder dure apps.

Dus de volgende keer dat je een promotie of een nieuwe collectie lanceert, accepteer dan niet zomaar de standaardlook. Maak een suffix en geef je pagina's die extra touch. Je klanten zullen het merken.