Skip to main content
⚠️ Wichtiger Hinweis Diese Anpassung funktioniert nur mit Version 1 der Upcart-Warenkorbmodule. Wenn du deinen Warenkorb kürzlich auf Version 2 aktualisiert hast, funktionieren diese Anpassungen möglicherweise nicht. Du musst die neuen Selektoren für Version 2 aus dem Migrationsleitfaden verwenden. Wenn deine Anpassungen nicht wie erwartet funktionieren, kannst du deinen Warenkorb auch auf Version 1 zurücksetzen, anstatt Version 2 zu verwenden. Wir arbeiten derzeit an neuen Anpassungsvorlagen für Version 2 der Module — sie werden bald verfügbar sein.

​
Überblick

Wenn deine Produktbilder in Upcart verzerrt, gestaucht oder abgeschnitten aussehen, liegt das in der Regel an einem Theme-Styling-Konflikt. Manche Shopify-Themes wenden globales Bild-Styling an, das beeinflusst, wie Produktbilder in Upcart angezeigt werden. Du kannst dieses Problem beheben, indem du eine kurze CSS-Anpassung direkt in den Editor-Einstellungen von Upcart hinzufügst.

​
So behebst du es

Folge diesen Schritten, um eine CSS-Anpassung anzuwenden, die die Proportionen deiner Produktbilder bewahrt.

​
Auf die Custom-CSS-Einstellungen zugreifen

  1. Öffne die Upcart-App über dein Shopify-Dashboard.
  2. Navigiere zum Cart Editor.
  3. Öffne Settings und wähle den Tab Custom CSS. Settings ist eine Reihe von Tabs — wenn du Custom CSS nicht siehst, befindet es sich hinter More settings.

​
Das CSS hinzufügen

  1. Kopiere das folgende CSS-Snippet und füge es in das Feld Custom CSS ein:
  1. Speichere deine Änderungen.
  2. Aktualisiere deinen Storefront und öffne Upcart, um zu bestätigen, dass die Bilder jetzt korrekt angezeigt werden.

​
Warum das passiert

Manche Shopify-Themes wenden globale CSS-Regeln an, die Bilder so skalieren oder zuschneiden, dass ihre Darstellung in Drittanbieter-Apps wie Upcart beeinträchtigt wird. Diese Regeln können das Standard-Styling von Upcart überschreiben und die Bildproportionen verzerren. Das obige CSS-Snippet stellt sicher, dass Produktbilder ihr ursprüngliches Seitenverhältnis beibehalten und sowohl auf Desktop- als auch auf Mobilgeräten korrekt angezeigt werden.