Wie man Shopify-Abschnitte "Mobile-only" macht (2026)

Die wichtigsten Punkte

• Einige Shopify-Themes enthalten “Nur auf Mobile anzeigen”-Schalter in den Abschnittseinstellungen — schau dort zuerst nach.
• Wenn dein Theme das nicht hat, erreichst du mit CSS display: none an Desktop-Breakpoints dasselbe Ergebnis.
• Nur-Mobile-Abschnitte (Mobile-only) sind nützlich für eine vereinfachte Navigation, Tap-to-Call-Banner und Aufforderungen zum App-Download.
• Fudge kann Sichtbarkeitssteuerungen zu jedem Abschnitt hinzufügen, ohne dass du CSS schreiben musst.

Um einen Shopify-Abschnitt nur für Mobile sichtbar zu machen, aktiviere die Einstellung “Auf Desktop ausblenden”, falls dein Theme eine hat, oder füge @media (min-width: 750px) { .your-section { display: none; } } zum CSS deines Themes hinzu.

Eine Leiste mit einer Telefonnummer zum Antippen (Tap-to-Call), eine vereinfachte Sticky-Navigation oder ein mobilspezifisches Promo-Banner sind gute Beispiele.

Warum Mobile-only-Abschnitte Sinn machen

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

Ein speziell für Mobile entworfener Abschnitt – wie ein großer “Ruf uns an”-Button oder ein vereinfachtes Kategorie-Menü – würde auf dem Desktop überflüssig wirken, wo es bereits elegantere Lösungen gibt.

Wenn du stattdessen die Reihenfolge der Abschnitte auf Smartphones ändern möchtest, sieh dir an, wie du dein Mobile-Layout in Shopify neu anordnest.

Methode 1 — Überprüfe die Sichtbarkeitseinstellungen deines Themes

Der schnellste Weg beginnt im Theme Editor.

Schritt 1 — Öffne den Theme Editor. Gehe zu Onlineshop → Themes → Anpassen.

Schritt 2 — Wähle den Abschnitt aus. Klicke in der linken Seitenleiste oder direkt auf der Vorschau auf den Abschnitt, den du steuern möchtest.

Schritt 3 — Suche nach Sichtbarkeitseinstellungen. Scrolle im rechten Einstellungsbereich nach unten. Einige Themes (besonders Premium-Themes, die auf Dawn basieren) enthalten Schalter wie:

• “Auf Mobile anzeigen”
• “Auf Desktop anzeigen”
• “Auf Desktop ausblenden”

Wenn dein Theme diese hat, schalte sie um und du bist fertig. Wechsle zur mobilen Vorschau (Handy-Symbol oben), um das Ergebnis zu überprüfen.

Methode 2 — Der CSS-Ansatz (funktioniert mit jedem Theme)

Wenn dein Theme keine Schalter für die Sichtbarkeit enthält, ist CSS die zuverlässigste Alternative. Du fügst dem Abschnitt eine Klasse hinzu und nutzt eine Media Query, um ihn auf dem Desktop auszublenden.

Schritt 1 — Dupliziere dein Theme. Gehe zu Onlineshop → Themes, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Duplizieren. Nimm die Änderungen an der Kopie vor.

Schritt 2 — Finde die Klasse des Abschnitts heraus. Mache einen Rechtsklick auf den Abschnitt in deinem Browser → Untersuchen (Inspect Element) → finde das äußerste <div> des Abschnitts und notiere dir dessen Klasse (z. B. section-announcement-bar).

Schritt 3 — Füge CSS zu deinem Theme hinzu. Klicke bei dem Duplikat auf das Drei-Punkte-Menü (…), dann auf Code bearbeiten und öffne assets/base.css (oder die Haupt-CSS-Datei deines Themes).

Schritt 4 — Füge diese Regel hinzu:

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

Das blendet den Abschnitt auf Bildschirmen ab 750px Breite aus (Tablets und Desktops), während er auf Mobile angezeigt wird. Dawn und seine Schwester-Themes (Sense, Refresh, Craft) nutzen 750px für Mobile und 990px für Desktop.

Alternative — Füge eine eigene Klasse hinzu. Wenn die bestehende Klasse zu allgemein ist, füge deine eigene Klasse in der Liquid-Datei des Abschnitts hinzu:

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

Sprich dann .mobile-only-section in deinem CSS an.

Methode 3 — Fudge zum Hinzufügen von Sichtbarkeitssteuerungen

Wenn du eine saubere Lösung suchst, bei der die Sichtbarkeit über den Theme-Editor gesteuert wird (ohne manuell nach Klassennamen suchen zu müssen), kann Fudge, der KI-Operator für Shopify-Stores, das mit seinem Store-Editor für dich bauen.

Beschreibe einfach, was du brauchst:

“Füge oben eine nur für Mobile sichtbare Ankündigungsleiste mit einem Tap-to-Call-Button hinzu. Blende sie auf dem Desktop komplett aus.”

Fudge generiert den Abschnitt direkt mit der passenden Responsive-Logik. Du überprüfst den Entwurf, bevor etwas live geht, und wenn die Leiste ihren Platz doch nicht wert ist, kannst du sie mit einem Klick rückgängig machen.

Praktische Anwendungsfälle für Mobile-only-Abschnitte

Tap-to-Call-Leiste. Eine Sticky-Leiste am unteren Bildschirmrand mit einem großen Telefonnummern-Button. Auf dem Desktop erledigt das bereits deine Header-Navigation — aber auf dem Handy macht ein prominentes Tap-to-Call für lokale Unternehmen einen echten Unterschied.

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

App-Download-Banner. Ein Banner, das deine mobile App bewirbt und nur für mobile Besucher erscheint. Das auf dem Desktop anzuzeigen, wo es irrelevant ist, sorgt nur für Unruhe.

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

Was ist mit dem Ausblenden von Desktop-only-Inhalten auf Mobile?

Der gleiche Ansatz funktioniert auch umgekehrt: Nutze @media (max-width: 749px), um Abschnitte auf Mobile auszublenden, sie aber auf dem Desktop zu behalten. Sieh dir unseren Guide zum Thema Inhalte auf Mobile in Shopify ausblenden an, um mehr Details dazu zu erfahren.

FAQ