Wie man einen Abschnitt in Shopify auf dem Desktop ausblendet (2026)

Die wichtigsten Erkenntnisse

• Einige Themes haben einen integrierten “Auf Desktop verbergen”-Schalter oder einen Sichtbarkeits-Umschalter pro Abschnitt im Theme-Editor.
• Wenn dein Theme das nicht anbietet, kannst du eine CSS-Media-Query verwenden, die auf Desktop-Breiten abzielt.
• Der CSS-Ansatz kommt in die Theme-Einstellungen → Eigenes CSS (Custom CSS) im Theme-Editor.
• Fudge kann ordentliche Sichtbarkeits-Steuerungen für den Desktop zu jedem Abschnitt hinzufügen, ganz ohne Code.

Um einen Abschnitt in Shopify auf dem Desktop zu verbergen, prüfe die Einstellungen des Abschnitts auf eine Sichtbarkeitsoption. Wenn es keine gibt, füge @media (min-width: 990px) { .your-section { display: none; } } unter Theme-Einstellungen > Eigenes CSS hinzu (990px ist der Desktop-Breakpoint von Dawn).

Das ist nützlich für Abschnitte, die für Smartphones gedacht sind, wie eine Sticky Promo-Leiste, eine vereinfachte Navigation oder einen Tap-to-Call-Button.

Warum du uns vertrauen kannst

Wir haben Hunderte von Shopify-Storefronts aufgebaut und angepasst. Wir entwickeln auch Fudge, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store.

Methode 1 — Den Theme-Editor auf Sichtbarkeits-Einstellungen prüfen

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

Schritt 1. Gehe zu Onlineshop → Themes → Anpassen.

Schritt 2. Klicke auf den Abschnitt, den du auf dem Desktop verbergen möchtest.

Schritt 3. Suche im Einstellungsfeld des Abschnitts nach einer “Sichtbarkeit”-Einstellung oder einer “Auf Desktop verbergen”-Checkbox.

Schritt 4. Wenn sie vorhanden ist, aktiviere sie und speichere.

Wenn du diese Option nicht siehst, unterstützt dein Theme dies nicht von Haus aus. Gehe weiter zu Methode 2.

Um stattdessen einen Abschnitt auf dem Handy zu verbergen, schau dir an, wie man Inhalte in Shopify auf dem Handy verbirgt.

Wo finde ich die Sichtbarkeits-Einstellungen in Shopify?

Sichtbarkeits-Einstellungen befinden sich innerhalb der individuellen Abschnittseinstellungen — nicht in einem globalen Menü.

Klicke in der linken Seitenleiste des Theme-Editors auf einen Abschnitt → scrolle durch die Einstellungen des Abschnitts → suche ganz unten nach Optionen für Sichtbarkeit oder Geräte. Es gibt keinen einzigen, zentralen “Sichtbarkeits”-Bildschirm im Theme-Editor; das wird pro Abschnitt geregelt.

Methode 2 — Auf dem Desktop mit einer CSS Media Query ausblenden

Dies ist die zuverlässige Fallback-Lösung für jedes Theme.

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

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

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

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

Schritt 4. Speichern.

Dies verbirgt den Abschnitt auf Bildschirmen ab 990px Breite, wo Dawn zu seinem Desktop-Layout wechselt. Passe den Breakpoint an, damit er zu deinem Theme passt.

Den richtigen Breakpoint wählen

Passe dich den eigenen Breakpoints deines Themes an. Dawn und seine Schwester-Themes (Sense, Refresh, Craft) verwenden 750px für Mobile und 990px für Desktop. Um den Abschnitt sowohl auf Tablets als auch auf dem Desktop zu verbergen, lass die Regel bei 750px beginnen:

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

Überprüfe das Stylesheet deines Themes, um zu bestätigen, welche Breakpoints es für seinen Layout-Wechsel verwendet.

Einen Sichtbarkeits-Umschalter für den Desktop mit Fudge hinzufügen

Fudge, der KI-Operator für Shopify-Stores, kann das Schema deines Abschnitts mit seinem Store-Editor anpassen, um einen ordentlichen “Auf Desktop verbergen”-Schalter einzufügen, der im Theme-Editor angezeigt wird.

Beschreibe, was du willst:

“Füge eine Option zum Verbergen auf dem Desktop zur mobilen Promo-Leiste auf meiner Startseite hinzu.”

Fudge fügt dem Abschnitts-Schema eine Einstellung hinzu und erstellt die CSS-Klasse, die damit umgeschaltet wird. Sobald du den Entwurf freigibst, befindet sich der Umschalter in deinem Theme-Editor — in Zukunft sind keine Code-Änderungen mehr nötig. Da er Teil deines Themes ist, bleibt er erhalten, selbst wenn du Fudge deinstallierst.

Beeinflusst mit CSS ausgeblendeter Content die Shopify-Geschwindigkeit?

Ja, ein bisschen. Wenn du display: none verwendest, ist das HTML immer noch auf der Seite vorhanden und der Browser parst es weiterhin. Bilder in versteckten Abschnitten werden möglicherweise trotzdem heruntergeladen, was Bandbreite verschwendet und den Page-Speed-Scores schaden kann.

Stelle bei bildlastigen Abschnitten, die auf dem Desktop ausgeblendet sind, sicher, dass die Bilder loading="lazy" verwenden; Browser überspringen Lazy-Bilder innerhalb versteckter Elemente.

Liquid kann einen Abschnitt nicht nur für ein bestimmtes Gerät weglassen. Es wird auf den Servern von Shopify gerendert und kann die Bildschirmgröße des Käufers nicht sehen, daher erfolgt das Ausblenden je nach Gerät immer im CSS.

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

FAQ