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.:
<div class="motiv-section">
<img src="{{ src_image }}" alt="{{ src_heading }}">
<h2>{{ src_heading }}</h2>
<p>{{ src_text }}</p>
</div>
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' %}
<img src="{{ src_image }}" alt="Bild">
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:
<div class="motiv-section">
<div class="motiv-image">
<img src="{{ product.metafields.custom.motiv_bild | img_url: '750x750' }}" alt="{{ product.metafields.custom.motiv_heading }}">
</div>
<div class="motiv-text">
<h2>{{ product.metafields.custom.motiv_heading }}</h2>
<p>{{ product.metafields.custom.motiv_text }}</p>
</div>
</div>
