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 auf Basis von Online Store 2.0) enthalten Sichtbarkeits-Optionen pro Abschnitt direkt im Theme Editor.
Schritt 1. Gehe zu Online-Shop → Themes → Anpassen.
Schritt 2. Klicke auf den Abschnitt, den du auf dem Desktop ausblenden möchtest.
Schritt 3. Suche im Einstellungs-Panel des Abschnitts nach einer Einstellung namens „Sichtbarkeit“ oder einem Kontrollkästchen „Auf Desktop ausblenden“.
Schritt 4. Falls vorhanden, aktiviere die Option und speichere.
Wenn du diese Option nicht siehst, unterstützt dein Theme dies nicht nativ. Fahre mit Methode 2 fort.
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.
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.
Beeinflussen per CSS ausgeblendete Inhalte die Geschwindigkeit von Shopify?
Ja, geringfügig. Wenn du display: none verwendest, ist der HTML-Code weiterhin auf der Seite vorhanden und der Browser verarbeitet ihn trotzdem. Bilder in ausgeblendeten Abschnitten werden unter Umständen dennoch heruntergeladen, was Bandbreite verschwendet und die Page-Speed-Werte verschlechtern kann.
Für Abschnitte mit vielen Bildern, die nur für den Desktop gedacht sind, ist der sauberste Ansatz das bedingte serverseitige Rendering – was entweder ein Entwickler oder Fudge implementieren kann. Dabei wird der Abschnitt auf dem Zielgerät komplett aus dem HTML entfernt, anstatt ihn nur visuell zu verstecken.
Für rein textbasierte oder leichtgewichtige Abschnitte ist display: none absolut akzeptabel.
