Motivspezifischen Abschnitt zur Produktseite hinzufügen und Inhalt an einer Stelle definieren

Deutsch Diskussion Technische Fragen & Antworten
, ,
1

Hallo, ich versuche mich seit einigen Wochen mit Shopify und seiner Struktur vertraut zu machen. Nun ging es an konkrete Umsetzungen bezüglich meiner Produkte und Informationen die ich spezifisch dafür vorgesehen habe.

Was ich mir vorgestellt habe:
Ich habe Produkte verschiedener Kategorien bspw. T-Shirts und Herrenanzüge. Für beide Kategorien (Kollektionen) habe ich eine Produktseiten-Vorlage erstellt. Ganz unten auf jeder dieser Vorlagen setze ich ein Foto mit Beschreibungstext zu genau dieser Kategorie wo die Highlights des Produkts nochmal hervorgehoben werden, beispielsweise “Unsere T-Shirts werden mich Einhornhaar hergestellt und überstehen selbst Brände.” und “Unsere Anzüge sind zu 100% transparent, damit Sie diese am Flughafen beim Sicherheitscheck nie wieder ablegen müssen.”
Soweit so gut, ich denke diese Gliederung ist für das hervorheben der Highlights in Ordnung. Ich wähle den Vorlagentyp “T-Shirt-Vorlage” bei allen T-Shirt-Produkten aus und habe den entsprechenden Text der dazu gehört am Seitenende.

Nun kommt der Teil bei dem ich mir seit Tagen Videos und Beiträge durchgelesen habe und keinen Schritt weiterkomme, da ich vermute, ich die Verknüpfung bestimmter Elemente grundsätzlich bei Shopify nicht verstehe.

Wenn ich unter “Seiten” eine neue Seite anlege, habe ich dort ein Feld für “Titel” und einen für “Textinhalt”. Dazu kann ich auch hier eine Seitenvorlage auswählen. Ich erstelle eine Seitenvorlage die aus zwei Blöcken bestehen soll:

  1. Block Bild1 links, Text1 rechts.
  2. Block Text2 links, Bild2 rechts.
    Wie sage ich nun unter “Seiten”, welches Bild und welcher Text an welcher Stelle in meiner Vorlage platziert werden soll? Im Vorlageneditor habe ich links nur einen Abschnitt “Seite” der den kompletten Inhalt anzeigt und nicht weiter formatiert werden kann. Ich kann zwar weitere Abschnitte hinzufügen, zum Beispiel “Bild mit Text”, weiß aber nicht wie ich diese Abschnitte mit ihrem jeweiligen Inhalt befüllen sollder im Text-Teil unter “Seite” angegeben ist. Im Endeffekt verstehe ich einfach nicht, wie eine komplexe Vorlage bestehend aus Video, Bild, Text, Slideshow funktionieren soll, wenn ich unter dem Menüpunkt “Seiten” nur ein Titel und ein Textfeld sind. Über eine grundsätzliche Erklärung oder ein Anfängertutorial wäre ich hier sehr sehr dankbar, ich habe dazu absolut nichts erleuchtendes finden können.

Warum will ich das machen? Weil ich neben den Texten für die Produktkategorien noch einen zweiten Abschnitt auf den Produktseiten haben möchte, der beispielsweise eine Erläuterung zu den Motiven enthält. Das heißt alle T-Shirts, die Einhörner als Motiv haben, bekommen einen Text zu Einhörnern. Alle T-Shirts mit Birkenkäfern bekommen einen Text zu eben diesen. Ich weiß, dass man unter jedem Produkt mittels Metafeldern zugehörige Fotos und Texte platzieren und dann in den Vorlagen an entsprechender Stelle verknüpfen kann. Das mag funktionieren, wenn man einen Shop hat, der 10 verschiedene Kaffeesorten hat, dann lassen sich diese Texte schnell überarbeiten. Wenn ich aber 20 Shirts mit Birkenkäfermotiven und 30 mit Einhörnern habe und mich dazu entscheide diese Texte oder das Bild zu verändern, muss ich das an dieser Stelle in jedem einzelnen Produkt machen (ja, bulk-Editor, copy&paste - auch das wird anstrengend wenn man 20 unterschiedliche Motive hat und dann immmer erst nach Stichwort filtern und jede Zeile markieren muss um neuen Inhalt einzufügen).
In meiner Welt erstelle ich eine Seitenvorlage “Einhörnermotive” und eine “Birkenkäfermotive” und baue diese Vorlagen so auf wie es ansprechend aussieht und markiere in jeder Vorlageseite meiner Produktkategorien einen weitere Abschnitt “hier wird eine Vorlageseite hineingeladen” hinzu. Dieser Abschnitt sucht nun unter den Produkt-Tags, ob dort “Einhorn” oder “Birkenkäfer” enthalten ist und läd den Inhalt aus der entsprechenden Vorlage.
Somit hätte ich schön übersichtich zu jedem Motiv eine Vorlage die ich bei Bedarf verändern und überarbeiten kann und die Inhalte werden automatisch auf jeder Produktseite aktualisiert, da alle auf eine Quelle verweisen.

