Hover Effekt

Topic summary

Problem: Beim Hover-Effekt (Bildwechsel bei Mouseover) erscheint das zweite Produktbild im Dawn-Theme teils stark verpixelt, obwohl die Originale hochauflösend sind.

Mögliche Ursachen: Das Theme lädt aus Performancegründen automatisch niedrigere Bildgrößen; zusätzlich kann ein Transform-/Zoom-Effekt die Skalierung verschlechtern.

Aktueller Stand/Anleitung:

  • Zugriff: Die bereitgestellte Shop-URL ist ohne Passwort nicht einsehbar; alternativ soll ein befristeter Vorschaulink geteilt werden.
  • Lösungsvorschlag: Zuerst eine Theme-Kopie anlegen. Dann in theme.liquid direkt vor ein kurzes CSS-Snippet einfügen, das den Transform-Effekt bei Hover deaktiviert (transform: none !important für die Hover-Selektoren). Ziel: schärfere Bilder beim Hover.
  • Hinweis: Höhere Auflösung verbessert Qualität, kann aber die Seitenladezeit verlangsamen. Balance zwischen Qualität und Geschwindigkeit beachten.

Offene Punkte:

  • Testen, ob das CSS die Bildschärfe zuverlässig verbessert, und Feedback geben.
  • Passwort oder Vorschaulink zur Prüfung teilen.
  • Frage zum Wechsel auf ein kostenpflichtiges Theme (Übernahme von Inhalten) blieb noch unbeantwortet.

Zusatz: Setup-Checkliste verlinkt für weitere To-dos.

Summarized with AI on January 5. AI used: gpt-5.

Hallo erstmal an alle :blush: ,

ich habe ein kleines Problem mit dem “Hover Effekt” unswar wird (immer unterschiedlich) das zweite bild mit einer echt schlechten Qualität wieder gegeben. Manchmal zeigt es mit echt guter Quali an und manchmal sieht es einfach nur verpixelt aus.

Kann ich hiergegen was tun ? Die Bilder an sich haben eine gute Qualität da es ja auch ab und zu funktioniert.

Danke im voraus !! :grin:

LG Birby

Hi @birby ,

vielen Dank für deinen Post. Ich helfe dir gerne dabei die Fotos in deinem Shopify Shop zu untersuchen.

In manchen Fällen wählt das Theme automatisch eine Version des Fotos mit niedrigerer Auflösung aus, um die Geschwindigkeit des Shops zu erhöhen, da viele Fotos gleichzeitig geladen werden. In diesem Fall könntest du wahrscheinlich deinen Themecode anpassen, um das Bild auf eine höhere Auflösung umzustellen. Der hier zu berücksichtigende Schlüsselfaktor ist die Geschwindigkeit der Website. Wenn du alle Fotos auf eine höhere Auflösung änderst, wird die Kollektionsseite möglicherweise langsamer. Daher ist es wichtig, gerade genug Auflösung auszuwählen.

Teile uns gerne neben dem Namen deines Themes auch die Shop-URL mit, damit ich mir das einmal genauer ansehen kann.

Hello Kai,

danke dir vorerst für die rasche Hilfe und Info.

Okay verstehe, mir wäre es halt wichtig das die Bilder gut zu erkennen sind und der Shop halt Seriöser rüberkommt denke keiner mag verpixelte Fotos .. :rofl:

Theme Name wäre DAWN und die SHOP URL : https://35dcd2-3.myshopify.com ( das ganze ist noch nicht live da noch einiges fehlt und in Arbeit ist, jedoch ist mir das mit dem Hover Effekt halt aufgefallen )

Zum Theme hätt ich auch noch ne kurze Frage:
Wenn ich in Zukunft auf ein Kostenpflichtigen Theme umsteigen möchte kann ich da den Inhalt vom alten Theme ins neue übernehmen oder muss ich alles neu machen?

Danke dir!

LG Birby

Hi @birby ,

vielen Dank für dein Link zu deinem Shopify Shop, ohne Passwort komme ich da leider nicht rein. Alternativ könntest du auch einen befristeten Vorschaulink teilen.

Der Name des Themes und deine Problembeschreibung helfen aber schon mal weiter.

Und zwar würde ich dich bitten eine Kopie deines Themes zu erstellen, damit du unbedenklich folgende Codeanpassung vornehmen kannst:

  1. Gehen in deinem Admin auf Online-Shop > Kopie von Dawn > Code bearbeiten

  1. Öffne die Theme-Datei theme.liquid

  2. Fügen den folgenden Code vor ein

.card:hover .media.media--hover-effect>img:first-child:only-child, .card-wrapper:hover .media.media--hover-effect>img:first-child:only-child { transform: none **!important**; }

Führt das für dich zu klaren Hover-over Bildern?

Und was musst du in deinem Shop noch alles fertigstellen, damit du startklar bist? Orientieren kannst du dich hierbei an dieser Checkliste.