Das Wichtigste auf einen Blick

Einige Themes haben einen integrierten Schalter „Auf Desktop ausblenden“ oder Sichtbarkeits-Optionen pro Abschnitt im Theme Editor.

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

Der CSS-Ansatz wird in den Theme-Einstellungen → Benutzerdefiniertes CSS im Theme Editor hinterlegt.

Mit Fudge kannst du jedem Abschnitt ohne Code echte Sichtbarkeits-Steuerungen für Desktop hinzufügen.

Das gegenteilige Problem zum mobilen Durcheinander: Manchmal ist ein Abschnitt rein für Mobilgeräte konzipiert – ein Sticky-Promo-Banner, eine vereinfachte Navigation, ein Call-to-Action-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 Sie display: none verwenden, ist der HTML-Code weiterhin auf der Seite vorhanden und der Browser parst ihn trotzdem. Bilder in ausgeblendeten Abschnitten werden möglicherweise trotzdem heruntergeladen, was Bandbreite verschwendet und die Page Speed Scores verschlechtern kann.

Für Abschnitte mit vielen Bildern, die nur für Desktop gedacht sind, ist der sauberste Ansatz das bedingte Server-Side Rendering – was entweder ein Entwickler oder Fudge implementieren kann. Dadurch wird der Abschnitt auf dem Zielgerät vollständig aus dem HTML entfernt, anstatt ihn nur optisch auszublenden.

Für reine Text-Abschnitte oder leichtgewichtige Sektionen ist display: none absolut akzeptabel.