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 Ihr Theme keine Sichtbarkeitsschalter enthält, ist CSS die zuverlässige Alternative. Sie fügen der Sektion eine Klasse hinzu und verwenden eine Media Query, um sie auf dem Desktop auszublenden.

Schritt 1 – Identifizieren Sie die Klasse der Sektion. Rechtsklick auf die Sektion im Browser → Untersuchen → suchen Sie das äußerste <div> der Sektion und notieren Sie sich die Klasse (z. B. section-announcement-bar).

Schritt 2 – CSS zu Ihrem Theme hinzufügen. Gehen Sie zu Onlineshop → Themes → Aktionen → Code bearbeiten → öffnen Sie assets/base.css (oder die Haupt-CSS-Datei Ihres Themes).

Schritt 3 – Fügen Sie diese Regel hinzu:

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

Dies blendet die Sektion auf Bildschirmen ab 768px Breite (Desktop) aus, während sie auf Mobilgeräten angezeigt wird.

Alternative – eine benutzerdefinierte Klasse hinzufügen. Wenn die vorhandene Klasse zu allgemein ist, fügen Sie Ihre eigene Klasse in der Liquid-Datei der Sektion hinzu:

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

Zielen Sie dann in Ihrem CSS auf .mobile-only-section ab.

Wichtig: Arbeiten Sie immer an einem Duplikat Ihres Themes. Gehen Sie zu Themes → das Drei-Punkte-Menü neben Ihrem Theme → Duplizieren, und nehmen Sie 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