Color swatches - Collection product grid

[miriz]

Hallo liebe Shopify-Community,

ich habe folgende Frage: 

Ich habe für einen neuen Onlineshop (Theme: Pipeline) Color swatches erstellt und in den Code eingefügt. 

Nun werden sie im Produkt Layout angezeigt aber auf der Übersicht, dem Produktraster ( Collection product grid) nur, wenn man mit der Maus direkt über das Produkt fährt. 

Ansonsten erscheint zum Beispiel der Satz: "5 Farben verfügbar"

Ist es möglich die color swatches aber dauerhaft sichtbar auf dem Produktraster zu haben, ohne diesen Wechsel zwischen Satz "5 Farben verfügbar" und dem Mauseffekt.

⬆️Produktübersicht ( Collection Product Grid) 

⬆️Auf der Produktseite selbst funktioniert alles sehr gut. 

⬆️Hier ist der 'Mauseffekt' zu sehen..

Ich würde mir wünschen, dass die Muster (color swatches) dauerhaft sichtbar sind.

Ich würde mich sehr über Tipps und/oder Lösungsvorschläge freuen. 

Vielen Dank im Voraus! 

[Gabe]

Hey @miriz 

Das hört sich nicht gut an aber von hier aus schwer zu sagen.

• Ich habe für einen neuen Onlineshop (Theme: Pipeline) Color swatches erstellt und in den Code eingefügt. 

Darf ich fragen warum du den im Pipeline Theme eingebauten Colour Swatch nicht verwendest?

Wir müssten wissen genau wie du den Colour Swatch eingebaut hast mit welcher Anleitung und Code und wie du diesen in das Pipeline Theme Code eingebaut hast und bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren.

Es scheint also, dass dein Code den Colour Swatch nur mit Mouse-Over Event anzeigt und dass müsstest du in deinem Custom Code selber aendern um den Colour Swatch "persistent" zu machen. I.d.R. musst du das CSS so ändern, dass das Farbfeld "persistent" wird, sprich, immer angezeigt wird und nicht der Text "5 Farben verfügbar". 

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du die hier eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Das CSS sieht beispielsweise etwas wie das folgende aus:

.color-swatch {
   display: none;
}

.product:hover .color-swatch {
   display: block;
}

Es könntest du folgendermaßen ändern indem du den product:hover filter entfernst :

.color-swatch {
   display: block;
}

Und eine ähnliche Änderung im Liquid-Code:

{% if product.available_variants > 1 %}
   <div class="color-swatch">
       {% for variant in product.variants %}
           <!-- color swatch code -->
       {% endfor %}
   </div>
   <div class="color-text">
       {{ product.available_variants }} colours available
   </div>
{% endif %}

Aendere es zu:

<div class="color-swatch">
   {% for variant in product.variants %}
       <!-- color swatch code -->
   {% endfor %}
</div>

Das ist aber ein sehr grobes Beispiel und die Besonderheiten deines Codes können abweichen. Bei weiteren Fragen kann ich gerne einen Experten empfehlen!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[miriz]

Hello Gabe,

vielen Dank für deine Antwort.

🙏

Darf ich fragen warum du den im Pipeline Theme eingebauten Colour Swatch nicht verwendest?

---

Ich habe mich leider falsch ausgedrückt... Genau dieser Anleitung bin ich gefolgt. Und habe einfach die Muster in den eingebauten Swatch eingefügt.

Aber du hast das Problem genau verstanden.

Ist es denn möglich etwas in diesem Bereich zu verändern?

Danke für Deine Hilfe!

[Gabe]

@miriz 

Würde ich nicht empfehlen denn du kannst dein Pipeline Theme Code komplett zerschießen. Dupliziere aber mal zuerst zwei Kopien des Themes - eine als Testumgebung und eine als Backup (Theme -> Aktionen -> Duplizieren). In der Testumgebung kannst du im Code beliebig rumbasteln, aber da dieser Feature ja ein "propriatorischer" Feature des Pipeline Theme ist, können hier nur die Groupthought Entwickler oder ein kostenpflichtiger Experte helfen um die farbigen Swatches "Sticky" zu machen, sprich, dauerhaft. Die Entwickler einfach hier kontaktieren.

Oder du kannst eine Color Swatch App die einen Free Plan hat, installieren und die deinen Kunden noch mehr tolle Features anbieten kann, wie diese hier. die besonders für bekleidung konzipiert sind was deine Conversions sehr erhöhen kann!

Hoffe das hilft dir weiter! 😉