Guten Tag,
ich möchte beim Focal Theme die Größe von den weiteren Produktbilder unter dem Hauptbild ändern, die Bildbreite breiter machen, damit sie in Rechteck Form anstatt Quadrat sind und größer, wie hier:
momentan ist es so:
Ich habe es selber versucht, aber hab es nicht hinbekommen. Wenn ich die Größe verändere, werden die Bilder unten im Vorschau unscharf. Ich bitte um Hilfe.
Hey @Pallmann2024
Danke für die Bilder und hat dir die Anleitung der Focal Theme Entwickler weiterhelfen können? Du kannst die Theme Entwickler da auch über den Contact Us Button kontaktieren wenn du glaubst das ist ein Problem im Theme mit dem Rendering der Bilder.
Dann scheinen deiner Bilder importierte Bilder zu sein, wie man in deinen Screenshots oben sehen kann. Sind das China Dropshipping Produkte und Bilder?
Wenn ja, ich würde unbedingt empfehlen deine eigene Produktbilder zu erstellen (vielleicht mit einem professionellen Fotografen) denn die Bilder sind ja das Brot und Butter eines Online Shops. Dann hast du Variantenbilder Apps schon ausprobiert wie
Wenn du es aber selber DIY machen möchtest wird es etwas kompliziert:
Um die Größe und das Seitenverhältnis der Produktbilder (Thumbnails) unter dem Hauptbild im Shopify Focal Theme zu ändern, musst du sowohl CSS als auch möglicherweise das Liquid Template anpassen, um die gewünschte Rechteckform zu erreichen und sicherzustellen, dass die Bilder nicht unscharf werden.
Wenn du es selber auf deiner PDP programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
srcset nicht für die neue Größe optimiert sind. Du musst sicherstellen, dass die im srcset angegebenen Bildbreiten die tatsächliche Größe der Thumbnails abdecken.Hier ist ein Beispiel, wie du die CSS-Änderungen vornehmen kannst:
.product__thumbnail img {
width: auto; /* Stellt sicher, dass die Breite automatisch angepasst wird */
height: 120px; /* Neue Höhe, um ein rechteckiges Format zu erreichen */
}
Und im HTML-Code solltest du die sizes-Attribute des img-Tags anpassen, um sicherzustellen, dass die richtigen Bildgrößen geladen werden, z.B.:
Wenn die Thumbnails immer noch unscharf sind, selbst nachdem du die srcset-Größen angepasst hast, könnte das Problem tiefer liegen, eventuell in den Liquid-Dateien, die die Bild-URLs generieren. In diesem Fall müsstest du die entsprechenden Liquid-Dateien überprüfen und die Logik anpassen, die die Bildgrößen und -pfade bestimmt.
Hoffe das hilft dir weiter - lass wissen falls nicht! 
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.