Produktbild im Shop zu klein

[Tartaruso]

Hallo,

wir sind dabei einen neuen Shop zu erstellen. Haben einen Großhändler und die Produkte wurden über Stock Sync eingefügt. 

Wir haben aber leider Produkte dabei die auf der Webseite abgeschnitten angezeigt werden. Es handelt sich um Bilder mit einer Größe von 1000x400 px.

Die Höhe von 400 px wird übernommen, aber ich glaube das er die Breite automatisch auf 400 px stellt.

Wie kann ich das ändern, da wir über 36000 Produkte noch inaktiv haben.

Wir benutzen das Effortless Theme.

MfG 

[Gabe · Accepted solution]

Hey @Tartaruso 

ein Klasse Theme - Effortless. Gute Wahl! 😉

Um das Problem mit den abgeschnittenen Bildern im Shopify-Shop zu lösen, gibt es mehrere Option. Ich werde hier aber ein paar Leitfäden verlinken wo das Thema schon besprochen und Lösungen angeboten wurden: Siehe diese hier, und auch hier. 

Dann siehe unsere diverse Anleitungen zu wie du das optimalste Bildformat verwenden kannst hier.

Es DIY im CSS machen

Du kannst auch in deinen "theme.css.liquid" und einen CSS Code hinzufügen aber ganz ratsam ist das nicht. Wenn du es selber 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 negative 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!

Scrolle durch den Code, bis du Code findest, der etwas Ähnliches wie das Folgende enthält:

.product__image-wrapper {
 max-width: 400px;
}

Ändere den Wert der "max-width" Eigenschaft auf eine größere Breite, um sicherzustellen, dass die Bilder nicht abgeschnitten werden. Zum Beispiel:

.product__image-wrapper {
 max-width: 800px;
}

Speichere das und prüfe es in der Testumgebung wie es beispielsweise auf Handy aussieht. Wenn du glaubst es ist ein Problem des Themes dann können die Effortless Theme Entwickler bestimmt beraten. Siehe deren Blog hier bzgl. Bilder optimieren, und die Entwickler kannst du hier erreichen.

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. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.