Wie du einen Abschnitt auf dem Handy in Shopify ausblendest (2026)

Die wichtigsten Punkte

• Viele Themes haben im Theme-Editor einen integrierten „Auf Mobilgeräten verbergen“-Schalter für jeden Abschnitt – schau dort zuerst nach.
• Wenn dein Theme diesen Schalter nicht hat, kannst du einen Abschnitt auf dem Handy mit einer CSS-Media-Query ausblenden.
• Custom CSS kommt in Onlineshop → Themes → Anpassen → Theme-Einstellungen → Benutzerdefiniertes CSS.
• Fudge kann für jeden Abschnitt Steuerelemente für die mobile Sichtbarkeit hinzufügen, ohne dass du Code schreiben musst.

Um einen Abschnitt auf dem Handy in Shopify auszublenden, aktiviere die Einstellung „Auf Mobilgeräten verbergen“ (Hide on mobile) im Theme-Editor, falls dein Theme diese Option bietet. Wenn nicht, füge @media (max-width: 749px) { .your-section-class { display: none; } } in den Theme-Einstellungen > Benutzerdefiniertes CSS (Custom CSS) hinzu.

Typische Kandidaten dafür sind große Bild-Text-Blöcke, eine Auszeichnungsreihe (Awards) oder Promo-Banner, die nur für den Desktop gedacht sind.

Warum du uns vertrauen kannst

Wir haben hunderte von Shopify Storefronts erstellt und angepasst. Außerdem entwickeln wir Fudge, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store.

Methode 1 — Den Sichtbarkeits-Schalter im Theme Editor nutzen

Das ist der einfachste Ansatz und funktioniert in vielen modernen Shopify-Themes.

Schritt 1. Gehe zu Onlineshop → Themes → Anpassen.

Schritt 2. Navigiere zu der Seite, die den Abschnitt enthält, den du ausblenden möchtest.

Schritt 3. Klicke in der linken Seitenleiste auf den Abschnitt, um seine Einstellungen zu öffnen.

Schritt 4. Suche nach einer Checkbox „Auf Mobilgeräten verbergen“ (Hide on mobile) oder einer Option „Sichtbarkeit“ (Visibility). In einigen Themes befindet sich diese unten im Einstellungsfenster des Abschnitts. In anderen ist es ein Schalter mit einem Geräte-Icon.

Schritt 5. Aktiviere die Option und speichere.

Wenn du diese Option nicht siehst, unterstützt dein Theme sie nicht von Haus aus. Nutze in diesem Fall Methode 2.

Um einzelne Blöcke oder Elemente auszublenden, lies dir durch, wie man Inhalte auf dem Handy in Shopify ausblendet.

Wie bearbeite ich meine mobile Ansicht in Shopify?

Der Theme-Editor hat oben in der Vorschau eine Symbolleiste für die Gerätevorschau. Klicke auf das Handy-Icon, um die Vorschau auf eine mobile Ansicht umzuschalten.

So siehst du genau, wie dein Store auf dem Handy aussieht. Die Handy-Vorschau ändert nur, was du siehst; Einstellungen, die du dort änderst, gelten für jedes Gerät. Für Layout-Unterschiede, die über die Sichtbarkeit von Abschnitten hinausgehen, benötigst du CSS oder ein Tool wie Fudge.

Methode 2 — Mit CSS auf dem Handy ausblenden

Wenn dein Theme keinen Schalter für die Sichtbarkeit hat, kannst du einen Abschnitt mit einer CSS-Media-Query ausblenden.

Schritt 1. Identifiziere den Abschnitt, den du ausblenden willst. Klicke im Browser mit der rechten Maustaste darauf → Untersuchen (Inspect) → finde die Klasse oder ID auf dem äußersten Element. Sie sieht in etwa so aus: .shopify-section-template--hero oder hat eine benutzerdefinierte Abschnitts-ID.

Schritt 2. Gehe zu Onlineshop → Themes → Anpassen → scrolle in der linken Seitenleiste ganz nach unten → klicke auf Theme-Einstellungen → scrolle zu Benutzerdefiniertes CSS (Custom CSS).

Schritt 3. Füge dieses CSS hinzu und ersetze .your-section-class durch die tatsächliche Klasse:

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

Schritt 4. Speichern.

Der Abschnitt ist nun auf Bildschirmen schmaler als 750px unsichtbar – dem Punkt, an dem Dawn zu seinem mobilen Layout wechselt. Auf Tablets und Desktops bleibt er vollständig sichtbar.

Wichtig: Das Ausblenden mit CSS lädt trotzdem das HTML des Abschnitts. Der Abschnitt existiert im Quelltext der Seite – er wird nur nicht angezeigt. Für leistungskritische Abschnitte mit großen Bildern ist es der bessere Ansatz, den Abschnitt komplett zu entfernen (oder eine Theme-Option zu verwenden).

Um das Gegenteil zu tun, schau dir an, wie man einen Abschnitt auf dem Desktop in Shopify ausblendet.

Welche Breakpoints verwendet Shopify?

Shopify-Themes schreiben keinen einheitlichen Breakpoint-Standard vor, aber die meisten folgen gängigen Konventionen:

Dawn und seine Schwester-Themes (Sense, Refresh, Craft) verwenden 750px für Mobile und 990px für Desktop. Überprüfe das Stylesheet deines Themes, wenn du den genauen Wert benötigst.

Füge mit Fudge einen Schalter für die mobile Sichtbarkeit hinzu

Wenn du genaue Kontrolle darüber brauchst, was auf dem Handy über mehrere Abschnitte hinweg angezeigt wird, kann Fudge, der KI-Operator für Shopify-Stores, echte Sichtbarkeits-Schalter für Mobile/Desktop direkt im Abschnitts-Schema deines Themes hinzufügen. Bitte den Store-Editor einfach in ganz normaler Sprache um die Änderung.

Beschreibe, was du willst:

“Füge dem Promo-Banner-Abschnitt auf meiner Startseite einen Schalter zum Ausblenden auf dem Handy hinzu.”

Fudge fügt dem Schema des Abschnitts eine Einstellung und die entsprechende CSS-Klasse hinzu – genau wie es ein Entwickler tun würde. Du überprüfst den Entwurf in einer Vorschau in Handygröße, bevor du ihn veröffentlichst, und der Schalter erscheint dann im Theme-Editor, wo dein Team ihn ohne Code verwenden kann.

Beeinflusst das Ausblenden eines Abschnitts auf dem Handy SEO?

Die Verwendung von display: none in CSS entfernt den Inhalt nicht aus dem Google-Index. Google rendert Seiten und kann CSS-versteckte Inhalte lesen. Für SEO-Zwecke ist der Inhalt also weiterhin vorhanden.

Wenn der Inhalt auf dem Handy wirklich nicht relevant ist und du nicht willst, dass er indexiert wird, entferne den Abschnitt. Liquid läuft auf den Servern von Shopify und kann das Gerät nicht erkennen. Es kann also keinen Abschnitt nur für Handys weglassen.

Für die meisten Händler ist display: none völlig ausreichend.

FAQ