Wie du ein Farbfelder "Color Swatch" für die Produktseite für das  Dawn Theme erstellen kannst?

Wie du ein Farbfelder "Color Swatch" für die Produktseite für das Dawn Theme erstellen kannst?

15 Jahre Deutschland Du liest Wie du ein Farbfelder "Color Swatch" für die Produktseite für das Dawn Theme erstellen kannst? 4 Minuten Weiter Hier sind 7 Trends für (Shopify-) Unternehmen im Jahr 2022

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!

Step 1: Main-Product.Liquid ändern

Gehe zu Code bearbeiten, gehe in den Ordner Abschnitt und suche main-product.liquid. Wenn du sie gefunden hast, scrolle nach unten, bis du den folgenden Code findest

<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">

{{ value }}

</label>

Step 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}}">

&nbsp

</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}}')">

&nbsp

</label>

{% else %}

<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">

{{ value }}

</label>

{% endif %}

Step 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;

}

Step 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 CMS-Plattform und klicke auf Einstellungen und dann auf Metafelder

Step 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"

Step 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.

Step 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.

Hier geht es zur Videoanleitung

Bringe deinen Onlineshop mit Shopify & Ecom-Fabrik®️ auf das nächste Level.