Inhalte auf dem Handy in Shopify ausblenden (2026)

Das Wichtigste in Kürze

• Der Theme-Editor hat möglicherweise schon Sichtbarkeits-Toggles für jeden Abschnitt – prüfe zuerst die Abschnitts-Einstellungen.
• CSS display: none innerhalb eines @media (max-width: 749px)-Blocks versteckt jedes Element auf dem Handy.
• Füge benutzerdefiniertes CSS zu assets/base.css im Code-Editor deines Themes hinzu.
• Fudge kann jedem Element responsive Sichtbarkeit hinzufügen, ohne dass du manuell CSS schreiben musst.

Um Inhalte auf dem Handy in Shopify zu verstecken, suche zuerst nach einer “Auf dem Handy verbergen”- oder Sichtbarkeits-Einstellung in den Abschnitts-Einstellungen. Wenn es keine gibt, füge @media (max-width: 749px) { .your-class { display: none; } } zum CSS deines Themes hinzu.

Wann man Inhalte auf dem Handy ausblenden sollte

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

Gute Kandidaten zum Verstecken auf dem Handy:

• Dekorative Illustrationen oder Icons, die nur für den Desktop gedacht sind
• Sekundäre Navigationsmenüs, die das mobile Hamburger-Menü duplizieren
• “Bekannt aus”-Logo-Grids, die zu viel vertikalen Platz einnehmen
• Desktop-spezifische Anweisungstexte (“Fahre mit der Maus über das Bild, um zu zoomen”)
• Große Datentabellen, die durch eine mobile-friendly Alternative ersetzt werden sollten

Um einen Abschnitt nur auf dem Handy anzuzeigen, schau dir an, wie man einen Abschnitt auf dem Desktop in Shopify versteckt.

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 Sichtbarkeits-Toggles hat, ist CSS die zuverlässige Lösung. Das funktioniert für jedes Element – Abschnitte, Blöcke, einzelne HTML-Elemente – und erfordert keinen Entwickler.

Schritt 1 — Dupliziere dein Theme. Gehe zu Onlineshop → Themes, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Duplizieren. Nimm die Änderungen an der Kopie vor.

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

Schritt 3 — Öffne das CSS deines Themes. Klicke bei dem Duplikat auf das Drei-Punkte-Menü (…), dann auf Code bearbeiten, und öffne assets/base.css.

Schritt 4 — Füge eine Media Query ganz unten in der Datei hinzu:

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

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

Schritt 5 — Speichern und testen. Mache dein Browserfenster schmaler als 750px oder nutze die Geräte-Emulation der Chrome DevTools (F12 → Handy-Icon), um zu bestätigen, dass das Element versteckt ist.

Methode 3 — Fudge zum Hinzufügen von responsiven Sichtbarkeitsreglern

Wenn du eine saubere Lösung möchtest, die über den Theme-Editor funktioniert, ohne dass du Klassennamen jagen musst, kann Fudge, der KI-Operator für Shopify-Stores, über seinen Store-Editor jedem Abschnitt echte Sichtbarkeits-Einstellungen hinzufügen.

Beschreibe es einfach mit eigenen Worten:

“Verstecke den dekorativen Desktop-Banner-Abschnitt auf mobilen Bildschirmen.”

Oder:

“Füge unserem Logo-Bar-Abschnitt einen Show/Hide-Toggle für mobile Geräte hinzu.”

Fudge entwirft die Änderung zur Überprüfung. Nichts geht live, bis du es freigibst. Wenn du Inhalte versteckst, weil sich mobile Seiten überladen anfühlen, kann Fudge auch anhand deiner Google-Analytics-Daten zeigen, welche Seiten auf dem Handy die meisten Käufer verlieren, und vorschlagen, was du zuerst vereinfachen solltest.

So änderst du die mobile Ansicht in Shopify

Der häufigste Weg, um dein Mobile-Layout zu überprüfen, ist die Vorschau im Theme-Editor:

1. Öffne Onlineshop → Themes → Anpassen
2. Klicke oben in der Mitte auf das Handy-Icon
3. Navigiere durch deine Seiten, um die mobile Darstellung zu überprüfen

Für genaueres Testen solltest du die Chrome DevTools nutzen (F12 → klicke auf das Handy/Tablet-Icon in der Toolbar). Damit kannst du spezifische Gerätegrößen auswählen und mit der Seite so interagieren, wie ein mobiler Nutzer es tun würde.

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

Um einen kompletten Abschnitt auf dem Handy zu verstecken:

1. Prüfe, ob dein Theme einen “Auf dem Handy verbergen”-Toggle in den Abschnitts-Einstellungen hat (am einfachsten)
2. Falls nicht, finde die CSS-Klasse des Abschnitts mit den Inspect-Tools des Browsers heraus
3. Füge display: none innerhalb eines @media (max-width: 749px)-Blocks in der assets/base.css hinzu

Dawn und seine Schwester-Themes (Sense, Refresh, Craft) nutzen 750px für Mobile und 990px für Desktop, weshalb max-width: 749px genau zum Mobile-Layout von Dawn passt. Andere Themes verwenden andere Werte – checke also das bestehende CSS deines Themes, um dich an dessen Konventionen anzupassen.

Ausblenden vs. Entfernen von Inhalten

Beim Verstecken mit CSS bleibt der Inhalt im HTML – er wird nur nicht angezeigt. Das ist bei dekorativen Elementen völlig okay, aber nicht ideal für:

• Inhalte, die die Ladezeit der Seite verlangsamen (große Bilder, Video-iFrames)
• Inhalte, die du auf dem Handy nie haben willst (nutze stattdessen einen separaten mobilen Abschnitt)

Für performance-kritische Inhalte solltest du Bilder und Videos per Lazy Loading einbinden (loading="lazy"), damit Handys nicht herunterladen, was sie gar nicht anzeigen, oder eine leichtere mobile Version des Abschnitts bauen. Liquid kann das nicht pro Gerät steuern, da es auf den Servern von Shopify läuft und nicht erkennen kann, ob der Besucher am Handy ist.

FAQ