So blendest du einen Abschnitt auf Mobilgeräten in Shopify aus (2026)

Wichtige Erkenntnisse

• Viele Themes haben einen integrierten Schalter „Auf Mobilgeräten ausblenden“ pro Abschnitt im Theme Editor – schau dort zuerst nach.
• Wenn dein Theme diesen Schalter nicht hat, kannst du einen Abschnitt auf dem Handy mit einer CSS Media Query ausblenden.
• Eigener CSS-Code wird unter Onlineshop → Themes → Anpassen → Theme-Einstellungen → Eigenes CSS eingefügt.
• Fudge kann Steuerungen für die mobile Sichtbarkeit zu jedem Abschnitt hinzufügen, ohne dass du Code schreiben musst.

Manche Abschnitte sehen auf dem Desktop super aus, überladen aber das mobile Erlebnis. Ein großer Bild-Text-Block, eine Zeile mit Auszeichnungen, ein Banner nur für Desktop – manchmal passen sie einfach nicht auf einen kleinen Bildschirm.

So blendest du sie aus.

Warum du uns vertrauen kannst

Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-Bewertung im Shopify App Store.

Methode 1 – Den Sichtbarkeitsschalter im Theme Editor nutzen

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

Passend dazu: Inhalte auf Mobilgeräten in Shopify ausblenden.

Schritt 1. Gehen Sie zu Online-Shop → Themes → Customizer.

Schritt 2. Navigieren Sie zu der Seite, die den Abschnitt enthält, den Sie ausblenden möchten.

Schritt 3. Klicken Sie in der linken Seitenleiste auf den Abschnitt, um dessen Einstellungen zu öffnen.

Schritt 4. Suchen Sie nach einem Kontrollkästchen „Auf Mobilgeräten ausblenden“ (Hide on mobile) oder einer Option für die „Sichtbarkeit“. In einigen Themes erscheint dies unten im Einstellungsbereich des Abschnitts. In anderen wird es als Geräte-Icon zum Umschalten angezeigt.

Schritt 5. Aktivieren Sie die Option und speichern Sie.

Falls Sie diese Option nicht sehen, bietet Ihr Theme sie nicht nativ an. Verwenden Sie in diesem Fall Methode 2.

Wie bearbeite ich meine mobile Ansicht in Shopify?

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

Hier siehst du genau, wie dein Shop auf dem Handy aussieht. Änderungen, die du in dieser Ansicht vornimmst (sofern unterstützt), gelten nur für die mobile Version. Für Layout-Unterschiede, die über die Sichtbarkeit von Abschnitten hinausgehen, benötigst du CSS oder ein Tool wie Fudge.

Verwandt: Improve Mobile Spacing in Shopify.

Verwandt: Hide Content on Mobile in Shopify.

Methode 2 – Mit CSS auf dem Handy ausblenden

Wenn Ihr Theme keinen Schalter für die Sichtbarkeit hat, können Sie einen Abschnitt mithilfe einer CSS Media Query ausblenden.

Schritt 1. Identifizieren Sie den Abschnitt, den Sie ausblenden möchten. Klicken Sie im Browser mit der rechten Maustaste darauf → Untersuchen (Inspect) → suchen Sie die Klasse oder ID im äußersten Element. Sie sieht etwa aus wie .shopify-section-template--hero oder eine benutzerdefinierte Abschnitts-ID.

Schritt 2. Gehen Sie zu Online-Shop → Themes → Customizer → scrollen Sie in der linken Seitenleiste ganz nach unten → klicken Sie auf Theme-Einstellungen → scrollen Sie zu Benutzerdefiniertes CSS (Custom CSS).

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

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

Schritt 4. Speichern.

Der Abschnitt ist nun auf Bildschirmen unsichtbar, die schmaler als 768px sind – der Standard-Breakpoint für Mobilgeräte. Auf Tablets und Desktops bleibt er voll sichtbar.

Passend dazu: Shopify Theme beschleunigen.

Passend dazu: Abstände auf Mobilgeräten in Shopify verbessern.

Passend dazu: Einen Abschnitt auf dem Desktop in Shopify ausblenden.

Wichtig: Das Ausblenden mit CSS lädt den HTML-Code des Abschnitts trotzdem. Der Abschnitt existiert im Quelltext der Seite – er wird lediglich nicht angezeigt. Bei performance-kritischen Abschnitten mit großen Bildern ist es besser, den Abschnitt komplett zu entfernen oder eine Theme-Option zu nutzen.

Welche Breakpoints nutzt Shopify?

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

Dawn nutzt 750px als primären Mobile/Tablet Breakpoint. Schau im Stylesheet deines Themes nach, wenn du den exakten Wert benötigst.

Methode 3 – Fudge nutzen, um Steuerungen für die mobile Sichtbarkeit hinzuzufügen

Wenn du präzise Kontrolle darüber brauchst, was auf dem Handy in mehreren Abschnitten angezeigt wird, kann Fudge echte Sichtbarkeitsschalter für Mobile/Desktop direkt in das Schema deines Themes einfügen.

Beschreibe einfach, was du willst:

„Füge einen ‚Auf Mobilgeräten ausblenden‘-Schalter zum Werbebanner-Abschnitt auf meiner Startseite hinzu.“

Fudge bearbeitet das Schema des Abschnitts und fügt die Logik für das bedingte Rendering hinzu – genau wie ein Entwickler es tun würde. Der Schalter erscheint dann im Theme Editor, damit dein Team ihn ohne Code nutzen 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 per CSS ausgeblendete Inhalte lesen. Für SEO-Zwecke existiert der Inhalt weiterhin.

Wenn der Inhalt auf dem Handy wirklich nicht relevant ist und du nicht möchtest, dass er indexiert wird, ist der bessere Ansatz das Section-Rendering von Shopify zu nutzen, um ihn bedingt aus dem HTML auszuschließen – was Code oder Fudge erfordert.

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