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.

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 dessen Einstellungen zu öffnen.

Schritt 4. Suche nach einem Kontrollkästchen „Auf Mobilgeräten ausblenden“ oder einer Option „Sichtbarkeit“. In einigen Themes erscheint dies ganz unten im Einstellungsbereich des Abschnitts. In anderen wird es als Symbol für den Gerätetyp angezeigt.

Schritt 5. Aktiviere die Option und speichere.

Wenn du diese Option nicht siehst, bietet dein Theme sie nativ nicht an. Nutze stattdessen 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.

Methode 2 – Mit CSS auf dem Handy ausblenden

Wenn dein Theme keinen Sichtbarkeitsschalter hat, kannst du einen Abschnitt mit einer CSS Media Query ausblenden.

Schritt 1. Identifiziere den Abschnitt, den du ausblenden möchtest. Klicke mit der rechten Maustaste im Browser darauf → Untersuchen → finde die Klasse oder ID am äußersten Element. Das sieht etwa so aus wie .shopify-section-template--hero oder eine benutzerdefinierte Section-ID.

Schritt 2. Gehe zu Onlineshop → Themes → Anpassen → scrolle in der linken Seitenleiste nach unten → klicke auf Theme-Einstellungen → scrolle zu Eigenes CSS.

Schritt 3. Füge dieses CSS hinzu und ersetze .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.

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 performancerelevante Abschnitte mit großen Bildern ist es besser, den Abschnitt ganz 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.