Om du har lagt lite tid på att bygga på Shopify har du förmodligen hamnat i en situation där du vill att en produktsida (mall) ska se helt annorlunda ut än de andra. Kanske håller du på att lansera en "blixtrea" och vill ha en iögonfallande röd banner högst upp på sidan. Eller så har du en sektion för "grossistförsäljning" och vill att den ska vara avskalad – bara det nödvändigaste, inget onödigt.

Förr förlitade vi oss på product.template_suffix för att lösa det här. Det fungerar fortfarande, men Shopify har gått vidare. Nu är det template objektet där magin händer.

Låt oss titta närmare på hur du kan använda template.suffix för att helt förvandla utseendet på din butik för specifika produkter, utan att förstöra hela layouten.

Först och främst, vad är egentligen en malls "suffix"? Varje gång du skapar en ny mall i Shopify (som `product.premium-product.liquid`), är delen efter punkten – premium-product – ditt suffix.

Den här lilla taggen talar om för Shopify: "Hej, om någon tittar på den här specialversionen av en produktsida, tillämpa dessa anpassade stilar."

Så här gjorde vi förr:
{% if product.template_suffix == 'premium-product' %} ... {% endif %}

Det fungerar, men det blir snabbt klumpigt. Idag använder du det globala template objektet, som är mycket mer flexibelt:

- {{ template.name }} ger dig grundtypen (som 'product').
- {{ template.suffix }} ger dig din anpassade del (som 'wholesale').
- {{ template.directory }} hjälper dig att hålla ordning om du har undermappar.

Låt oss prata om hur du faktiskt använder det här för styling.

Grunden här är det enkla if villkoret eller en case switch. De låter dig byta ut HTML- eller CSS-klasser beroende på vilken mall som laddas.

Tänk dig att du har en speciell landningssida för ditt Berberine-tillskott och vill att titeln ska sticka ut, kanske för spårning eller bara för att visa lite.

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

Om du tilldelar din produkt mallen "premium-product", bom – specialklass. Allt annat behåller den vanliga stilen. Inget behov av att fylla din CSS med en massa överstyrningar.

Om din butik har mer än ett par specialsidor – Premium, Rea, Grossistförsäljning, vad som helst – så staplas dina  if villkor snabbt. Det är här en case tag håller ordning:

{% 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 %}

Det läses som en meny. Shopify kontrollerar suffixet och serverar rätt variant.

Här är ett bra knep: lägg mallnamnet direkt i din <body> tagg i theme.liquid. Då kan du rikta din CSS till en specifik mall, inga fler Liquid-redigeringar varje gång du vill ha en ny stil.

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

Så Shopify spottar ut något i stil med <body class="template-product-wholesale">. Nu kan din CSS bara träffa .template-product-wholesale h1 { color: blue; } och du är klar.

Varför gå igenom allt det här istället för att bara använda en sidbyggare? Tja, sidbyggare kan se enkla ut, men de saktar vanligtvis ner din webbplats. Några rader Liquid är:

- Snabbare. Inget extra JavaScript som drar ut på tiden.
- Renare. Din SEO förblir skarp. Inga stökiga överlägg.
- Skalbar. Ställ in det en gång och varje produkt du tilldelar den mallen fungerar direkt.

Här är ett verkligt scenario: du har en grossistmall och vill dölja alternativet "Presentförpackning". Använd suffixet för att styra vad som visas:

{% if template.suffix == 'wholesale' %}
  <p>Grossistpriser tillämpade: Endast frakt för bulkbeställningar.</p>
{% elsif template.suffix == 'gift' %}
  <p>Den här produkten inkluderar en gratis presentask!</p>
{% else %}
  <p>Standardfrakt gäller.</p>
{% endif %}

Slutsats: att bli bekväm med template.suffix öppnar upp en värld av anpassning för din butik. Du kommer att kunna rulla ut specialerbjudanden, skräddarsy upplevelser för olika kunder och hålla allt snabbt och prydligt – inga dyra appar krävs.

Så nästa gång du lanserar ett erbjudande eller en ny kollektion, acceptera inte bara standardutseendet. Skapa ett suffix och ge dina sidor den där extra touchen. Dina kunder kommer att märka det.