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

Key takeaways

• The minimum recommended tap target size is 44x44 points (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.
• A sticky add-to-cart bar keeps the buy button in reach on long mobile product pages.

To make Shopify buttons tap-friendly, give every button at least 48px of height on mobile (through theme settings or a CSS min-height rule), leave space between neighbouring buttons, and add a sticky add-to-cart bar on long product pages.

Mobile shoppers are using a thumb, often one-handed, often while moving. Small buttons lead to missed taps and taps on the wrong element.

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 48px.

Method B — PageSpeed Insights. Run your product page through PageSpeed Insights. In the Accessibility section, look for “Touch targets do not have sufficient size or spacing”. It flags buttons and links that are too small or too close together.

The 44x44 point minimum comes from Apple’s Human Interface Guidelines. Google’s Material Design recommends 48x48dp. Aim for 48px; 44px is Apple’s minimum.

For button padding in general, see how to change padding and margin in Shopify.

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.

First duplicate your theme: go to Online Store → Themes, click the three-dot menu (…) next to your theme, then Duplicate. On the duplicate, click the three-dot menu (…), then Edit code, and open assets/base.css. Add at the bottom:

@media (max-width: 749px) {
    .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: 749px) {
    .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

A common 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, the AI operator for Shopify stores:

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

Fudge builds the bar into your product template as a draft for you to approve. Once it’s live, Fudge compares add-to-cart and conversion rate on those pages before and after. With a conversion goal, it also looks for small buttons and other mobile problems on the pages that lose the most shoppers.

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 reach 48px 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 Chrome DevTools device mode, or Lighthouse’s accessibility audit (“Touch targets do not have sufficient size or spacing”). Google retired its Mobile-Friendly Test in December 2023.

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

FAQ