FROM CACHE - de_header

Brooklyn Theme - Kategorie Titelbild in voller Breite

Gelöst
Yvi
Tourist
6 0 2

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!

1 AKZEPTIERTE LÖSUNG

Anerkannte Lösungen
Gabe
Shopify Staff
Shopify Staff
7429 1192 1920

Erfolg.

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;
}

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

2 ANTWORTEN 2
Gabe
Shopify Staff
Shopify Staff
7429 1192 1920

Erfolg.

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;
}

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Yvi
Tourist
6 0 2

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