How to Make Shopify Buttons More Tap-Friendly (2026)

Key takeaways

• The minimum recommended tap target size is 44x44px (Apple) or 48x48dp (Google Material Design).
• Check your button height in the Theme Editor — most themes let you adjust button size through settings.
• If buttons are still too small, CSS padding adjustments fix it without touching HTML.
• Sticky add-to-cart buttons on product pages dramatically improve mobile conversion rates.

Small buttons on mobile are a conversion killer. When shoppers miss a tap and nothing happens — or worse, they tap the wrong element — they get frustrated and leave. Mobile shoppers are using a thumb, often one-handed, often while moving. Your buttons need to be forgiving.

This guide covers how to make Shopify buttons work better on mobile, from quick Theme Editor fixes to sticky ATC implementations.

How do you customize buttons on Shopify?

Buttons can be customized in two places:

1. Theme Editor — controls button color, border radius, and sometimes size
2. CSS — controls exact dimensions, padding, and spacing

Start in the Theme Editor before reaching for CSS.

Step 1 — Check your current button sizes

Before changing anything, measure your buttons on mobile.

Method A — Chrome DevTools. Right-click your “Add to Cart” button → Inspect → look at the computed size in the Styles panel. Height should be at least 44px.

Method B — PageSpeed Insights. Run your product page through PageSpeed Insights. Under “Opportunities”, look for “Tap targets are not sized appropriately” — it will flag any buttons that are too small.

The 44x44px minimum comes from Apple’s Human Interface Guidelines. Google recommends 48x48dp. Aim for at least 44px height on all interactive elements.

Step 2 — Adjust button size in the Theme Editor

Open the Theme Editor. Go to Online Store → Themes → Customize.

Look for button settings. Click on a section with a button, or look in the global Theme settings. Common locations:

• Theme settings → Buttons
• Theme settings → Typography (button font size affects button height)

Increasing button font size will usually increase button height proportionally. Some themes also have explicit “Button size” or “Button padding” sliders.

Step 3 — Increase button padding with CSS

If the Theme Editor doesn’t give enough control, CSS is the precise fix.

Go to Online Store → Themes → Actions → Edit code → assets/base.css. Add at the bottom:

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

Note: The exact class names vary by theme. Use browser Inspect to find your theme’s button classes. Common ones include .btn, .button, .shopify-payment-button, .product-form__submit.

Step 4 — Increase spacing between buttons

Buttons placed too close together cause accidental taps. This is common on product pages where “Add to Cart” and “Buy Now” sit side by side.

Add minimum spacing between buttons:

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

Or switch them to stack vertically on mobile if they currently sit side-by-side.

Step 5 — Add a sticky add-to-cart for product pages

The single highest-impact improvement for mobile product pages is a sticky add-to-cart bar that stays visible as the user scrolls.

Why it works: on mobile, product pages are long — shoppers scroll past the button to read descriptions, reviews, and FAQs. When they’re ready to buy, they have to scroll all the way back up. A sticky ATC removes that friction entirely.

Some Shopify themes include this natively. Check your theme settings under the Product template for a “Sticky add to cart” toggle.

If your theme doesn’t have it, describe it to Fudge:

“Add a sticky add-to-cart bar to my product pages that appears when the main ATC button scrolls out of view on mobile.”

Other tap-friendliness improvements

Swipeable product image galleries. Shoppers expect to swipe through product images on mobile. If your theme uses arrow buttons instead of swipe, it’s a worse experience. Check your theme settings for “Enable swipe” or similar.

Large quantity selectors. Plus/minus buttons for quantity are often tiny. These are interactive elements that need to meet the 44px minimum too.

Variant swatches. Color and size swatches on product pages should be large enough to tap accurately. Small swatches with tight spacing are a common mobile pain point.

Avoid hover-dependent interactions. Anything that requires hovering to reveal content (like a hidden secondary image on product cards) doesn’t work on mobile. Make sure key content is always visible without interaction.

Testing tap targets

Use Google’s Mobile-Friendly Test (search.google.com/test/mobile-friendly) to get a quick pass/fail on tap targets. For more detail, use Chrome DevTools in mobile emulation mode — you can simulate finger size by enabling the touch overlay.

The most important pages to audit: product pages, cart, and any campaign landing pages.