Produkte einzelnd anzeigen Dawn 11

Deutsch Diskussion Shopify Design

Topic summary

Hauptfrage: Wie können Produktvarianten im Dawn 11 Theme als einzelne Produkte in Kollektionen angezeigt werden?

Problemstellung:

  • Bestehende Workarounds aus dem Netz funktionieren hauptsächlich für Dawn 9 oder ältere Versionen
  • Getestete Code-Lösungen (z.B. von originateweb.com und Google Docs) zeigen bei Dawn 11 keine Wirkung

Vorgeschlagene Lösungsansätze:

  • App-Lösung: Variator-App wird empfohlen, die diese Funktion mit wenigen Klicks ermöglicht
  • Code-Anpassungen: Möglich, aber komplex - erfordert Änderungen in sections/collection-template.liquid und sections/main-product.liquid sowie JavaScript-Integration

Wichtige Hinweise:

  • Code-Änderungen sollten nur in Themekopie/Testumgebung durchgeführt werden
  • Risiken: Negative Auswirkungen auf Page Loading Speed und Ausschluss von Theme-Updates
  • Alternative: Shopify-Experten engagieren

Ergebnis: Der Fragesteller entscheidet sich gegen die Code-Änderungen, um Performance nicht zu beeinträchtigen, und hofft auf eine native Funktion in zukünftigen Dawn-Updates. Die Diskussion bleibt offen für zukünftige Lösungen.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hallo, gibt es schon eine Möglichkeit im Dawn 11 Theme Varianten-Produkte einzelnd anzeigen zu lassen? Die Work Arounds, die im Netz so herum schwirren, beziehen sich meistens auf Dawn 9 oder darunter. Für den Dawn 11 Theme habe ich leider noch keinen Code gefunden..

2

Hey @m0j0

Danke für die Frage und du sagst “Die Workarounds, die im Netz so herum schwirren, beziehen sich meistens auf Dawn 9 oder darunter.” Hast du einen Link, wie z. B. dieser Leitfaden?

Dann gibt es Apps wie Variator, die das auch für dich mit ein paar Klicks könnenund dir somit den Aufwand enorm erleichtern. :wink:

Mit dem Dawn-Theme und mit der neuen Online Store 2.0 Experience ist es möglich, aber es erfordert definitiv einige Anpassungen am Code. Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Das genaue Vorgehen kann je nach genauer Anforderung variieren. Wenn du beispielsweise möchtest, dass Varianten auf der Kollektionsseite wie separate Produkte angezeigt werden, dann den Liquid-Code des Themes ändern und wahrscheinlich auch JavaScript verwenden, um das gewünschte Verhalten zu erreichen. Eine einfache, allgemeine Anleitung könnte folgendermaßen aussehen:

Produkt-Template anpassen:

  • Öffne im Shopify Adminbereich den Code-Editor und navigiere zu sections/main-product.liquid.
  • Suche nach dem Code, der für die Darstellung der Varianten verantwortlich ist (typischerweise mit Dropdowns oder Radiobuttons).
  • Modifiziere den Code so, dass statt eines Dropdowns einzelne Produktbilder für jede Variante angezeigt werden.

JavaScript verwenden:

  • Damit die Auswahl einer Variante das Hauptproduktbild und den Preis aktualisiert, am besten einen JavaScript verwenden.
  • Es ist ratsam, JavaScript so zu schreiben, dass es auf Änderungen im DOM reagiert, insbesondere wenn du AJAX oder andere dynamische Inhalte auf der Kategorie oder Produktseite hast.

Kollektionsseite anpassen:

  • Wenn du möchtest, dass sich die Varianten auf der Kollektionsseite wie separate Produkte verhalten, wird dies komplizierter.
  • Du müsstest den sections/collection-template.liquid-Code ändern, um durch alle Varianten eines Produkts zu iterieren und diese als separate Produkte anzuzeigen.

Deswegen ist es wahrscheinlich besser eine App zu verwenden. Frontend Apps die man nicht mehr braucht rate ich während der Probezeit zu entfernen, wenn man sie nicht behalten will. Auf diese Weise werden mögliche Gebühren für Apps vermieden. Siehe dazu bitte die App Dokumentation.

VG,

3

Hallo Gabe, ich habe den Code wie hier: https://originateweb.com/show-color-variants-as-separate-products-on-collection-page/

und auch hier: https://docs.google.com/document/d/1tGuqCEjbXo3t_Z0yGiL10wekwijurs-WWkj9KHzKTQg/edit

geändert, aber leider ohne Erfolg. An dem Theme ändert sich bei Dawn 11 anscheinend nichts.

4

@m0j0

Tut mir leid zu hören und es scheint das Code funzt einfach nicht mehr in den neuesten 2.0 Themes. Tbh, da sind auch 9+ ziemlich große Code snippets bzw. Code änderungen die man in das Theme Code einbauen muss, was zu einem sehr instabilen Theme führen kann denke ich, sowie Ausschluss aus den Theme Updates. Möchtest du deinem Theme, deinem Shop, und deinen Kunden das wirklich antun?

In diesem Fall wird das einen Experten verlangen und du findest die in unserem Design Forum (wie oben verlinkt) und wenn du deine Frage da postest wird sich einer melden der einen tieferen :eye: in deinem Code werfen kann.

5

Hey, nein ich denke ich komm auch ohne diese Änderungen zurecht. Vielleicht kommt so eine Funktion ja irgendwann einmal out of the box mit einem neuen Dawn Theme Update (was richtig nice wäre). Ich möchte den Page Loading Speed natürlich nicht zu stark beeinträchtigen. Die Produkte der Varianten einzelnd anzeigen zu lassen würde den Shop halt nicht so leer aussehen lassen. Vielleicht gibt es ja in Zukunft eine Lösung. Danke auf jeden Fall für Deine Hilfe :+1:

1 Like