Sektion auf Desktop in Shopify ausblenden (2026)

Das Wichtigste in Kürze

Einige Themes haben im Theme Editor einen integrierten Schalter wie “Auf dem Desktop ausblenden” oder Sichtbarkeitseinstellungen pro Abschnitt.

Wenn dein Theme das nicht anbietet, kannst du eine CSS Media Query für Desktop-Breiten verwenden.

Der CSS-Ansatz kommt im Theme Editor in die Theme-Einstellungen → Custom CSS.

Fudge kann jedem Abschnitt ganz ohne Code entsprechende Sichtbarkeitseinstellungen für den Desktop hinzufügen.

Das genaue Gegenteil einer überladenen Mobile-Ansicht: Manchmal ist ein Abschnitt ausschließlich für Mobile gedacht – eine Sticky Promo Bar, eine vereinfachte Navigation, ein Tap-to-Call-Button – und du möchtest ihn auf dem Desktop unsichtbar machen.

Hier erfährst du, wie du einen Abschnitt nur auf dem Desktop ausblendest.

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 Bewertung von 4.9 im Shopify App Store.

Methode 1 – Den Theme Editor auf einen Sichtbarkeits-Schalter prüfen

Einige Shopify-Themes (insbesondere solche, die auf Online Store 2.0 basieren) enthalten Optionen zur Sichtbarkeit pro Abschnitt direkt im Theme Editor.

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

Schritt 2. Klicken Sie auf den Abschnitt, den Sie auf dem Desktop ausblenden möchten.

Schritt 3. Suchen Sie im Einstellungsbereich des Abschnitts nach einer „Sichtbarkeit“-Einstellung oder einem Kontrollkästchen „Auf Desktop ausblenden“.

Schritt 4. Falls vorhanden, aktivieren Sie die Option und speichern Sie.

Wenn Sie diese Option nicht sehen, unterstützt Ihr Theme dies nicht nativ. Fahren Sie mit Methode 2 fort.

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

Wo finde ich den Sichtbarkeits-Bereich in Shopify?

Die Sichtbarkeits-Einstellungen befinden sich in den Einstellungen der einzelnen Abschnitte – nicht in einem globalen Panel.

Klicke auf einen Abschnitt in der linken Seitenleiste des Theme Editors → scrolle durch die Einstellungen des Abschnitts → suche nach Sichtbarkeits- oder Geräteoptionen am Ende der Liste. Es gibt keine zentrale „Sichtbarkeit“-Seite im Theme Editor; es wird pro Abschnitt geregelt.

Methode 2 – Auf Desktop ausblenden mit einer CSS Media Query

Dies ist das zuverlässige Fallback für jedes Theme.

Schritt 1. Finde die CSS-Klasse der Section. Klicke mit der rechten Maustaste auf die Section in deinem Live-Store → Untersuchen → suche nach der Klasse im äußersten <div>. Sie sieht normalerweise aus wie .shopify-section mit einer zusätzlichen Custom-Klasse oder einer Section-spezifischen ID.

Schritt 2. Öffne den Theme-Editor → scrolle im linken Panel nach unten → klicke auf Theme-Einstellungen → finde Custom CSS.

Schritt 3. Füge dieses CSS hinzu und tausche dabei deine tatsächliche Section-Klasse aus:

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

Schritt 4. Speichern.

Dadurch wird die Section auf Bildschirmen ab 768px Breite ausgeblendet – also alles von Tablets bis hin zu großen Monitoren. Passe den Breakpoint bei Bedarf an. Einige Themes verwenden 1024px als Desktop-Grenze.

Den richtigen Breakpoint wählen

Die meisten Shopify-Themes behandeln 768px als den Beginn von Tablet/Desktop. Wenn du die Section nur auf dem Desktop ausblenden möchtest (aber auf dem Tablet weiterhin sichtbar sein soll):

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

Überprüfe das Stylesheet deines Themes, um zu bestätigen, welchen Breakpoint es für den Layout-Wechsel verwendet. Dawn nutzt 990px als seinen Haupt-Breakpoint.

Methode 3 – Fudge nutzen, um Desktop-Sichtbarkeits-Steuerungen hinzuzufügen