So scheint das aber nicht bei Shopify zu funktionieren. Vorlagen kann ich scheinbar nicht in Vorlagen laden geschweigedenn deren Inhalt nach Tags gefiltert bestimmen.

Kann mich hier jemand vielleicht in die richtige Richtung stubsen und mir verraten, wie ich diese Verknüpfung hinbekomme und auf meiner Produktseite einen motivspezifischen Abschnitt hinzufügen kann, der sich nach bestimmten Tags gerichtet auswählen und dort hinenladen lässt?

Vielen Dank im Voraus!

2

Kombi aus Metafeldern, dynamischen Inhalten und Liquid. Erstelle neue Metafelder, z. B. motiv_bild für motiv Bild und motiv_text für Beschreibungstext und weise den Produkten die passenden Metafelder zu (z. B. Einhorn-T-Shirts erhalten das Einhorn-Bild und den Einhorn-Text usw.)

Füge dann den entsprechenden Liquid Code den Produktvorlagen zu mit 'ner IF wie {% if product.metafields.custom.motiv_bild %}. Wenn du Inhalte basierend auf Tags steuern möchtest, die Tags im Produkt nutzen, um eine logische Verknüpfung in der Vorlage herzustellen, mit 'ner IF wie {% if product.tags contains “Einhorn” %} um die tagspezifische Inhalte anzuzeigen, ohne jedes Produkt einzeln zu bearbeiten.

Wenn du die Inhalte zentral verwalten möchtest, kannst du auch Kollektionen (z. B. für Motive) verwenden mit entsprechenden Metafelder und

passe die Produktvorlagen an, um die Inhalte der zugehörigen Kollektion anzuzeigen. JSON-basierte Templates erlauben es dir Sections wie “Bild mit Text” oder “Text mit Bild” direkt im Theme-Editor zu steuern.

3

Danke dir für deine Vorschläge. Ich habe den zweiten Teil nun so ähnlich umgesetzt.

{% if product.tags contains "X" %}
{% assign src_image = [Image-X-URL] %}
{% assign src_heading = 'Headline X' %}
{% assign src_text= 'Text X' %}
{% endif %}

{% if product.tags contains "Y" %}
{% assign src_image = [Image-Y-URL] %}
{% assign src_heading = 'Headline Y' %}
{% assign src_text= 'Text Y' %}
{% endif %}

{% if product.tags contains "Z" %}
{% assign src_image = [Image-Z-URL] %}
{% assign src_heading = 'Headline Z' %}
{% assign src_text= 'Text Z' %}
{% endif %}

## 
{{ src_heading }}

{{ src_text }}

Zuerst werden drei Variablen bestimmt, je nach gefundenen Tags. Diese werden in eine HTML Struktur eingefügt, die ich aus einer Text-with-image Sektion kopiert und leicht angepasst habe (oben vereinfacht dargestellt).

Funktioniert jetzt auch wie erhofft. Die perfekte Variante wäre jetzt, dass das kein Liquid-Code-Block ist, sondern ein Section-Template. Allerdings verstehe ich das noch gar nicht. Das fängt schon damit an, dass ich nicht verstehe, worauf es ankommt, damit das Section-Template später in der Auswahl unter einem benutzerspezifischen Namen auftaucht.

