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.

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

Ö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:

Verwandt: Change Padding and Margin in Shopify.

@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 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