Hey @KimW97
Basierend auf deiner Beschreibung klingt es so, als ob der weiße Kasten möglicherweise von einem anderen Element auf der Seite erzeugt wird, das eine Hintergrundfarbe oder einen Rand hat.
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!
Um den weißen Kasten zu entfernen, könntest du einen Code wie den folgenden verwenden:
.collection-list__item {
background: none; /* Setzen Sie den Hintergrund auf transparent */
border: none; /* Entfernen Sie den Rand */
}
.collection-list__item img {
border-radius: 50%;
background: none; /* Setzen Sie den Hintergrund auf transparent */
border: none; /* Entfernen Sie den Rand */
}
Diese Stile sollten sowohl den Hintergrund als auch den Rand des Elements .collection-list__item und des img-Elements selbst auf “transparent” bzw. “kein Rand” setzen. Beachte bitte, dass dieser Code davon abhängt, wie eurer Shop und Theme strukturiert sind, und dass möglicherweise noch weitere Änderungen vorgenommen werden müssen, um das gewünschte Aussehen zu erzielen.
Falls das nicht funktioniert, könnte es sein, dass das Element einen Schatten (box-shadow) hat. In diesem Fall könnte man diesen auch entfernen:
.collection-list__item, .collection-list__item img {
box-shadow: none;
}
Falls das auch nicht funktioniert, die Chrome Developer Console des Browsers verwenden (Rechtsklick → “Inspect”), um das Element zu inspizieren und herauszufinden, wo der weiße Kasten herkommt. Damit kann man sehen, welche CSS-Regeln auf ein bestimmtes Element angewendet werden, und diese Regeln direkt im Browser bearbeiten, um zu testen, welche Änderungen den gewünschten Effekt haben.
