Si vous avez déjà passé du temps à développer sur Shopify, vous avez probablement déjà voulu qu’une page produit (modèle) soit totalement différente des autres. Peut-être organisez-vous une « vente flash » et souhaitez-vous une bannière rouge percutante qui attire l’attention en haut de la page. Ou peut-être avez-vous une section « Vente en gros » que vous souhaitez épurée, avec uniquement l’essentiel, sans fioritures.

Autrefois, nous utilisions product.template_suffix pour y parvenir. Cela fonctionne toujours, mais Shopify a évolué. Désormais, c’est l’objet template qui permet de faire des miracles.

Découvrons comment vous pouvez utiliser template.suffix pour transformer complètement l’apparence de votre boutique pour des produits spécifiques, sans bouleverser l’ensemble de votre mise en page.

Tout d’abord, qu’est-ce qu’un « suffixe » de modèle ? Chaque fois que vous créez un nouveau modèle sur Shopify (comme `product.premium-product.liquid`), la partie après le point — premium-product — est votre suffixe.

Cette petite balise indique à Shopify : « Hé, si quelqu’un consulte cette version spéciale d’une page produit, applique ces styles personnalisés. »

Voici comment nous faisions auparavant :
{% if product.template_suffix == 'premium-product' %} ... {% endif %}

Cela fonctionne, mais cela devient vite fastidieux. Aujourd’hui, vous utilisez l’objet global template, qui est bien plus flexible :

- {{ template.name }} vous donne le type de base (comme « product »).
- {{ template.suffix }} vous fournit votre partie personnalisée (comme « wholesale »).
- {{ template.directory }} vous aide à rester organisé si vous utilisez des sous-dossiers.

Voyons maintenant comment utiliser concrètement cela pour le style.

La base repose sur la simple instruction if ou sur l’instruction case. Elles vous permettent de remplacer des balises HTML ou des classes CSS selon le modèle chargé.

Imaginons que vous ayez une page de destination spéciale pour votre complément à la berbérine et que vous souhaitiez faire ressortir le titre, peut-être pour le suivi ou simplement pour vous démarquer.

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

Si vous affectez votre produit au modèle « premium-product », voilà — une classe spéciale. Tout le reste conserve son style habituel. Pas besoin d’alourdir votre CSS avec une multitude de modifications.

Si votre boutique comporte plus d’une page spéciale — Premium, Vente, Vente en gros, peu importe — les instructions  if s’accumulent rapidement. C’est là qu’une balise case permet de garder les choses simples :

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

Cela se lit comme un menu. Shopify vérifie le suffixe et affiche la bonne variante.

Voici une bonne astuce : ajoutez directement le nom du modèle à votre balise <body> dans theme.liquid. Vous pourrez ensuite cibler votre CSS pour un modèle spécifique, sans plus avoir à modifier le Liquid chaque fois que vous voudrez un nouveau style.

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

Shopify génère alors quelque chose comme <body class="template-product-wholesale">. Il vous suffit alors d’ajouter dans votre CSS .template-product-wholesale h1 { color: blue; } et le tour est joué.

Pourquoi s’embêter avec tout cela au lieu d’utiliser simplement un créateur de pages ? Certes, les créateurs de pages peuvent sembler simples, mais ils ralentissent généralement votre site. Quelques lignes de Liquid sont :

- Plus rapides. Aucun JavaScript supplémentaire pour ralentir le site.
- Plus propres. Votre SEO reste performant. Pas de superpositions complexes.
- Évolutives. Configurez-les une fois et tous les produits que vous affecterez à ce modèle fonctionneront automatiquement.

Voici un exemple concret : vous avez un modèle de vente en gros et vous souhaitez masquer l’option « Emballage cadeau ». Utilisez le suffixe pour contrôler ce qui s’affiche :

{% if template.suffix == 'wholesale' %}
  <p>Tarifs de gros appliqués : expédition en gros uniquement.</p>
{% elsif template.suffix == 'gift' %}
  <p>Ce produit comprend une boîte cadeau offerte !</p>
{% else %}
  <p>Les tarifs d’expédition standard s’appliquent.</p>
{% endif %}

En résumé : maîtriser template.suffix ouvre un vaste champ de personnalisation pour votre boutique. Vous pourrez lancer des offres spéciales, adapter les expériences aux différents clients et tout garder rapide et organisé, sans avoir besoin d’applications coûteuses.

Alors, la prochaine fois que vous lancerez une promotion ou une nouvelle collection, ne vous contentez pas de l’apparence par défaut. Créez un suffixe et donnez à vos pages cette touche supplémentaire. Vos clients le remarqueront.