Sektion auf Desktop in Shopify ausblenden (2026)

Das Wichtigste in Kürze

Einige Themes haben im Theme-Editor einen integrierten „Auf dem Desktop ausblenden“-Schalter oder eine entsprechende Sichtbarkeits-Einstellung 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 → Benutzerdefiniertes CSS.

Fudge kann jedem Abschnitt ganz ohne Code korrekte Desktop-Sichtbarkeitssteuerungen hinzufügen.

Das genaue Gegenteil von mobiler Überladung: Manchmal ist ein Abschnitt rein für mobile Geräte gedacht – eine Sticky-Promo-Bar, eine simplifizierte 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 5,0-Bewertung 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 die zuverlässige Alternative für jedes Theme.

Schritt 1. Finde die CSS-Klasse des Abschnitts. Klicke mit der rechten Maustaste auf den Abschnitt in deinem Live-Shop → Untersuchen (Inspect) → suche nach der Klasse im äußersten <div>. Es sieht meistens aus wie .shopify-section mit einer zusätzlichen benutzerdefinierten Klasse oder einer abschnittsspezifischen ID.

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

Schritt 3. Füge dieses CSS hinzu und ersetze die Beispiel-Klasse durch deine tatsächliche Abschnittsklasse:

@media (min-width: 768px) {
  .deine-abschnitts-klasse {
    display: none;
  }
}

Schritt 4. Speichern.

Dies blendet den Abschnitt auf Bildschirmen ab 768px Breite aus – also alles von Tablets bis zu großen Monitoren. Passe den Breakpoint an, wenn nötig. Einige Themes nutzen 1024px als Desktop-Grenzwert.

Verwandt: Make Shopify Sections Mobile-Only.

Den richtigen Breakpoint wählen

Die meisten Shopify-Themes betrachten 768px als Beginn von Tablet/Desktop. Wenn der Abschnitt nur auf dem Desktop ausgeblendet werden soll (aber auf dem Tablet sichtbar bleiben soll):

@media (min-width: 1024px) {
  .deine-abschnitts-klasse {
    display: none;
  }
}

Prüfe das Stylesheet deines Themes, um zu bestätigen, welchen Breakpoint es für den Layout-Wechsel verwendet. Dawn nutzt 990px als 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

Beeinflussen ausgeblendete Abschnitte weiterhin meine Shopify-SEO?

Abschnitte, die per display: none ausgeblendet sind, bleiben im HTML der Seite und werden weiterhin von Google gesehen. Wenn der versteckte Abschnitt Keyword-Inhalte enthält, indexiert Google diese möglicherweise (mit geringerer Gewichtung, da sie nicht sichtbar sind). Für reine Mobile/Desktop-UX-Anpassungen ist das völlig in Ordnung; bei Inhalten, die du wirklich nicht indexiert haben möchtest, solltest du sie lieber bedingt in Liquid rendern (Conditional Rendering), anstatt sie über CSS auszublenden.

Sollte ich `display: none` verwenden oder den Abschnitt auf dem Desktop komplett entfernen?

Das kommt auf die Lade-Belastung an. Bei Text- und CSS-gerenderten Abschnitten ist display: none völlig in Ordnung — minimaler Performance-Einfluss. Bei bildlastigen oder Video-Abschnitten solltest du sie basierend auf dem Viewport bedingt in Liquid rendern oder Shopifys responsive Bild-Attribute nutzen — bei display: none werden die Assets nämlich trotzdem geladen. Serverseitiges bedingtes Rendering ist bei ressourcenintensiven Inhalten die sauberere Lösung.

Kann ich Abschnitte basierend auf dem Login-Status des Kunden bedingt ausblenden?

Ja, über Liquid. Beschreibe Fudge einfach, was du einschränken möchtest ("zeige diesen B2B-Preisblock nur eingeloggten Kunden"), und es verpackt den Abschnitt in eine {% if customer %}- oder Tag-basierte Bedingung, die serverseitig gerendert wird — Käufer, die die Bedingung nicht erfüllen, sehen das HTML gar nicht erst. Ideal für Wholesale-Blöcke, Account-Only-Banner oder VIP-Inhalte.

Warum blitzt mein ausgeblendeter Abschnitt beim ersten Laden der Seite kurz auf?

Das nennt man Flash of Unstyled Content (FOUC). Der Browser rendert das HTML, bevor er das CSS anwendet. Dadurch erscheint der Abschnitt für einen Bruchteil einer Sekunde, bevor das display: none greift. Beheben kannst du das, indem du das nötige CSS als Inline-CSS in den <head> packst (die meisten modernen Themes tun dies ohnehin), oder indem du serverseitiges, bedingtes Rendering in Liquid nutzt.

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

Gängige Breakpoints sind: 768px (Tablet+), 1024px (Desktop+), 1280px (Large Desktop). Passe dich an die vorhandenen Breakpoints deines Themes an — wenn dein Theme bei 990px umschaltet und du stattdessen 768px verwendest, entsteht ein unsauberer Zwischenbereich. Untersuche das Stylesheet des Themes nach Media-Queries, um die richtigen Werte herauszufinden.