FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.

Anpassung von Hintergrund unserer JPG-Produktbildern auf der Kategorieseite

Gelöst

Anpassung von Hintergrund unserer JPG-Produktbildern auf der Kategorieseite

Kathi97
Tourist
10 0 1

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

1 AKZEPTIERTE LÖSUNG

TLorenz
Shopify Partner
8 1 2

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.

 

Lösung in ursprünglichem Beitrag anzeigen

5 ANTWORTEN 5

TLorenz
Shopify Partner
8 1 2

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.

 

Kathi97
Tourist
10 0 1

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

Nordalux
Shopify Partner
858 93 170

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.

Tobias von Nordalux

Webseite: nordalux.de
Unsere Kernkompetenzen: Coding - Conversionoptimierung - Individualberatungen
TLorenz
Shopify Partner
8 1 2

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.

Kathi97
Tourist
10 0 1
Vielen Dank für eure Lösungsvorschläge! 😊 Beide haben mir wirklich sehr weitergeholfen.