So machen Sie Shopify-Buttons benutzerfreundlicher für Mobilgeräte (2026)

Wichtige Erkenntnisse

• Die empfohlene Mindestgröße für Touch-Ziele beträgt 44x44px (Apple) oder 48x48dp (Google Material Design).
• Überprüfe deine Button-Höhe im Theme-Editor – bei den meisten Themes kannst du die Button-Größe in den Einstellungen anpassen.
• Wenn die Buttons immer noch zu klein sind, lassen sie sich mit CSS-Padding-Anpassungen beheben, ohne dass du den HTML-Code anfassen musst.
• Sticky Add-to-Cart-Buttons auf Produktseiten verbessern die mobile Conversion-Rate drastisch.

Kleine Buttons auf dem Handy sind ein absoluter Conversion-Killer. Wenn Käufer beim Tippen verfehlen und nichts passiert – oder schlimmer noch, das falsche Element erwischen –, sind sie frustriert und brechen ab. Mobile Shopper nutzen oft nur einen Daumen, bedienen das Smartphone einhändig und sind nicht selten dabei in Bewegung. Deine Buttons müssen gewisse Ungenauigkeiten verzeihen.

Dieser Guide zeigt dir, wie Shopify-Buttons auf dem Smartphone besser funktionieren – von schnellen Anpassungen im Theme-Editor bis hin zu Sticky-ATC-Implementierungen (“Add to Cart”).

Wie passt man Buttons in Shopify an?

Buttons können an zwei Stellen angepasst werden:

1. Theme Editor — steuert Button-Farbe, Abrundungen (Border Radius) und manchmal die Größe.
2. CSS — steuert exakte Maße, Padding und Abstände.

Beginnen Sie im Theme Editor, bevor Sie direkt in das CSS eingreifen.

Verwandt: Hide Content on Mobile in Shopify.

Verwandt: Add a Button in Shopify.

Schritt 1 — Überprüfen der aktuellen Buttongrößen

Bevor du etwas änderst, solltest du deine Buttons auf dem Smartphone ausmessen.

Methode A — Chrome DevTools. Rechtsklick auf deinen „In den Warenkorb“-Button → Untersuchen → schau dir die berechnete Größe im Styles-Panel an. Die Höhe sollte mindestens 44px betragen.

Methode B — PageSpeed Insights. Lass deine Produktseite durch PageSpeed Insights laufen. Suche unter „Empfehlungen“ nach „Tippziele haben keine angemessene Größe“ – dort werden alle Buttons markiert, die zu klein sind.

Das Minimum von 44x44px stammt aus Apples Human Interface Guidelines. Google empfiehlt 48x48dp. Dein Ziel sollten mindestens 44px Höhe bei allen interaktiven Elementen sein.

Passend dazu: Mobile Menü-Verhalten in Shopify ändern.

Passend dazu: Padding und Margin in Shopify ändern.

Passend dazu: Einen Button in Shopify hinzufügen.

Schritt 2 — Button-Größe im Theme Editor anpassen

Öffne den Theme-Editor. Gehe zu Onlineshop → Themes → Anpassen.

Suche nach den Button-Einstellungen. Klicke auf einen Abschnitt mit einem Button oder schaue in die globalen Theme-Einstellungen. Häufige Orte:

• Theme-Einstellungen → Buttons
• Theme-Einstellungen → Typografie (die Schriftgröße des Buttons beeinflusst die Button-Höhe)

Wenn du die Schriftgröße des Buttons erhöhst, wird normalerweise auch die Button-Höhe proportional vergrößert. Einige Themes haben auch explizite Schieberegler für die Button-Größe (Button size) oder das Button-Padding.

Schritt 3 — Button-Padding mit CSS erhöhen

Wenn der Theme-Editor nicht genug Kontrolle bietet, ist CSS die präziseste Lösung.

