Brooklyn Theme - Kategorie Titelbild in voller Breite

[Yvi]

Hey, ich möchte gerne das Titelbild der Kategorie als Vollbild einstellen.

Kann mir hier jemand weiterhelfen wie ich das einstellen kann bzw. einen CSS Code?

Besten Dank!

[Gabe · Accepted solution]

Hi @Yvi 

Hast du vielleicht einen Bildschirmabgriff wie das Titelbild derzeit aussieht und ist das auf Handy oder Desktop? Das Brooklyn Theme ist sehr auf Handy ausgelegt und somit ist das derzeitige Theme Verhalten so wie in meinem video unten abgebildet. Andere Themes bieten auch ALLE Seiten des Shops in voller und angepasster Bildschirmbreite an und diese Themes kannst du gerne zum Shop hinzufügen und kostenlos testen. Siehe z. B. eine Auswahl solcher Themes die sich besonders für den Industriesektor Bekleidung eigenen hier (andere Industriesektoren findest du im Filter ganz oben). 

Aber lass uns mal schauen was alles DIY möglich ist falls du diesen Weg gehen möchtest. Ein Beispiel eines Shops wo ein Code eingebastelt wurde um den Hero Banner der Kategorie auf volle Breite darzustellen ist das hier. Ein Nebeneffekt dieser DIY Bastelei ist das auf Desktop die 3 Produkte sich ein wenig nach Links verschoben haben und dass das volle Menü gezeigt wird und nicht das Hamburger Menü. Alles hat halt seine Vor- und Nachteile.

Das folgende DIY Code ist ohne Gewähr und wir raten das nur in einer Theme Kopie zuerst zu testen bevor man es im Live Theme implementiert. Nicht vergessen, da das ein Shopify Theme ist und du auf einem bezahlten Plan dann können wir das ggf. anschauen als Teil deiner 60-Min Design Time. Schicke uns eine E-Mail und unser Theme Team wird das anschauen können.

DIY (do it yourself):

Das kann man z. B. mit einem Code wie das folgende machen:

1. Gehe zu Online Store -> Theme -> Code bearbeiten
2. Asset -> theme.scss.liquid -> Füge den folgenden Code am Ende der Datei ein.

#CollectionSection {
    max-width: 1050px;
    margin: 0px auto;
}
.template-collection .wrapper {
    max-width: 100%;
    padding: 0;
}

Sieht das Menü etwas zu sehr nach links und rechts verschoben aus, dann ergänze das obige Code mit dem folgenden:

.template-collection header.site-header .wrapper {
    max-width: 1050px;
}

[Yvi]

@Gabe Hat mit dem Code super geklappt. Besten Dank!