Schwarzes Bild Statt Produktbild im Dawn Theme

[RS6]

Hallo zusammen!

Wir haben ein kleines Problem mit dem Dawn Theme.

Statt dem Produktbild wird ja zum schnelleren Laden zuerst eine einfarbige Farbfläche angezeigt. Diese wird dann so schnell wie möglich durch das Produktbild ersetzt, davor sieht es so aus:

Leider haben wir das Problem, dass es teilweise nicht lädt, und nur die schwarze Farbfläche angezeigt wird (nur bei vereinzelten Produkten). Das passiert in seltenen Fällen, aber es passiert. Sollte es nicht möglich sein, den Fehler zu beheben, wär es immerhin toll, wenn die Farbfläche weiß und nicht schwarz wäre.

Gibt es dafür irgendeine Lösung?

Danke im Vorraus!

[byteriver]

Schreib' folgenden Code in dein Live-Theme > Code anpassen > themes.css.liquid > Am Ende der File

.image-wrap {
    background-color: unset;
}

[RS6]

Hallo,

danke für die schnelle Antwort! Du meinst die Theme.liquid oder? Ich hab den Code Schnipsel ans Ende vom Code gehängt, aber es tut sich leider nichts...

Hab ich irgendwas falsch gemacht?

[Gabe]

Hey @RS6 

Kannst du mal die Shop URL hier posten so dass wir das da anschauen können?

VG,

[RS6]

Hallo @Gabe ,

es geht um: https://vinstockz.com

Viele Grüße

Leo

[Finer]

@RS6 den Code von Rankist musst du in die CSS Datei deines Themes setzen, nicht in die Theme.liquid.

[Gabe]

Hey @RS6 

erstmals wie @Finer sagt hast du das Code im theme.liquid eingesetzt und das müsste stattdessen in das base.css:

Dann haben alle Bilder für mich wie erwartet geladen. Ein paar Ladeprobleme mit deinem Insta-Feed sehe ich in der Console falls du diese prüfen möchtest:

Ansonsten wie laufen die Umsätze? Ist Instagram deine Hauptquelle des Traffic? Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
 
Wir führen gerade eine kurze Umfrage zu Eurer Erfahrung in der Community durch mit 4 kurzen Fragen. Wenn Du mal 2-Min Zeit hast - die Umfrage ist auch anonym:

• https://forms.gle/SSVUmn5vXLYYW9Dh8

2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.

[RS6]

Danke für die Hinweise!

Ich habe den Code jetzt ans Ende der Base.css gesetzt, aber auch das bewirkt leider nichts. Die Blocks sind immer noch schwarz. Auch das Abändern auf den folgenden Code hat nichts verändert.

}
  
  .image-wrap {
    background-color: white;
}

Danke für den Hinweis der Insta-Feed Ladefehler! Hast du da eine Idee, wie man die beseitigt? Das beeinflusst dann bestimmt auch den Site-Speed positiv, oder?

Unser Umsatz läuft ganz gut, allerdings kommt er aktuell überwiegend von anderen Quellen, weniger aus dem Shop. Wir erarbeiten uns aktuell eine Marketingstrategie, bestehend aus SEO und Facebook/Insta Werbung, um die Sales im Shop wieder anzukurbeln.

Viele Grüße

Leo

[Gabe]

Gut @RS6 - wichtig hier ist Code Änderungen zuerst in einer Themekopie zu testen, also empfehle ich den Code wieder zu entfernen und eine Testkopie des Themes zu erstellen und da einzufügen. Dann füge eine frische Kopie des Themes zum Shop hinzu und teste, ob das Bilder-Loading Problem da auch vorkommt.

Ist das unser Dawn Theme? Wenn ja, kann unser Theme Team das ggf. anschauen (https://bit.ly/3cwO7ym), ob das ein Theme Bug ist dass das Problem verursacht. Bei stark geänderten Code werden sie aber nicht allzu viel helfen können und einen Experten wie www.taskhusky.com empfehle ich dafür.

Bzgl. dem Instafeed, du musstest ggf. die Instafeed App die du dafür verwendest nochmal frisch installieren und neu anstossen. 

[RS6]

Ja genau, das ist euer Dawn Theme. Viel geändert haben wir eigentlich nicht, außer hier und da eine kleine Code Anpassung.

Dann probiere ich es erst einmal bei einer Theme Kopie, wenn das nicht hilft, wende ich mich an das Theme Team. Außerdem versuche mal die Insta-App neu zu installieren, danke für die ganzen Hinweise!

[Finer]

@RS6 vielleicht kannst du in der base.css folgenden Code (im Test Theme) ausprobieren:

.gradient {background: #ffffff;!important}

[RS6]

Hallo @Finer.  Meinst du in Verbindung mit dem anderen Code?

[Finer · Accepted solution]

@RS6 nein unabhängig davon.

Übrigens war der Code oben falsch.

Es sollte heißen

.gradient {background:#ffffff!important;}

[RS6]

Das hat tatsächlich geklappt! Vielen Dank!

[Finer]

@RS6 alles klar. 

Kurz zur Erläuterung:

Derzeit greift sich das Theme einen Farbwert aus deinen Theme-Einstellungen. Dieser Wert wird über den bereitgestellten Code (oben) überschrieben, weshalb es an anderer Stelle, bei dem der Wert ebenfalls angewandt wird, entsprechend anders erscheint. Es gibt zwei Möglichkeiten, wie man das beheben kann:

1. Man weist dem Element, dass die Class .gradient hat einen neue Class zu, und gibt dort den entsprechenden Farbwert an.

2. Man erweitert das Theme um einen Farbwert, der über die Theme-Einstellungen angepasst werden kann.

Die erste Lösung ist m.E. die schnellere und sollte ausreichen.