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 Mobilgeräten ausblenden möchtest.

Schritt 3 – Suche nach Sichtbarkeits-Einstellungen. Im rechten Einstellungs-Panel bieten einige Themes Optionen wie:

• „Auf Mobilgeräten ausblenden“
• „Nur auf dem Desktop anzeigen“
• „Gerätesichtbarkeit: Desktop / Mobile / Beide“

Wenn es diesen Schalter gibt, leg ihn um und überprüfe das Ganze über die mobile Vorschau (Handy-Symbol oben im Editor).

Methode 2 — CSS Media Query (der universelle Ansatz)

Wenn dein Theme keine Schalter für die Sichtbarkeit hat, ist CSS die zuverlässige Lösung. Das funktioniert für jedes Element – Abschnitte, Blöcke, einzelne HTML-Elemente – und du brauchst dafür keinen Entwickler.

Schritt 1 – Finde die Klasse des Elements. Mache in deinem Browser einen Rechtsklick auf das Element, das du ausblenden möchtest → Untersuchen (Inspect) → notiere dir 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 ganz unten in der Datei eine Media Query hinzu:

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

Ersetze .your-element-class mit der tatsächlichen Klasse aus Schritt 1.

Schritt 4 – Speichern und testen. Verkleinere dein Browserfenster auf unter 768px Breite oder nutze die Geräte-Emulation der Chrome DevTools (F12 → Handy-Symbol), um zu prüfen, ob das Element ausgeblendet wird.

Dupliziere dein Theme immer, bevor du 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

Passend dazu: Sections auf einer Shopify-Seite neu anordnen.

Passend dazu: Ein Shopify-Theme schneller machen.