Liquid, JavaScript, Themes
Hallo zusammen,
ich bin noch nicht sehr erfahren im Bereich Coding, aber ich habe gesehen, dass unser Partner-Store (bitte beachten: kein Shopify-Store: https://www.my-bagfactory.com/koffer) es geschafft hat, die weißen JPG-Produktbilder so zu maskieren, dass sie auf der Kategorieseite einen grauen Hintergrund erhalten. Ein Entwickler, mit dem ich in Kontakt war, meinte, dass dies über CSS und JavaScript umgesetzt wurde. Leider konnte er die Lösung jedoch nicht realisieren.
Nun meine Frage: Gibt es eine Coding-Lösung, die wir verwenden könnten? Ich habe bereits Apps wie „Snapshot“ ausprobiert, aber diese verlangsamen den Shop erheblich. Zudem habe ich auch die Shopify Magic-Funktion getestet, allerdings sind die ausgeschnittenen Produktbilder nicht so schön, wie wir es uns wünschen. Wir möchten außerdem keine transparenten PNGs hochladen, da auch diese den Shop verlangsamen könnten.
Wäre es möglich, eine Lösung zu finden, die die Ladegeschwindigkeit nicht negativ beeinflusst und dabei eine saubere Darstellung der Produktbilder ermöglicht?
Hier ist der Link zu unserem Store: https://ferge-paris.com/
Eine Beispiel-Kategorieseite: https://ferge-paris.com/collections/suitcase-set
Ich freue mich über eure Rückmeldungen und Ideen!
Viele Grüße,
Kathi
Gelöst! Zur Lösung
Erfolg.
Du könntest mit einem Bildbearbeitungsprogramm die Bildhintergründe in grau färben. Anschließend das Bild hochladen und als Metafield bei den jeweiligen Produkten hinterlegen. Also hättest du einmal das Originalbild bei dem Produkt und zusätzlich das Bild mit grauem Hintergrund hinterlegt. Dann könntest du in der Datei, welche die Collections bzw. Kategorien ausgibt prüfen, ob das Metafield existiert und falls ja, dieses graue Bild stattdessen ausgeben. Mit Code könnte man den Prozess natürlich auch komplett automatisieren.
Wenn es dich nicht stört, dass das Artikelbild an sich auch dunkler wird, also alles vom Bild, dann ist auch eine CSS Lösung einfach zu implementieren.
Eine JS Lösung wäre auch einfach möglich, jedoch aufgrund der Performance nicht gerade empfehlenswert.
Erfolg.
Du könntest mit einem Bildbearbeitungsprogramm die Bildhintergründe in grau färben. Anschließend das Bild hochladen und als Metafield bei den jeweiligen Produkten hinterlegen. Also hättest du einmal das Originalbild bei dem Produkt und zusätzlich das Bild mit grauem Hintergrund hinterlegt. Dann könntest du in der Datei, welche die Collections bzw. Kategorien ausgibt prüfen, ob das Metafield existiert und falls ja, dieses graue Bild stattdessen ausgeben. Mit Code könnte man den Prozess natürlich auch komplett automatisieren.
Wenn es dich nicht stört, dass das Artikelbild an sich auch dunkler wird, also alles vom Bild, dann ist auch eine CSS Lösung einfach zu implementieren.
Eine JS Lösung wäre auch einfach möglich, jedoch aufgrund der Performance nicht gerade empfehlenswert.
Hi Lorenz,
vielen Dank nochmal für deine hilfreiche Antwort. Leider gibt es noch kein Metafeld. Ich habe nun ein eigenes auf Produktebene erstellt.
Das muss ich dann wahrscheinlich im Code noch einfügen richtig? Weißt du, ob es hier irgendwo ein Tutorial gibt?
Danke und LG
Kathi
Sowas ist tatsächlich mit CSS möglich. Jedoch ist das ein bisschen Bastelarbeit, da hier komplett alles weiße weggeschnitten wird. Sollte das für dich kein Problem darstellen, melde dich gern.
Das Ersetzen durch eine andere Farbe muss ich ggf. prüfen. Mir ist derzeit kein Weg bekannt, solch eine Funktion mit reinen CSS umzusetzen.
Du meinst so?
.product-item__image-wrapper a {
background: #f6f6f6;
}
.product-item__image-wrapper img {
mix-blend-mode: multiply;
}
Führt wie gesagt aber zu leichten Farbabweichungen bzw. bei diesem Grauton fällt es eigentlich nur auf, wenn man sehr genau hinschaut, von daher könnte man dies gut verwenden.
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024