Bilder Abstände zwischen den Bilder verringern und an den seiten

[FlorianSchnk]

Hallo alle zusammen, 

ich habe eine Frage. Wie kann man bei den ,,featured collection'' und auf der Produktseite selber die Ränder zum Bildschirm hin verringern oder ganz entfernen? Zudem wollte ich die Abstände zwischen den Bildern verringern.so sieht es bisher aus: 

ich verwende das Dawn Theme 14.0.0 

so sollte es aussehen: 

Danke 🙂

[Gabe · Accepted solution]

Hey @FlorianSchnk 

Die Ränder sind ein Feature der Dawn Theme Bildergalerien und um das zu erreichen was du in deinen Beispielbilder abgebildet hast, verlangt eine komplexe Codeänderung wenn du keine andere Themes verwenden möchtest, die das out-of-the-box können. Hast du auch andere Themes getestet, die die Bilder Ränder Frei anzeigen?

Um die Ränder zwischen den Bildern in der Galerie auf der Produktseite und im Abschnitt "Featured Collection" zu entfernen und die Abstände zu verringern, kannst du spezifisches CSS anwenden. 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 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!

Hier ein CSS für deine Varianten-Bildergalerie auf der PDP - aber bitte in deinem Fall musst du den Code anpassen:

/* Entferne Ränder und Abstände in der Produktseite Galerie */
.product__media-item {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.product-media-container {
    margin: 0 !important;
    padding: 0 !important;
}

.product__media img {
    margin: 0 !important;
    padding: 0 !important;
}

/* Entferne Ränder und Abstände in der Featured Collection Galerie */
.featured-collection__item {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.featured-collection__media {
    margin: 0 !important;
    padding: 0 !important;
}

.featured-collection__image {
    margin: 0 !important;
    padding: 0 !important;
}

Hier ein CSS für Bildergalerie des Featured Collection Abschnitt - aber bitte in deinem Fall musst du den Code anpassen:

/* Entferne Ränder und Abstände in der Produktseite Galerie */
.product__media-item, 
.product-media-container, 
.product__media img {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Entferne Ränder und Abstände in der Featured Collection Galerie */
.grid.product-grid.contains-card li.grid__item {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.card-wrapper.product-card-wrapper,
.card.card--standard.card--media {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.card__inner {
    padding: 0 !important;
    margin: 0 !important;
}

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.