Hey @Bea
Um in Shopify individuelle Farboptionen hinzuzufügen und sicherzustellen, dass diese in deinem Shop korrekt angezeigt werden, kannst du entweder die integrierten Shopify-Funktionen nutzen oder eine App zur Produktanpassung verwenden. Hier sind die Schritte und Optionen, die dir zur Verfügung stehen.
Vorgehensweise ohne App:
Produktvarianten erstellen:
- Gehe in deinem Shopify-Adminbereich zu „Produkte“.
- Wähle das Produkt aus, für das du Farbvarianten hinzufügen möchtest.
- Im Abschnitt „Varianten“ klicke auf „Optionen wie Größe oder Farbe hinzufügen“.
- Wähle „Farbe“ als Optionsnamen und füge deine individuellen Farbnamen als Optionswerte hinzu.
- Speichere die Änderungen.
Optionen bearbeiten:
- Um vorhandene Farboptionen zu bearbeiten oder weitere hinzuzufügen, gehe erneut in den Abschnitt „Produkte“, wähle das Produkt aus und bearbeite die Optionen entsprechend.
Verwendung von Apps:
Für erweiterte Anpassungen und mehr Flexibilität kannst du Apps wie Infinite Options oder Kickflip verwenden. Diese Apps ermöglichen es dir, eine Vielzahl von Anpassungsoptionen hinzuzufügen, einschließlich individueller Farbswatches und benutzerdefinierter Eingabefelder.
Infinite Options:
- Diese App erlaubt es dir, eine unbegrenzte Anzahl von Produktoptionen hinzuzufügen, einschließlich Farbswatches und anderer benutzerdefinierter Felder.
- Du kannst die App im Shopify App Store finden und installieren, um erweiterte Anpassungsoptionen für deine Produkte zu erstellen.
Kickflip:
- Kickflip bietet umfangreiche Anpassungsmöglichkeiten, einschließlich der Möglichkeit, dynamische Farbanwendungen und benutzerdefinierte Text- und Bildfelder hinzuzufügen.
- Diese App ist besonders nützlich, wenn du eine komplexe Produktanpassung benötigst, die über die Standard-Shopify-Optionen hinausgeht.
Beispiele für Farbswatches:
Um Farbswatches hinzuzufügen, die auf der Produktseite angezeigt werden, kannst du benutzerdefinierte CSS-Klassen und Liquid-Code verwenden. Hier ist ein Beispiel:
.swatch {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 5px;
cursor: pointer;
}
.swatch-red { background-color: #ff0000; }
.swatch-blue { background-color: #0000ff; }
.swatch-green { background-color: #00ff00; }
Liquid-Code für die Produktseite:
{% for option in product.options_with_values %}
{% if option.name == 'Color' %}
<div class="color-options">
{% for value in option.values %}
<span class="swatch swatch-{{ value | handleize }}"></span>
{% endfor %}
</div>
{% endif %}
{% endfor %}
Diese Anpassungen helfen dir, deine Farbswatches benutzerfreundlich und visuell ansprechend zu gestalten.
Weitere Informationen:
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