Fudge kann das Schema deines Abschnitts so anpassen, dass ein passender Schalter für „Auf Desktop ausblenden“ direkt im Theme Editor erscheint.

Beschreibe einfach, was du möchtest:

„Füge eine Option zum Ausblenden auf dem Desktop für den Mobile-Promo-Banner-Abschnitt auf meiner Homepage hinzu.“

Fudge bearbeitet das Abschnitts-Schema und fügt die Logik für das bedingte Rendering hinzu. Sobald das erledigt ist, findest du den Schalter in deinem Theme Editor – zukünftig sind keine Code-Änderungen mehr nötig.

Sichtbarkeits-Steuerungen für jeden Abschnitt hinzufügen — beschreibe es einfach.

Try Fudge for Free

Beeinflussen per CSS ausgeblendete Inhalte die Geschwindigkeit von Shopify?

Ja, ein wenig. Wenn du display: none verwendest, ist das HTML weiterhin auf der Seite vorhanden und der Browser parst es trotzdem. Bilder in versteckten Abschnitten werden möglicherweise weiterhin heruntergeladen, was Bandbreite verschwendet und die Page-Speed-Werte verschlechtern kann.

Für Abschnitte mit großen Bildern, die nur für den Desktop gedacht sind, ist der sauberste Ansatz bedingtes Server-Side Rendering — was entweder ein Entwickler oder Fudge implementieren kann. Dadurch wird der Abschnitt auf dem Zielgerät komplett aus dem HTML entfernt, anstatt ihn nur visuell auszublenden.

Für reine Text- oder leichtgewichtige Abschnitte ist display: none völlig in Ordnung.

FAQ

Wirken sich ausgeblendete Sections immer noch auf mein Shopify-SEO aus?

Sections, die über display: none ausgeblendet werden, bleiben im HTML der Seite erhalten und werden von Google weiterhin gesehen. Wenn die ausgeblendete Section Keyword-Inhalte enthält, kann Google sie indexieren (mit geringerer Gewichtung, da sie nicht sichtbar ist). Für reines Mobile/Desktop-UX-Hiding ist das in Ordnung; für Inhalte, die du wirklich nicht indexiert haben möchtest, solltest du sie lieber bedingt in Liquid rendern, anstatt sie über CSS auszublenden.

Sollte ich display:none verwenden oder die Section auf dem Desktop komplett entfernen?

Das hängt von der Dateigröße ab. Für Text- und CSS-gerenderte Sections: display: none ist völlig in Ordnung – minimale Kosten. Bildlastige oder Video-Sections: Rendiere sie bedingt in Liquid basierend auf Viewport-Indikatoren oder nutze Shopifys Responsive-Image-Attribute – bei display: none werden die Assets trotzdem geladen. Serverseitiges Conditional Rendering ist bei schweren Inhalten sauberer.

Kann ich Sections basierend auf dem Login-Status von Kunden bedingt ausblenden?

Ja, über Liquid. Beschreibe Fudge einfach, was du einschränken möchtest ("zeige diesen B2B-Preisblock nur eingeloggten B2B-Kunden"), und es packt die Section in eine {% if customer %}- oder Tag-basierte Bedingung, die serverseitig gerendert wird – Shopper, auf die das nicht zutrifft, sehen das HTML nie. Nützlich für Wholesale-Blöcke, Account-Only-Banner oder VIP-Inhalte.

Warum blitzt meine ausgeblendete Section beim ersten Laden kurz auf?

Das ist der sogenannte Flash of Unstyled Content (FOUC). Der Browser rendert das HTML, bevor er das CSS anwendet, sodass die Section für einen kurzen Moment sichtbar ist, bevor display: none greift. Das kannst du beheben, indem du das kritische CSS im <head> inline einfügst (die meisten modernen Themes machen das bereits) oder indem du serverseitiges Conditional Rendering in Liquid verwendest.

Welchen Breakpoint sollte ich für "Desktop" im CSS verwenden?

Gängige Breakpoints: 768px (Tablet+), 1024px (Desktop+), 1280px (Large Desktop). Passe dich den bestehenden Breakpoints deines Themes an – wenn dein Theme bei 990px umschaltet und du 768px verwendest, entsteht ein unschöner Zwischenbereich. Untersuche das Stylesheet deines Themes nach Media Queries, um die richtigen Werte zu finden.