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

Key Takeaways

• Viele Themes haben im Theme-Editor einen integrierten Schalter pro Abschnitt, um diesen auf Mobilgeräten zu verbergen (“Hide on mobile”) – sieh am besten zuerst dort nach.
• Wenn dein Theme diesen Schalter nicht hat, kannst du einen Abschnitt auf Mobilgeräten mit einer CSS Media Query ausblenden.
• Custom CSS kommt in Onlineshop → Themes → Anpassen → Theme-Einstellungen → Benutzerdefiniertes CSS.
• Fudge kann jedem Abschnitt Steuerelemente für die mobile Sichtbarkeit hinzufügen, ohne dass du Code schreiben musst.

Einige Abschnitte sehen auf dem Desktop toll aus, überladen aber die mobile Ansicht. Ein großer Bild-Text-Block, eine Reihe von Auszeichnungen, ein Promo-Banner nur für den 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 entwickelt und angepasst. Wir haben außerdem Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.9 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 dein Theme keinen Schalter für die Sichtbarkeit hat, kannst du eine Section mithilfe einer CSS Media Query ausblenden.

Schritt 1. Finde die Section, die du ausblenden willst. Rechtsklick darauf im Browser → Untersuchen → suche die Klasse oder ID des äußersten Elements. Das sieht dann in etwa so aus wie .shopify-section-template--hero oder eine eigene Section-ID.

Schritt 2. Gehe zu Onlineshop → Themes → Anpassen → scrolle zum Ende der linken Seitenleiste → klicke auf Theme-Einstellungen → scrolle zu Benutzerdefiniertes CSS.

Schritt 3. Füge dieses CSS hinzu und ersetze dabei .your-section-class mit der tatsächlichen Klasse:

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

Schritt 4. Speichern.

Die Section ist nun auf Bildschirmen schmaler als 768px unsichtbar – dem Standard Mobile Breakpoint. Auf Tablets und dem Desktop bleibt sie vollständig sichtbar.

Passend dazu: Ein Shopify-Theme schneller machen.

Passend dazu: Mobile Abstände in Shopify verbessern.

Passend dazu: Eine Section in Shopify auf dem Desktop ausblenden.

Wichtig: Beim Ausblenden mit CSS wird das HTML der Section trotzdem geladen. Die Section existiert im Seitenquelltext – sie wird nur nicht angezeigt. Für performance-kritische Sections mit großen Bildern ist es der bessere Ansatz, die Section komplett zu entfernen (oder eine Theme-Option zu nutzen).

Welche Breakpoints nutzt Shopify?

Shopify-Themes erzwingen keinen einheitlichen Breakpoint-Standard, aber die meisten folgen gemeinsamen Konventionen:

Dawn verwendet 750px als primären Mobile/Tablet-Breakpoint. Schau in das Stylesheet deines Themes, wenn du den genauen Wert brauchst.

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 durch CSS verborgene Inhalte lesen. Für SEO-Zwecke existiert der Inhalt weiterhin.

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

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

FAQ