Du möchtest ein Farbfeld (Color Swatch) für dein neu installiertes Dawn-Theme erstellen? Mit dieser Anleitung bist du auf der sicheren Seite!
Hinweis: Das funktioniert auch für die Themes Craft, Crave, Sense, Taste und Studio.
Das Dawn-Theme, das neu kommende Theme von Shopify, wird der aktuelle Standard für die Individualisierung von 2.0-Themes. Das kann zu Beginn unübersichtlich wirken. Vor allem die Produktseite. In dieser Anleitung zeigen wir dir, wie du Farbfelder und Muster für Produktvarianten erstellen kannst.
Los geht's!
Schirtte 1: Theme Code bearbeiten
Für Dawn Theme Version 7 sollten wir Main-Product.Liquid im Theme-Code finden. Ab Dawn Theme Version 8 oder höher suchen wir nach product-variant-options.liguid.
Wenn du sie gefunden hast, scrolle nach unten, bis du den folgenden Code findest
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
Schritte 2: Ersetze den vorherigen durch den folgenden Code
{% assign variant_needed = null %}
{% for variant in product.variants %}
{% if variant.options contains value %}
{% assign variant_needed = variant %}
{% endif %}
{% endfor %}
{% if variant_needed.metafields.color.swatch and option.name == "Farbe" %}
<label class="color-swatch" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" data-option="{{ value }}" style="background-color: {{variant_needed.metafields.color.swatch}}">
 
</label>
{% elsif variant_needed.metafields.image.swatch and option.name == "Farbe" %}
<label class="color-swatch" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" data-option="{{ value }}" style="background-size: cover; background-image: url('{{variant_needed.metafields.image.swatch}}')">
 
</label>
{% else %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
{% endif %}
Schritte 3: Code Base.css hinzufügen
Gehe jetzt in den Asset-Ordner, suche die Datei base.css und füge den folgenden Code am Ende der Datei ein
.product-form__input input[type="radio"] + .color-swatch {
border: 3px solid #f4f5ff; /* Change this hex code to change the color of the non-active/non-selected variant */
width: 40px;
height: 40px;
padding: 0;
}
.product-form__input input[type="radio"]:checked + .color-swatch,
.product-form__input input[type="radio"]:hover + .color-swatch {
border: 3px solid #ccd1d1; /* Change this hex code to change the color of the active/selected variant */
}
.product-form__input input[type="radio"] + .swatch {
border: 3px solid #f4f5ff; /* Change this hex code to change the color of the non-active/non-selected variant */
width: 40px;
height: 40px;
padding: 0;
color: #000;
display: inline-flex;
justify-content: center;
align-items: center;
}
.product-form__input input[type="radio"]:checked + .swatch,
.product-form__input input[type="radio"]:hover + .swatch {
border: 3px solid #ccd1d1; /* Change this hex code to change the color of the active/selected variant */
background: none;
}
Schritte 4: Die Metafelder erstellen
Du bist mit der Codierung fertig. Jetzt ist es an der Zeit, die Metafelder zu erstellen, damit du den Produkten Farben oder Muster zuweisen kannst. Gehe auf die Shopify Dashboard und klicke auf Einstellungen und dann auf Metafelder
Schritte 5: Du musst 2 Metafelder erstellen, eines für die Farbe und eines für das Bild. Wenn du auf Metafelder geklickt hast, klicke auf Variante, wähle unter "Definition hinzufügen" die Metafeld-Farbe und benenne es Color. Als Namespace und Key tragen wir color.swatch ein, wählen als Typ Color aus und beenden mit "Speichern"
Schritte 6: Jetzt klickst du wieder auf "Definition hinzufügen". Diesmal erstellen wir ein Metafeld -Bild, nennen es Image, geben als Namespace und Key image.swatch ein und wählen als Typ URL. Klicke dann auf "Speichern"
Wo ist der Text für Color und das Bild hier drüber?
Du solltest jetzt 2 Varianten der Metafelder angezeigt bekommen.
Schritte 7: Zum Schluss fügen wir nun die Metafelder hinzu. Gehe zu einem beliebigen Produkt, stelle sicher, dass der Name der Produktvariante "Farbe" lautet, und speichere das Produkt.
