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

Wichtige Erkenntnisse

• Die empfohlene Mindestgröße für Tap-Ziele beträgt 44x44px (Apple) oder 48x48dp (Google Material Design).
• Überprüfen Sie Ihre Button-Höhe im Theme Editor — die meisten Themes ermöglichen die Anpassung der Buttongröße über die Einstellungen.
• Wenn Buttons immer noch zu klein sind, lassen sich diese über CSS-Padding anpassen, ohne das HTML zu verändern.
• Sticky-Buttons für den Warenkorb auf Produktseiten verbessern die mobilen Conversion-Raten erheblich.

Kleine Buttons auf Mobilgeräten sind ein Conversion-Killer. Wenn Kunden einen Tap verfehlen und nichts passiert — oder schlimmer noch, sie das falsche Element antippen — sind sie frustriert und verlassen den Shop. Mobile Shopper nutzen den Daumen, oft einhändig und oft in Bewegung. Ihre Buttons müssen Fehler verzeihen.

Dieser Guide zeigt Ihnen, wie Sie Shopify-Buttons auf Mobilgeräten optimieren, von schnellen Fixes im Theme Editor bis hin zu Sticky-ATC-Implementierungen.

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.

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

Bevor Sie etwas ändern, messen Sie Ihre Buttons auf dem Handy.

Methode A — Chrome DevTools. Rechtsklick auf Ihren “In den Warenkorb”-Button → Untersuchen → schauen Sie sich die berechnete Größe (Computed) im Styles-Panel an. Die Höhe sollte mindestens 44px betragen.

Methode B — PageSpeed Insights. Lassen Sie Ihre Produktseite durch PageSpeed Insights laufen. Suchen Sie unter “Empfehlungen” nach “Tippziele haben keine angemessene Größe” — hier werden alle Buttons markiert, die zu klein sind.

Das 44x44px Minimum stammt aus den Human Interface Guidelines von Apple. Google empfiehlt 48x48dp. Zielen Sie auf eine Höhe von mindestens 44px bei allen interaktiven Elementen ab.

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

Öffnen Sie den Theme Editor. Gehen Sie zu Onlineshop → Themes → Anpassen.

Suchen Sie nach Button-Einstellungen. Klicken Sie auf einen Abschnitt mit einem Button oder schauen Sie in die allgemeinen Theme-Einstellungen. Häufige Orte:

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

Eine Erhöhung der Schriftgröße vergrößert meist proportional auch die Button-Höhe. Einige Themes bieten auch explizite Schieberegler für “Button-Größe” oder “Button-Padding”.

Schritt 3 — Button-Padding mit CSS erhöhen

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

Gehen Sie zu Onlineshop → Themes → Aktionen → Code bearbeiten → assets/base.css. Fügen Sie 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. Nutzen Sie den Browser-Inspektor, um die Button-Klassen Ihres Themes zu finden. Häufige Klassen sind .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, wenn “In den Warenkorb” und “Jetzt kaufen” direkt nebeneinander stehen.

Fügen Sie Mindestabstände zwischen Buttons hinzu:

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

Oder stellen Sie die Buttons auf Mobilgeräten so um, dass sie vertikal untereinander stehen, falls sie aktuell nebeneinander platziert sind.

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

Die effektivste Verbesserung für mobile Produktseiten ist eine 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üssten sie den ganzen Weg zurück nach oben scrollen. Ein Sticky-ATC eliminiert diese Reibung komplett.

Einige Shopify-Themes enthalten dies bereits nativ. Prüfen Sie Ihre Theme-Einstellungen unter dem Produkt-Template nach einem Schalter für “Sticky Add to Cart”.

Falls Ihr Theme das nicht hat, beschreiben Sie es einfach Fudge:

“Füge meinen Produktseiten einen Sticky-Warenkorb-Button hinzu, der erscheint, sobald der Haupt-ATC-Button auf Mobilgeräten aus dem Sichtfeld scrollt.”

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

Nutzen Sie Googles Test auf Optimierung für Mobilgeräte, um ein schnelles Feedback zu den Tap-Zielen zu erhalten. Für mehr Details nutzen Sie die Chrome DevTools im Mobile-Emulationsmodus — dort können Sie die Fingergröße simulieren, indem Sie das Touch-Overlay aktivieren.

Die wichtigsten Seiten für ein Audit sind: Produktseiten, Warenkorb und alle Kampagnen-Landingpages.