So erstellen Sie Mobile-Only-Sektionen in Shopify (2026)

Key Takeaways

• Einige Shopify-Themes haben in den Section-Einstellungen Schalter wie „Nur auf Mobilgeräten anzeigen“ — sieh dort am besten zuerst nach.
• Wenn dein Theme das nicht unterstützt, erreichst du mit CSS display: none an Desktop-Breakpoints genau das gleiche Ergebnis.
• Mobile-only Sections sind extrem nützlich für vereinfachte Navigation, Tap-to-Call Banner und Hinweise zum App-Download.
• Fudge kann jeder Section Sichtbarkeits-Einstellungen hinzufügen, ohne dass du auch nur eine Zeile CSS schreiben musst.

Manchmal gehört eine Section einfach aufs Smartphone, würde aber auf dem Desktop deplatziert wirken — oder zu viel Platz wegnehmen. Eine Tap-to-Call-Telefonnummernleiste, eine simplifizierte Sticky-Navigation oder ein mobilspezifisches Promo-Banner sind gute Beispiele dafür.

Dieser Guide zeigt dir, wie du das in Shopify umsetzt.

Warum Mobile-Only-Sektionen sinnvoll sind

Besucher auf Mobilgeräten und Desktops haben unterschiedliche Bedürfnisse. Desktop-Nutzer navigieren mit einem Cursor, haben einen großen Bildschirm und sind beim Surfen oft geduldiger. Mobile Nutzer sind häufig unterwegs, tippen mit dem Daumen und möchten schnelleren Zugriff auf wichtige Aktionen.

Ein speziell für Mobilgeräte konzipierter Abschnitt – wie ein großer „Anrufen“-Button oder ein vereinfachtes Kategorienmenü – würde auf dem Desktop unnötig wirken, da dort bereits elegantere Lösungen existieren.

Passend dazu: Homepage-Abschnitte in Shopify hinzufügen.

Passend dazu: Mobiles Layout in Shopify neu anordnen.

Methode 1 – Überprüfen Sie die Sichtbarkeitseinstellungen Ihres Themes

Der schnellste Weg führt über Ihren Theme-Editor.

Schritt 1 – Öffnen Sie den Theme-Editor. Gehen Sie zu Onlineshop → Themes → Anpassen.

Schritt 2 – Wählen Sie die Sektion aus. Klicken Sie in der linken Seitenleiste oder direkt im Canvas auf die Sektion, die Sie steuern möchten.

Schritt 3 – Suchen Sie nach Sichtbarkeitseinstellungen. Scrollen Sie im rechten Einstellungsbereich nach unten. Einige Themes (insbesondere Premium-Themes, die auf Dawn basieren) enthalten Schalter wie:

• „Auf Mobilgeräten anzeigen“
• „Auf Desktop anzeigen“
• „Auf Desktop ausblenden“

Wenn Ihr Theme diese hat, aktivieren Sie sie und Sie sind fertig. Wechseln Sie zur mobilen Vorschau (Handy-Icon oben), um das Ergebnis zu prüfen.

Verwandt: Hide a Section on Desktop in Shopify.

Methode 2 – CSS-Ansatz (funktioniert mit jedem Theme)

Wenn dein Theme keine Optionen zum Ausblenden von Elementen bietet, ist CSS dein zuverlässiger Fallback. Du fügst der Section einfach eine Klasse hinzu und nutzt eine Media Query, um sie auf dem Desktop auszublenden.

Schritt 1 – Finde die Klasse der Section heraus. Rechtsklick auf den Abschnitt in deinem Browser → Untersuchen (Element untersuchen) → finde das äußerste <div> der Section und notiere dir die Klasse (z. B. section-announcement-bar).

Schritt 2 – Füge das CSS zu deinem Theme hinzu. Gehe auf Onlineshop → Themes → Aktionen → Code bearbeiten → öffne assets/base.css (oder die Haupt-CSS-Datei deines Themes).

Schritt 3 – Füge diese Regel hinzu:

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

Das versteckt die Section auf Bildschirmen ab einer Breite von 768px (Desktop), während sie auf Mobile weiterhin angezeigt wird.

Alternative – füge eine eigene Klasse hinzu. Wenn die vorhandene Klasse zu allgemein ist, füge der Liquid-Datei der Section eine eigene Klasse hinzu:

<div class="mobile-only-section">
    <!-- section content -->
</div>

Anschließend sprichst du .mobile-only-section in deinem CSS an.

Wichtig: Arbeite immer an einem duplizierten Theme. Gehe auf Themes → das Drei-Punkte-Menü neben deinem Theme → Duplizieren und nimm die Änderungen dann an der Kopie vor.

Methode 3 – Fudge zum Hinzufügen von Sichtbarkeitssteuerungen

Wenn Sie eine saubere Lösung wünschen, bei der die Sichtbarkeit über den Theme-Editor gesteuert wird (ohne manuell nach Klassennamen zu suchen), kann Fudge dies für Sie bauen.

Beschreiben Sie Fudge, was Sie benötigen:

„Füge eine Mobile-Only-Ankündigungsleiste oben hinzu, die einen Tap-to-Call-Button zeigt. Blende sie auf dem Desktop komplett aus.“

Fudge generiert die Sektion mit integrierter responsiver Logik. Sie überprüfen den Entwurf, bevor etwas live geht.

Praktische Anwendungsfälle für Mobile-Only-Sektionen

Tap-to-Call-Leiste. Eine fixierte Leiste am unteren Bildschirmrand mit einem großen Button für die Telefonnummer. Auf dem Desktop erledigt das bereits Ihre Header-Navigation – aber auf dem Handy macht ein prominenter Tap-to-Call-Button für lokale Unternehmen einen echten Unterschied.

Vereinfachte Sticky-Navigation. Eine minimale „Home / Shop / Warenkorb“-Navigation für mobile Nutzer, die schnellen Zugriff wollen, ohne ganz nach oben scrollen zu müssen.

App-Download-Banner. Ein Banner, das Ihre mobile App bewirbt und nur mobilen Besuchern angezeigt wird. Dies auf dem Desktop anzuzeigen, wo es irrelevant ist, erzeugt nur unnötiges Rauschen.

Mobilspezifische Angebote. Eine Werbebotschaft wie „Bestelle über die App und spare 10 %“, die nur für mobile Besucher Sinn ergibt.

Was ist mit dem Ausblenden von Desktop-Content auf Mobilgeräten?

Der gleiche Ansatz funktioniert auch umgekehrt – verwenden Sie @media (max-width: 767px), um Abschnitte auf Mobilgeräten auszublenden, während sie auf dem Desktop sichtbar bleiben. Weitere Details dazu finden Sie in unserer Anleitung zum Ausblenden von Inhalten auf Mobilgeräten in Shopify.

Passend dazu: Abschnitt auf dem Desktop in Shopify ausblenden.

Beeinflusst das Ausblenden einer Sektion per CSS das SEO?

Per CSS ausgeblendeter Content befindet sich weiterhin im HTML und wird von Suchmaschinen gecrawlt. Er wird nicht als böswillig versteckter Content behandelt – Suchmaschinen verstehen Responsive-Design-Muster. Vermeide es jedoch, diese Technik zu nutzen, um Keywords in versteckte Bereiche zu stopfen, da das ein Alarmsignal wäre.

Für Sections, die rein visuellen oder UX-Zwecken dienen (wie ein Tap-to-Call-Button), ist CSS Visibility völlig in Ordnung.

FAQ