Se hai passato del tempo a costruire sul tuo negozio Shopify, probabilmente ti è capitato di desiderare che una pagina prodotto (Template) avesse un aspetto completamente diverso dalle altre. Magari stai lanciando una "Flash Sale" e vuoi un banner rosso acceso che urli in cima alla pagina. Oppure hai una sezione "Wholesale" e vuoi che sia essenziale: solo il necessario, niente fronzoli.

In passato, usavamo product.template_suffix per ottenere questo risultato. Funziona ancora, ma Shopify è andata avanti. Ora, l'oggetto template è il luogo dove avviene la magia.

Vediamo come puoi usare template.suffix per trasformare completamente l'aspetto del tuo negozio per prodotti specifici, senza stravolgere l'intero layout.

Innanzitutto, cos'è esattamente un "suffix" di un template? Ogni volta che crei un nuovo template in Shopify (come `product.premium-product.liquid`), la parte dopo il punto—premium-product—è il tuo suffix.

Questo piccolo tag dice a Shopify: “Ehi, se qualcuno sta visualizzando questa versione speciale di una pagina prodotto, applica questi stili personalizzati.”

Ecco come si faceva una volta:
{% if product.template_suffix == 'premium-product' %} ... {% endif %}

Funziona, ma diventa rapidamente ingombrante. Oggi si usa l'oggetto globale template, che è molto più flessibile:

- {{ template.name }} ti fornisce il tipo base (come 'product').
- {{ template.suffix }} ti fornisce la parte personalizzata (come 'wholesale').
- {{ template.directory }} ti aiuta a rimanere organizzato se hai sottocartelle.

Parliamo di come usarlo concretamente per lo styling.

La base qui è l'umile istruzione if o lo switch case. Ti permettono di sostituire classi HTML o CSS a seconda del template caricato.

Supponiamo che tu abbia una landing page speciale per il tuo integratore di Berberina e tu voglia far risaltare il titolo, magari per tracciamento o semplicemente per sfoggiare un po'.

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

Se assegni il tuo prodotto al template "premium-product", boom—classe speciale. Tutto il resto mantiene lo styling regolare. Non c'è bisogno di appesantire il tuo CSS con un sacco di override.

Se il tuo negozio ha più di un paio di pagine speciali—Premium, Saldi, Ingrosso, qualsiasi cosa—le tue istruzioni  if si accumulano rapidamente. È qui che un tag case mantiene tutto sotto controllo:

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

Si legge come un menu. Shopify controlla il suffix e serve la variante giusta.

Ecco un buon trucco: inserisci il nome del template direttamente nel tag <body> in theme.liquid. Quindi puoi indirizzare il tuo CSS a un template specifico, niente più modifiche Liquid ogni volta che vuoi uno stile nuovo.

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

Così Shopify genera qualcosa come <body class="template-product-wholesale">. Ora il tuo CSS può semplicemente colpire .template-product-wholesale h1 { color: blue; } e hai finito.

Perché passare per tutte queste strade invece di usare semplicemente un page builder? Beh, i page builder potrebbero sembrare semplici, ma di solito rallentano il tuo sito. Poche righe di Liquid sono:

- Più veloci. Nessun JavaScript extra che rallenta le cose.
- Più puliti. La tua SEO rimane impeccabile. Nessun overlay disordinato.
- Scalabili. Impostalo una volta e ogni prodotto che assegni a quel template funzionerà.

Ecco uno scenario reale: hai un template ingrosso e vuoi nascondere l'opzione "Confezione regalo". Usa il suffix per controllare cosa viene mostrato:

{% if template.suffix == 'wholesale' %}
  <p>Prezzi ingrosso applicati: solo spedizione in blocco.</p>
{% elsif template.suffix == 'gift' %}
  <p>Questo prodotto include una scatola regalo omaggio!</p>
{% else %}
  <p>Si applicano le tariffe di spedizione standard.</p>
{% endif %}

In sintesi: prendere confidenza con template.suffix apre un mondo di personalizzazione per il tuo negozio. Potrai lanciare promozioni speciali, personalizzare le esperienze per diversi clienti e mantenere tutto veloce e ordinato—senza bisogno di costose app.

Quindi la prossima volta che lanci una promo o una nuova collezione, non accettare semplicemente l'aspetto predefinito. Crea un suffix e dai alle tue pagine quel tocco in più. I tuoi clienti se ne accorgeranno.