Wichtigste Erkenntnisse

Der Theme Editor verfügt möglicherweise bereits über Sichtbarkeits-Toggle pro Abschnitt – prüfe zuerst die Abschnittseinstellungen.

CSS display: none innerhalb eines @media (max-width: 767px) Blocks blendet jedes Element auf dem Handy aus.

Füge benutzerdefiniertes CSS zu assets/base.css im Code-Editor deines Themes hinzu.

Fudge kann jedem Element responsive Sichtbarkeit verleihen, ohne dass du CSS manuell schreiben musst.

Desktop-Layouts enthalten oft dekorative Elemente, detaillierte Seitenleisten oder sekundäre Inhalte, die das mobile Erlebnis überladen. Das Ausblenden dieser Inhalte auf kleinen Bildschirmen ist eine Standardtechnik im Responsive Design – und es ist einfacher, als die meisten denken.

Wann man Inhalte auf dem Handy ausblenden sollte

Bevor du etwas ausblendest, frage dich, ob du das richtige Problem löst. Ausgeblendete Inhalte werden trotzdem geladen – sie sind nur nicht sichtbar. Wenn du große Bilder oder komplexe Widgets ausblendest, solltest du aus Performance-Gründen überlegen, ob sie auf dem Handy überhaupt geladen werden sollten.

Gute Kandidaten für das Ausblenden auf Mobilgeräten:

Dekorative Illustrationen oder Icons, die nur für den Desktop gedacht sind
Sekundäre Navigationsmenüs, die das mobile Burger-Menü duplizieren
„Bekannt aus“-Logo-Grids, die zu viel vertikalen Platz einnehmen
Anleitungstexte nur für Desktop („Bewege den Mauszeiger über das Bild zum Zoomen“)
Große Datentabellen, die durch eine mobilfreundliche Alternative ersetzt werden sollten

Methode 1 — Einstellungen im Theme Editor

Beginne hier, bevor du den Code anfasst.

Schritt 1 — Öffne den Theme Editor. Gehe zu Onlineshop → Themes → Anpassen.

Schritt 2 — Wähle den Abschnitt oder Block aus, den du auf dem Handy ausblenden möchtest.

Schritt 3 — Suche nach Sichtbarkeitseinstellungen. Im rechten Einstellungsbereich enthalten einige Themes Optionen wie:

„Auf Mobilgeräten ausblenden“
„Nur auf Desktop anzeigen“
„Gerätesichtbarkeit: Desktop / Mobil / Beides“

Wenn der Toggle vorhanden ist, aktiviere ihn und überprüfe das Ergebnis über die mobile Vorschau (Smartphone-Icon oben im Editor).

Methode 2 — CSS Media Query (der universelle Ansatz)

Wenn dein Theme keine Sichtbarkeits-Toggle hat, ist CSS die zuverlässige Lösung. Dies funktioniert für jedes Element – Abschnitte, Blöcke, einzelne HTML-Elemente – und erfordert keinen Entwickler.

Schritt 1 — Finde die Klasse des Elements. Klicke in deinem Browser mit der rechten Maustaste auf das Element, das du ausblenden möchtest → Untersuchen → notiere den Klassennamen des äußersten Elements (z. B. announcement-bar, section-rich-text, logo-bar).

Schritt 2 — Öffne das CSS deines Themes. Gehe zu Onlineshop → Themes → Aktionen → Code bearbeiten → öffne assets/base.css.

Schritt 3 — Füge am Ende der Datei eine Media Query hinzu:

@media (max-width: 767px) {
  .deine-element-klasse {
    display: none;
  }
}

Ersetze .deine-element-klasse durch die tatsächliche Klasse aus Schritt 1.

Schritt 4 — Speichern und testen. Verkleinere dein Browserfenster auf unter 768px Breite oder nutze die Device Emulation der Chrome DevTools (F12 → Smartphone-Icon), um zu bestätigen, dass das Element ausgeblendet ist.

Dupliziere dein Theme immer, bevor du den Code bearbeitest. Gehe zu Themes → Drei-Punkte-Menü → Duplizieren.

Methode 3 — Fudge zum Hinzufügen von responsiven Sichtbarkeitsreglern

Wenn du eine saubere Lösung suchst, die über den Theme Editor funktioniert, ohne Klassennamen suchen zu müssen, kann Fudge jedem Abschnitt die passenden Sichtbarkeitseinstellungen hinzufügen.

Beschreibe es in einfachem Deutsch (oder Englisch):

„Blende den dekorativen Banner-Abschnitt der Desktop-Ansicht auf mobilen Bildschirmen aus.“

Oder:

„Füge unserem Logo-Bar-Abschnitt einen Toggle zum Ein-/Ausblenden auf Mobilgeräten hinzu.“

Fudge entwirft die Änderung zur Überprüfung. Nichts geht live, bevor du es bestätigst.

Füge responsive Sichtbarkeitsregler hinzu, ohne CSS zu schreiben.

Try Fudge for Free

So änderst du die mobile Ansicht in Shopify

Der gängigste Weg, dein mobiles Layout zu prüfen, ist die Vorschau im Theme Editor:

Gehe zu Onlineshop → Themes → Anpassen
Klicke auf das Smartphone-Icon oben in der Mitte
Navigiere durch deine Seiten, um das mobile Rendering zu prüfen

Für genauere Tests verwende die Chrome DevTools (F12 → Klick auf das Smartphone/Tablet-Icon in der Toolbar). Hier kannst du spezifische Gerätegrößen auswählen und mit der Seite interagieren wie ein mobiler Nutzer.

Du kannst auch den integrierten mobilen Vorschaulink von Shopify nutzen – wenn du eine Seite im Admin-Bereich betrachtest, zeigen einige Abschnitte einen „Vorschau“-Link an, der eine mobiloptimierte Ansicht öffnet.

Wie blende ich einen Abschnitt in Shopify auf dem Handy aus?

Um einen vollständigen Abschnitt mobil auszublenden:

Prüfe, ob dein Theme einen Toggle „Auf Mobilgeräten ausblenden“ in den Abschnittseinstellungen hat (am einfachsten)
Falls nicht, finde die CSS-Klasse des Abschnitts mit dem Browser-Untersuchen-Tool
Füge display: none innerhalb eines @media (max-width: 767px) Blocks in assets/base.css ein

Der Media Query Breakpoint von 767px ist der Standard-Breakpoint des Shopify Dawn Themes. Einige Themes verwenden 749px oder 990px – prüfe das bestehende CSS deines Themes, um dich an die Konvention zu halten.

Ausblenden vs. Entfernen von Inhalten

Das Ausblenden mit CSS behält den Inhalt im HTML – er wird lediglich nicht angezeigt. Das ist für dekorative Elemente in Ordnung, aber nicht ideal für:

Inhalte, die das Laden der Seite verlangsamen (große Bilder, Video-Iframes)
Inhalte, die du niemals auf dem Handy haben willst (nutze stattdessen einen separaten mobilen Abschnitt)

Bei performance-kritischen Inhalten ist der bessere Ansatz das bedingte Liquid-Rendering – wobei das HTML nur ausgegeben wird, wenn der Nutzer auf dem Desktop ist. Dies erfordert Code-Änderungen in der Liquid-Datei deines Abschnitts, die Fudge für dich erledigen kann.