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

Wichtige Erkenntnisse

• Einige Shopify-Themes enthalten in den Sektion-Einstellungen Schalter für „Nur auf Mobilgeräten anzeigen“ – suchen Sie zuerst dort.
• Wenn Ihr Theme dies nicht bietet, erzielt CSS display: none bei Desktop-Breakpoints das gleiche Ergebnis.
• Mobile-Only-Sektionen sind nützlich für vereinfachte Navigation, Tap-to-Call-Banner und App-Download-Aufforderungen.
• Fudge kann Sichtbarkeitssteuerungen zu jeder Sektion hinzufügen, ohne dass Sie CSS schreiben müssen.

Manchmal gehört eine Sektion auf das Handy, würde aber auf dem Desktop deplatziert wirken – oder zu viel Platz einnehmen. Eine Tap-to-Call-Leiste mit Telefonnummer, eine vereinfachte Sticky-Navigation oder ein mobilspezifisches Promo-Banner sind gute Beispiele.

Dieser Guide zeigt Ihnen, wie Sie das in Shopify umsetzen.

Warum Mobile-Only-Sektionen sinnvoll sind

Mobile und Desktop-Besucher haben unterschiedliche Bedürfnisse. Desktop-Nutzer navigieren mit einem Cursor, haben einen großen Bildschirm und surfen oft mit mehr Geduld. Mobile Nutzer sind oft unterwegs, tippen mit dem Daumen und wollen schnelleren Zugriff auf wichtige Aktionen.

Eine Sektion, die speziell für Mobilgeräte entworfen wurde – wie ein großer „Rufen Sie uns an“-Button oder ein vereinfachtes Kategorienmenü – sähe auf dem Desktop unnötig aus, da dort bereits elegantere Lösungen existieren.

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.

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 umgekehrt – verwenden Sie @media (max-width: 767px), um Sektionen auf dem Handy auszublenden, sie aber auf dem Desktop beizubehalten. In unserem Guide zum Ausblenden von Inhalten auf Mobilgeräten in Shopify finden Sie weitere Details dazu.

Beeinflusst das Ausblenden einer Sektion per CSS das SEO?

Per CSS ausgeblendete Inhalte befinden sich weiterhin im HTML und werden von Suchmaschinen gecrawlt. Es wird nicht als bösartiger versteckter Inhalt gewertet – Suchmaschinen verstehen responsive Design-Muster. Vermeiden Sie es jedoch, mit dieser Technik Keywords in versteckte Sektionen zu stopfen, da dies ein Warnsignal wäre.

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