wie kann ich im Ride Theme in der ersten Seite die weißen Ränder entfernen?

Deutsch Diskussion Shopify Design

Topic summary

Ein Nutzer möchte im Shopify Ride Theme die weißen Ränder auf der Startseite entfernen, um den Hero-Banner in voller Breite darzustellen.

Technische Herausforderung:

  • Die Margins sind im Ride Theme fest auf 1600px codiert
  • Eine Änderung erfordert manuelle Code-Anpassungen in den Liquid-Dateien
  • Mögliche negative Auswirkungen auf Mobile-Darstellung und Page Loading Speeds
  • Theme-Updates könnten nach Code-Änderungen ausgeschlossen werden

Vorgeschlagene Lösung:

  • CSS-Anpassungen in der base.css oder über den CSS-Editor
  • Verwendung einer Full-Width-Klasse mit width: 100%; max-width: 100%;
  • Änderung des Wrapper-Containers in der entsprechenden Liquid-Datei (z.B. image-with-text.liquid)
  • Unbedingt vorher Theme-Backup erstellen und in Testumgebung testen

Aktueller Stand:
Der Nutzer hat Schwierigkeiten, die beschriebenen Code-Stellen zu finden. Es wird empfohlen, einen Shopify-Experten zu engagieren, da die Anpassung komplex ist und tiefgreifende Code-Kenntnisse erfordert.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
2

Hey @Litecard

Danke für das Bild und nur so dass ich den Sachverhalt richtig verstehe, du willst also die weißen Margins auf der Homepage deines Shopify Ride Themes entfernen und den Hero Banner in Full Width haben.

Im Ride Theme sind diese Margins leider auf 1600px max ge-hardcodet und das zu ändern wird etwas komplex sein und eine Codeänderungen verlangen. Die Codeänderung kann auch ggf. negative Auswirkungen auf das Rendering auf Small Screens wie Mobile haben. 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 die hier 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!

Suche die Liquid File des Abschnitts im Bereich Theme → Aktionen → Duplizieren → Code bearbeiten → Sections. Es müsste etwas wie image-with-text.liquid sein. Finde im Code den wrapper div oder container der etwas wie folgt aussieht:

Ändere die Klasse des Wrappers, damit es die volle Breite hat. Du kannst eine bestehende Klasse mit voller Breite verwenden oder eine neue erstellen. Wenn du eine neue Klasse erstellst, musst du sie später in die CSS-Datei des Themes einfügen. Ändere den Wrapper zum Beispiel in:

Dann kannst du den CSS Editor verwenden oder die base.css Datei verwenden und den folgenden Code ergänzen - so wird sichergestellt, dass dein Bild mit Text auf allen Bildschirmgrößen die volle Breite einnimmt.

.full-width-wrapper {
 width: 100%;
 max-width: 100%;
}

Bei weiteren Fragen dazu hoffe ich dass du verstehen kannst dass du mit einem unserer Experten das weiter besprechen müsstest und diese Experten findest du in unserem Leitfaden hier. Gebe auch ein Suchbegriff diesbzgl. oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.