Gehe zu Onlineshop → Themes → Aktionen → Code bearbeiten → assets/base.css. Füge ganz unten Folgendes hinzu:

@media (max-width: 767px) {
    .btn,
    .button,
    [type='submit'] {
        min-height: 48px;
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

Hinweis: Die genauen Klassennamen variieren je nach Theme. Nutze die Inspect-Funktion deines Browsers (Untersuchen), um die Button-Klassen deines Themes zu finden. Zu den häufigsten gehören .btn, .button, .shopify-payment-button, .product-form__submit.

Schritt 4 — Abstände zwischen Buttons vergrößern

Buttons, die zu nah beieinander liegen, führen zu versehentlichen Klicks. Das passiert oft auf Produktseiten, wo “In den Warenkorb” und “Jetzt kaufen” direkt nebeneinander platziert sind.

Füge einen Mindestabstand zwischen den Buttons hinzu:

@media (max-width: 767px) {
    .product-form__buttons .btn + .btn {
        margin-top: 12px;
    }
}

Oder ordne sie auf Mobilgeräten vertikal an (stapeln), wenn sie derzeit nebeneinander liegen.

Schritt 5 — Sticky-Button für den Warenkorb hinzufügen

Die effektivste Verbesserung für mobile Produktseiten ist ein Sticky Add-to-Cart Bar, die beim Scrollen sichtbar bleibt.

Warum das funktioniert: Auf Mobilgeräten sind Produktseiten lang – Kunden scrollen am Button vorbei, um Beschreibungen, Bewertungen und FAQs zu lesen. Wenn sie kaufbereit sind, müssen sie den ganzen Weg zurück nach oben scrollen. Ein Sticky ATC eliminiert diese Hürde komplett.

Einige Shopify-Themes enthalten dies bereits nativ. Prüfe deine Theme-Einstellungen unter dem Produkt-Template auf eine Option wie „Sticky add to cart“.

Wenn dein Theme das nicht hat, beschreibe es einfach Fudge:

„Füge meinen Produktseiten eine Sticky Add-to-Cart Bar hinzu, die erscheint, sobald der Haupt-Button auf dem Handy aus dem Sichtfeld scrollt.“

Passend dazu: Inhalte auf Mobilgeräten in Shopify ausblenden.

Weitere Verbesserungen der Benutzerfreundlichkeit

Wischbare Bildergalerien. Kunden erwarten auf Mobilgeräten, durch Produktbilder wischen (Swipen) zu können. Wenn Ihr Theme stattdessen Pfeiltasten nutzt, verschlechtert das die User Experience. Prüfen Sie die Einstellungen auf “Swipe aktivieren” oder Ähnliches.

Große Mengenauswähler. Plus/Minus-Buttons für die Menge sind oft winzig. Auch dies sind interaktive Elemente, die das 44px-Minimum erfüllen sollten.

Variant Swatches. Farb- und Größen-Swatches auf Produktseiten sollten groß genug sein, um sie präzise zu treffen. Kleine Swatches mit engen Abständen sind ein häufiges Problem auf dem Handy.

Vermeiden Sie Interaktionen, die auf Hover basieren. Alles, was ein darüberfahren mit der Maus (Hover) erfordert, um Inhalte anzuzeigen (wie ein verstecktes zweites Bild bei Produktkarten), funktioniert mobil nicht. Stellen Sie sicher, dass wichtige Inhalte immer ohne Interaktion sichtbar sind.

Testen der Tap-Ziele

Nutze Googles Mobile-Friendly Test (search.google.com/test/mobile-friendly), um Klickbereiche schnell prüfen zu lassen. Für mehr Details kannst du die Chrome DevTools im mobilen Emulationsmodus verwenden – durch Aktivieren des Touch-Overlays lässt sich die Fingergröße simulieren.

Die wichtigsten zu prüfenden Seiten: Produktseiten, Warenkorb und alle Kampagnen-Landingpages.

FAQ