Die anderen Templates haben alle den Teil hier

{% schema %}
{
  "name": "t:sections.image-with-text.name",
  "class": "section",
...

Wenn ich dort die Variable durch einen benutzerdefinierten Namen ersetze, erscheint das Template nicht in der Auswahl.

Das tut es nur, wenn ich den Teil “presets”

"presets": [
    {
      "name": "t:sections.image-with-text.presets.name",
      "blocks": [
        {
          "type": "heading"
...

einfüge und dort einen Namen vergebe.

Die zweite Frage die in mir aufkommt: Um dieses Template im Live Theme-Editor ggf. anpassbar zu machen, also ein Farbschema zuordnen zu können, muss ich ja die Blocks und die damit verbundenen Definitionen in meinem Template behalten. Im Bild-mit-Text Template ist nun bspw. ein Image-Picker, den ich nicht brauche, da ich meine Bildquelle ja über die Variable filtern lasse. Wie kann ich im Liquid Code das schon von vorneherein eine Bildquelle definieren, damit die if-Abfrage nicht negativ ausfällt und der placeholder mit all seinen zugehörigen Tags eingefügt wird? Ich sehe die Abfragen {% if section.settings.image != blank %} kann aber kein Bild mit zuvor definierter URL-Variable angeben.

Dadurch, dass ich für jeden Produkttyp schon ein Produkt-Template erstellt habe (Shirts, Hoodies, Zipper, Kidsvarianten etc.), ist eine weitere Verzweigung mit motivspezifischen Sektionen nicht praktikabel. Produkttyp x Motivanzahl funktioniert in der Praxis nicht, da mache ich irgendwann nichts anderes mehr.

Gibt es zum oben beschriebenen Problem noch eine Anlaufstelle wo solche Dinge erklärt werden? Seiten wie https://shopify.dev/docs/api/liquid/objects/image habe ich mir angeschaut, die helfen mir aber nicht wirklich bei der Lösung. image_url gibt die Bildadresse als String zurück, aber diesen String habe ich ja schon - ich muss wissen wo ich ihn in diesen Variablen angeben kann.

4

Super so bist du einen guten Schritt weiter! Du kannst ja motivspezifische Inhalte dynamisch laden und in Sections verwenden. Damit eine Section im Theme-Editor unter einem benutzerdefinierten Namen auftaucht, das Schema korrekt definieren, insbesondere den name und presets-Block, wie z. B.:

{% schema %}
{
  "name": "Motivspezifische Sektion",
  "settings": [
    {
      "type": "text",
      "id": "src_heading",
      "label": "Überschrift"
    },
    {
      "type": "textarea",
      "id": "src_text",
      "label": "Text"
    },
    {
      "type": "image_picker",
      "id": "src_image",
      "label": "Bild"
    }
  ],
  "presets": [
    {
      "name": "Motiv Sektion",
      "category": "Benutzerdefiniert"
    }
  ]
}
{% endschema %}

Um eine Bildquelle dynamisch basierend auf einer Bedingung zu definieren, probiere eine URL direkt im Liquid-Code zuweisen, anstatt sie aus den settings zu beziehen. Falls du eine Standard-URL haben möchtest, wenn keine Variable gesetzt ist, einem Fallback verwenden, wie z. B.:

{% if product.tags contains "Einhorn" %}
  {% assign src_image = 'https://beispiel.de/einhorn.jpg' %}
  {% assign src_heading = 'Einhorn T-Shirts' %}
  {% assign src_text = 'Unsere T-Shirts mit Einhorn-Motiven sind einzigartig.' %}
{% elsif product.tags contains "Birkenkäfer" %}
  {% assign src_image = 'https://beispiel.de/birkenkaefer.jpg' %}
  {% assign src_heading = 'Birkenkäfer T-Shirts' %}
  {% assign src_text = 'T-Shirts mit Birkenkäfer-Motiven für Naturliebhaber.' %}
{% else %}
  {% assign src_image = 'https://beispiel.de/default.jpg' %}
  {% assign src_heading = 'Standard Titel' %}
  {% assign src_text = 'Standard Beschreibung' %}
{% endif %}

Das Bild und die Texte können dann im HTML Dom-Tree verwenden, wie z. B.:


  
  ## {{ src_heading }}
  

{{ src_text }}

Falls du die Bildquelle in den Einstellungen der Section definierst, dann Liquid verwenden um einen Standardwert zu setzen, wenn keine Eingabe erfolgt, mit dem Fallback wie:

{% assign src_image = section.settings.src_image | default: 'https://beispiel.de/default.jpg' %}

Füge dann die Section und Fallback der JSON-Vorlage der PDP (product.json) hinzu und integriere die Section:

{
  "type": "motiv-section",
  "settings": {
    "src_image": "",
    "src_heading": "",
    "src_text": ""
  }
}

{% assign src_heading = section.settings.src_heading | default: src_heading %}
{% assign src_text = section.settings.src_text | default: src_text %}
{% assign src_image = section.settings.src_image | default: src_image %}

Du kannst auch Metafelder verwenden → Einstellungen → Metafelder → Produkte um Inhalte zentral und flexibel zu steuern. Das spart um zentralisierte Inhalte anzuzeigen Produkt-Tags zurückzugreifen. Erstelle neue Metafelder, wie z. B.: motiv_bild (Datei, Typ: Bild).

  • motiv_text (Text)
  • motiv_heading (Text)

Schritt 2: Passe das Template an, um die Metafeld-Daten dynamisch zu laden:


  

    
  

  
    ## {{ product.metafields.custom.motiv_heading }}
    

{{ product.metafields.custom.motiv_text }}
5

Hi Alex, du bist auf dem richtigen Weg — aber die tag-basierte if-Kette wird genau deine Frage 3 (Produkttyp × Motiv) irgendwann unwartbar machen. Der saubere Weg für alle drei Fragen ist derselbe: weg von hardcodierten Werten, hin zu Metaobjekten. Empfehlung — ein Metaobjekt “Motiv”:

1. Einstellungen → Benutzerdefinierte Daten → Metaobjekte → “Motiv” anlegen, mit Feldern: Bild (Datei), Überschrift (Text), Beschreibung (Rich Text).

2. Für jedes Motiv (Einhorn, Birkenkäfer …) einen Metaobjekt-Eintrag pflegen — zentral, einmal.

3. Beim Produkt ein Metafeld “Motiv” (Typ: Metaobjekt-Referenz) anlegen und das passende Motiv zuweisen.

Tags kannst du fürs Filtern behalten; die Inhalte trägt jetzt das Motiv-Metafeld. Deine Fragen konkret:

  1. Liquid-Block → Section: Leg unter sections/ eine Datei an (z. B. motif-block.liquid), pack dein HTML rein und häng unten ein Schema an, damit sie im Editor auftaucht:
{%- assign motif = product.metafields.custom.motiv.value -%}
{% if motif %}
  <div class="motif">
    <img src="{{ motif.bild | image_url: width: 1200 }}" alt="{{ motif.ueberschrift }}">
    <h2>{{ motif.ueberschrift }}</h2>
    <div>{{ motif.beschreibung }}</div>
  </div>
{% endif %}

{% schema %}
{ "name": "Motiv-Block", "presets": [ { "name": "Motiv-Block" } ] }
{% endschema %}

  1. Standard-Bildquellen ohne Image-Picker: genau das lösen Metafelder — das Bild liegt im Metaobjekt, die Section zieht es automatisch (motif.bild | image_url), kein Picker, keine hardcodierte URL.

  2. Keine “Produkttyp × Motiv”-Explosion: Weil die Section immer nur product.metafields…motiv rendert, brauchst du EINE Section und beliebig viele Motiv-Einträge — keine if-Kette, kein Kombinations-Wildwuchs. Neues Motiv = neuer Metaobjekt-Eintrag, null Code. Pass die Feld-Handles an deine an (bei mir custom.motiv sowie bild / ueberschrift / beschreibung), dann läuft es sofort. Sag Bescheid, wenn du lieber einzelne Produkt-Metafelder statt eines Metaobjekts nimmst — dann zeige ich dir die Variante.