Wenn Sie schon einmal auf Shopify gebaut haben, sind Sie wahrscheinlich schon einmal an einen Punkt gekommen, an dem Sie wollten, dass eine Produktseite (Template) ganz anders aussieht als alle anderen. Vielleicht führen Sie einen „Flash Sale“ durch und möchten ein auffälliges rotes Banner ganz oben auf der Seite. Oder Sie haben einen „Großhandel“-Bereich und möchten ihn ganz schlicht halten – nur das Nötigste, ohne Schnickschnack.

Früher haben wir uns dafür auf product.template_suffix verlassen. Das funktioniert zwar immer noch, aber Shopify hat sich weiterentwickelt. Heute ist das template Objekt der Ort, an dem die Magie passiert.

Lassen Sie uns genauer ansehen, wie Sie template.suffix nutzen können, um das Erscheinungsbild Ihres Shops für bestimmte Produkte komplett zu überarbeiten, ohne Ihr gesamtes Layout zu sprengen.

Zunächst einmal: Was ist eigentlich ein „Suffix“ eines Templates? Jedes Mal, wenn Sie in Shopify ein neues Template erstellen (z. B. `product.premium-product.liquid`), ist der Teil nach dem Punkt – premium-product – Ihr Suffix.

Dieses kleine Tag sagt Shopify: „Hey, wenn jemand sich diese spezielle Version einer Produktseite ansieht, wende diese benutzerdefinierten Styles an.“

So haben wir das früher gemacht:
{% if product.template_suffix == 'premium-product' %} ... {% endif %}

Das funktioniert, wird aber schnell unhandlich. Heutzutage verwenden Sie das globale template Objekt, das viel flexibler ist:

- {{ template.name }} liefert Ihnen den Basistyp (z. B. 'product').
- {{ template.suffix }} liefert Ihnen Ihren benutzerdefinierten Teil (z. B. 'wholesale').
- {{ template.directory }} hilft Ihnen, organisiert zu bleiben, wenn Sie Unterordner haben.

Lassen Sie uns darüber sprechen, wie Sie das tatsächlich für das Styling verwenden.

Das A und O hier ist die bescheidene if Anweisung oder ein case Switch. Sie ermöglichen es Ihnen, HTML oder CSS-Klassen je nach geladenem Template auszutauschen.

Angenommen, Sie haben eine spezielle Landingpage für Ihr Berberin-Nahrungsergänzungsmittel und möchten, dass die Überschrift heraussticht, vielleicht für Tracking-Zwecke oder einfach, um ein wenig anzugeben.

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

Wenn Sie Ihr Produkt dem Template „premium-product“ zuweisen, zack – spezielle Klasse. Alles andere behält das reguläre Styling. Es ist nicht nötig, Ihr CSS mit einer Menge von Overrides aufzublähen.

Wenn Ihr Shop mehr als ein paar Spezialseiten hat – Premium, Sale, Großhandel, was auch immer – summieren sich Ihre if Anweisungen schnell. Hier hält ein case Tag die Übersicht:

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

Es liest sich wie ein Menü. Shopify prüft das Suffix und liefert die richtige Variante.

Hier ist ein guter Trick: Packen Sie den Template-Namen direkt in Ihr <body> Tag in theme.liquid. Dann können Sie Ihr CSS auf ein bestimmtes Template ausrichten, keine Liquid-Edits mehr jedes Mal, wenn Sie einen neuen Style möchten.

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

So gibt Shopify etwas wie <body class="template-product-wholesale"> aus. Jetzt kann Ihr CSS einfach .template-product-wholesale h1 { color: blue; } treffen und fertig.

Warum all diesen Aufwand betreiben, anstatt einfach einen Pagebuilder zu verwenden? Nun, Pagebuilder sehen vielleicht einfach aus, aber sie verlangsamen normalerweise Ihre Website. Ein paar Zeilen Liquid sind:

- Schneller. Kein zusätzliches JavaScript, das alles ausbremst.
- Sauberer. Ihr SEO bleibt scharf. Keine unordentlichen Overlays.
- Skalierbar. Einmal einstellen und jedes Produkt, das Sie diesem Template zuweisen, funktioniert einfach.

Hier ist ein reales Szenario: Sie haben ein Großhandel-Template und möchten die Option „Geschenkverpackung“ ausblenden. Verwenden Sie das Suffix, um zu steuern, was angezeigt wird:

{% if template.suffix == 'wholesale' %}
  <p>Großhandelspreise angewendet: Nur Großversand.</p>
{% elsif template.suffix == 'gift' %}
  <p>Dieses Produkt enthält eine kostenlose Geschenkbox!</p>
{% else %}
  <p>Standardversandkosten gelten.</p>
{% endif %}

Fazit: sich mit template.suffix vertraut zu machen, eröffnet eine Welt der Anpassung für Ihren Shop. Sie können spezielle Aktionen starten, Erlebnisse für verschiedene Kunden maßschneidern und alles schnell und ordentlich halten – ohne teure Apps.

Wenn Sie also das nächste Mal eine Aktion oder eine neue Kollektion starten, akzeptieren Sie nicht einfach das Standard-Aussehen. Erstellen Sie ein Suffix und geben Sie Ihren Seiten das gewisse Etwas. Ihre Kunden werden es bemerken.