Hover Effekt, Produktbilder alle in verschiedenen Größen

[julefrms]

Ich habe den Hover Effekt in meinem Shop. Leider werden nun aber in der Produktübersicht alle Bilder in verschiedenen Größen angezeigt. Muss ich nun jedes einzelne Bild anpassen oder gibt es einen Code, der dafür sorgt das alle Produktbilder in derselben Größe angezeigt werden? Auf der Produktseite selbst dürfen Sie gern verschieden Groß sein, auf der Produktübersichtsseite bzw. in den Kollektionen sollte es jedoch einheitlich sein. 

[Gabe]

Hey @julefrms 

Danke für die Frage und da jedes Theme anders ist wäre ein Link zu einem Beispiel hilfreich für uns um dir zu helfen.

Um sicherzustellen, dass alle Produktbilder in der Produktübersicht bzw. den Kollektionen einheitlich sind, kann man CSS anwenden im neuen CSS Editor innerhalb des Theme Editors, um die Größe der Bilder zu begrenzen. 

Du könntest einen CSS Code wie den folgenden im CSS Editor testen, dieser ist aber theme-abhängig:

/* Produktbilder in der Produktübersicht */
.grid-view-item__image-wrapper img {
  object-fit: cover;
  height: 250px;
  width: 100%;
}

In diesem Beispiel wird die Höhe der Produktbilder auf 250 Pixel festgelegt. Du kannst diesen Wert anpassen, um die gewünschte Größe für die Produktbilder zu erhalten. Die object-fit: cover;-Eigenschaft stellt sicher, dass die Bilder ihre Seitenverhältnisse beibehalten und dennoch den verfügbaren Platz vollständig ausfüllen.

Beachte, dass dieser Code möglicherweise an die spezielle Theme-Struktur angepasst werden muss. Die CSS-Klasse .grid-view-item__image-wrapper kann je nach Theme variieren.

Ansonsten empfehle ich ein Bildbearbeitungsprogramm wie Photoshop oder GIMP zu verwenden, wenn der native Media Editor in jedem Produkt nicht ausreicht um die Produktbilder zu den korrekten Größen deiner Wahl zu schneiden und optimieren und ein einheitliches Seitenverhältnis sicherzustellen.

[julefrms]

Vielen Dank für die Antwort. Hier ein Link zu einer Beispiel Kategorie. Die Bilder haben alle verschiedene Größen, der Hover auch... Ist das Debut Theme 

[Gabe]

@julefrms 

Danke und hier haben wir das Problem, dass das alte "Legacy/Vintage" Debut Theme verwendet wird und dazu habe ich eine wichtige Aussage sowie Tipps in meinem Video hier. Lass wissen was du dazu denkst.

VG,

[julefrms]

Vielen Dank für das ausführliche Video! Wir würden gerne zu einem neuen Theme wechseln. 
Viel mit Videos arbeiten wir derzeit nicht, da wir nicht von allen Herstellern Videos zur Verfügung gestellt bekommen und es derzeit leider zu aufwendig ist welche zu machen. 

Wir wünschen uns ein optisch ansprechendes, modernes Theme, bei dem die Produktbilder gut zur Geltung kommen. Welche Themen könnten gut zu unserem Shop passen? Es muss kein kostenloses Theme sein. 

[Gabe]

Hey @julefrms 

Ich empfehle ein paar Themes zum Shop hinzuzufügen, vor allem die ich im Video auf 2:30 Min auf dem Videozähler demonstriere in meinem eigenen Testshop. In allen Test-Themes dann einfach die Qualität der Online Fotografie testen wie die Fotos aussehen usw. Manche Themes machen das einfach besser als andere.

Das wäre meine Empfehlung als nächster Schritt. Nicht vergessen, mit einem guten Handy kann man einen Reiter-Videoaufnahmen beispielsweise beim Pferde-springen usw. Den Handy Video kann man dann im Theme Editor als MP4 einbauen über die Backend Dateien: