Inhalte auf dem Handy in Shopify ausblenden (2026)

Das Wichtigste in Kürze

• Der Theme Editor hat vielleicht schon Sichtbarkeits-Toggles für einzelne Abschnitte — sieh zuerst in den Abschnittseinstellungen nach.
• Mit CSS display: none in einem @media (max-width: 767px)-Block lässt sich jedes Element auf Mobile ausblenden.
• Füge eigenes CSS zur assets/base.css im Code-Editor deines Themes hinzu.
• Fudge kann responsive Sichtbarkeit zu jedem Element hinzufügen, ohne dass du CSS manuell schreiben musst.

Desktop-Layouts enthalten oft dekorative Elemente, detaillierte Sidebars oder sekundäre Inhalte, die das mobile Erlebnis überladen. Diese Inhalte auf kleinen Bildschirmen auszublenden, ist eine Standard-Technik im Responsive Design — und es ist einfacher, als die meisten denken.

Wann man Inhalte auf dem Handy ausblenden sollte

Bevor du etwas versteckst, frage dich, ob du das richtige Problem löst. Versteckte 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:

Passend dazu: Mobile Abstände in Shopify verbessern.

Passend dazu: Shopify-Sektionen nur auf Mobilgeräten anzeigen.

• Dekorative Illustrationen oder Icons nur für Desktop
• Sekundäre Navigationsmenüs, die das mobile Hamburger-Menü duplizieren
• „Bekannt aus“-Logogittern, die zu viel vertikalen Platz einnehmen
• Anleitungstexte nur für Desktop („Bewege die Maus über das Bild zum Zoomen“)
• Große Datentabellen, die durch eine mobile-friendly 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).

Verwandt: Reorder Sections on a Shopify Page.

Verwandt: Make Shopify Sections Mobile-Only.

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.

So änderst du die mobile Ansicht in Shopify

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

1. Gehe zu Onlineshop → Themes → Anpassen
2. Klicke auf das Smartphone-Icon oben in der Mitte
3. 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:

1. Prüfe, ob dein Theme einen Toggle „Auf Mobilgeräten ausblenden“ in den Abschnittseinstellungen hat (am einfachsten)
2. Falls nicht, finde die CSS-Klasse des Abschnitts mit dem Browser-Untersuchen-Tool
3. 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

Verbergen mit CSS belässt den Inhalt im HTML — er wird nur nicht angezeigt. Das ist für dekorative Elemente völlig in Ordnung, aber nicht ideal für:

• Inhalte, die das Laden der Seite verlangsamen (große Bilder, Video-Iframes)
• Inhalte, die du auf Mobile gar nicht haben willst (nutze stattdessen eine separate Mobile-Section)

Für performancekritische Inhalte ist das bedingte Rendering mit Liquid der bessere Ansatz — dabei wird das HTML nur ausgegeben, wenn der User am Desktop ist. Das erfordert Code-Änderungen in der Liquid-Datei deiner Section, die Fudge übernehmen kann.

FAQ

Verwandt: Shopify-Abschnitte auf einer Seite neu anordnen.

Verwandt: Ein Shopify-Theme beschleunigen.