So machst du Shopify-Buttons besser tippbar (2026)

Das Wichtigste in Kürze

• Die empfohlene Mindestgröße für Touch-Ziele beträgt 44x44 Punkte (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, helfen CSS-Padding-Anpassungen, ohne das HTML anzufassen.
• Eine Sticky Add-to-Cart-Leiste hält den Kauf-Button auf langen mobilen Produktseiten immer in Reichweite.

Um Shopify-Buttons Touch-freundlich zu machen, gib jedem Button auf dem Handy mindestens 48px Höhe (über die Theme-Einstellungen oder eine CSS-min-height-Regel), lass Platz zwischen benachbarten Buttons und füge auf langen Produktseiten eine Sticky Add-to-Cart-Leiste hinzu.

Mobile Shopper tippen mit dem Daumen, oft einhändig und oft während sie unterwegs sind. Kleine Buttons führen dazu, dass man daneben tippt oder das falsche Element trifft.

Wie passt man Buttons in Shopify an?

Buttons können an zwei Stellen angepasst werden:

1. Theme-Editor – steuert Button-Farbe, Border-Radius und manchmal die Größe
2. CSS – steuert exakte Abmessungen, Padding und Abstände

Fang im Theme-Editor an, bevor du zu CSS greifst.

Schritt 1 – Überprüfe deine aktuellen Button-Größen

Bevor du etwas änderst, miss deine Buttons auf dem Handy aus.

Methode A – Chrome DevTools. Rechtsklick auf deinen “In den Warenkorb”-Button → Untersuchen (Inspect) → schau dir die berechnete Größe im Styles-Panel an. Die Höhe sollte mindestens 48px betragen.

Methode B – PageSpeed Insights. Lass deine Produktseite durch PageSpeed Insights laufen. Suche im Bereich Barrierefreiheit (Accessibility) nach “Touch-Ziele haben keine ausreichende Größe oder keinen ausreichenden Abstand” (Touch targets do not have sufficient size or spacing). Das markiert Buttons und Links, die zu klein sind oder zu nah beieinander liegen.

Das Minimum von 44x44 Punkten stammt aus den Human Interface Guidelines von Apple. Das Material Design von Google empfiehlt 48x48dp. Peile 48px an; 44px ist das Minimum von Apple.

Mehr zum Thema Button-Padding im Allgemeinen findest du unter Wie man Padding und Margin in Shopify ändert.

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

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

Such nach Button-Einstellungen. Klick auf einen Abschnitt mit einem Button oder schau in die globalen Theme-Einstellungen. Häufige Orte:

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

Wenn du die Schriftgröße des Buttons erhöhst, wird normalerweise auch die Button-Höhe proportional größer. Einige Themes haben auch direkte Regler für „Button-Größe“ (Button size) oder „Button-Padding“.

Schritt 3 – Button-Padding mit CSS vergrößern

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

Dupliziere zuerst dein Theme: Geh zu Onlineshop → Themes, klick auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Duplizieren. Klick beim Duplikat auf das Drei-Punkte-Menü (…), dann auf Code bearbeiten und öffne assets/base.css. Füge ganz unten Folgendes hinzu:

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

Hinweis: Die genauen Klassennamen variieren je nach Theme. Nutze die “Untersuchen”-Funktion (Inspect) deines Browsers, um die Button-Klassen deines Themes zu finden. Häufige Klassen sind .btn, .button, .shopify-payment-button, .product-form__submit.

Schritt 4 – Abstand zwischen Buttons vergrößern

Zu eng beieinander platzierte Buttons führen zu versehentlichem Tippen. Das kommt häufig auf Produktseiten vor, wo “In den Warenkorb” und “Jetzt kaufen” direkt nebeneinander liegen.

Füge einen Mindestabstand zwischen den Buttons hinzu:

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

Oder stelle sie so ein, dass sie auf dem Handy untereinander gestapelt werden, falls sie aktuell nebeneinander liegen.

Schritt 5 – Einen Sticky Add-to-Cart für Produktseiten hinzufügen

Eine häufige Verbesserung für mobile Produktseiten ist eine Sticky Add-to-Cart-Leiste, die beim Scrollen sichtbar bleibt.

Warum das funktioniert: Auf dem Handy sind Produktseiten lang – Shopper scrollen am Button vorbei, um Beschreibungen, Bewertungen und FAQs zu lesen. Wenn sie bereit zum Kauf sind, müssen sie erst wieder ganz nach oben scrollen. Ein Sticky ATC entfernt diese Reibung komplett.

Einige Shopify-Themes haben das bereits standardmäßig integriert. Schau in deinen Theme-Einstellungen unter der Produkt-Vorlage nach einem “Sticky Add-to-Cart”-Schalter.

Wenn dein Theme das nicht hat, beschreib es einfach Fudge, dem KI-Operator für Shopify-Stores:

“Füge meinen Produktseiten eine Sticky Add-to-Cart-Leiste hinzu, die erscheint, wenn der Haupt-ATC-Button auf dem Handy aus dem Bildbereich scrollt.”

Fudge baut die Leiste als Entwurf in deine Produkt-Vorlage ein, den du nur noch freigeben musst. Sobald sie live ist, vergleicht Fudge die Add-to-Cart- und Conversion-Rate auf diesen Seiten vorher und nachher. Mit einem Conversion-Ziel sucht die KI auch nach kleinen Buttons und anderen mobilen Problemen auf den Seiten, die die meisten Shopper verlieren.

Weitere Verbesserungen für besseres Tippen

Wischbare Produktbild-Galerien (Swipe). Shopper erwarten, dass sie auf dem Handy durch Produktbilder wischen können. Wenn dein Theme Pfeil-Buttons statt Wischen verwendet, ist das eine schlechtere User Experience. Prüfe deine Theme-Einstellungen auf “Swipe aktivieren” oder Ähnliches.

Große Mengenauswähler. Plus/Minus-Buttons für die Menge sind oft winzig. Das sind interaktive Elemente, die ebenfalls 48px erreichen sollten.

Varianten-Swatches. Farb- und Größen-Swatches auf Produktseiten sollten groß genug sein, um sie zielsicher anzutippen. Kleine Swatches mit engem Abstand sind ein häufiges Problem auf dem Handy.

Vermeide Hover-abhängige Interaktionen. Alles, was ein Hovern erfordert, um Inhalte anzuzeigen (wie ein verstecktes zweites Bild auf Produktkarten), funktioniert auf dem Handy nicht. Stell sicher, dass wichtige Inhalte immer ohne Interaktion sichtbar sind.

Tap Targets testen

Nutze den Device Mode der Chrome DevTools oder das Barrierefreiheits-Audit von Lighthouse (“Touch-Ziele haben keine ausreichende Größe oder keinen ausreichenden Abstand”). Google hat seinen Mobile-Friendly Test im Dezember 2023 eingestellt.

Die wichtigsten Seiten, die du prüfen solltest: Produktseiten, Warenkorb und sämtliche Landingpages für Kampagnen.

FAQ