Shopify mobile UX: how to optimize product pages for phone shoppers
Over 70% of Shopify traffic comes from mobile devices (fashion and accessory stores exceed 80%). Yet the vast majority of product pages are designed on a desktop computer and then “made responsive”. We’ll dive into why just making your store responsive isn’t enough and how to customise your product pages for those phone-dwelling shoppers.
Mobile users have different behavior patterns to desktop users; they scroll faster, make inaccurate taps, have a shorter tolerance for loading times and are presented with a restricted view of the page at any one time. An optimised product page for mobile takes these differences into account and this guide looks at the various optimisation techniques for Shopify product pages that can help improve user experience.
In this post
- Above-the-fold priority
- Touch target sizing
- Mobile swatch optimization
- Mobile image gallery
- Sticky add-to-cart
- Content ordering on mobile
- FAQ
Above-the-fold priority
On a 375px mobile screen, the first viewport shows approximately 600px of content, your above the fold real estate. What should go there?
- Product image (the hero shot, taking up roughly 60% of the viewport)
- Product title
- Price (including compare-at if on sale)
- Star rating (if reviews are enabled)
What should NOT be above the fold on mobile: long descriptions, trust badges, shipping calculators or social sharing buttons. These push the variant picker and add-to-cart button further down. The customer should be able to see the product, see the price, and start selecting options within one scroll.
Touch target sizing
Apple’s Human Interface Guidelines recommend 44x44pt minimum touch targets. Google’s Material Design recommends 48x48dp. On a Shopify product page, this applies to:
- Color swatches: 32px visual size is fine if you add transparent padding to reach 44px tap area. A 32px swatch with 6px padding on each side = 44px tap target. See our swatch sizing guide for the CSS technique.
- Size buttons: Should be at least 44px tall. Text like “S”, “M”, “L” in a 36px button is too small to tap reliably.
- Add-to-cart button: Full width on mobile (100% of container). At least 48px tall. The bigger and more prominent, the better.
- Gallery navigation: Swipe dots or thumbnail strips need adequate spacing. Dots that are 8px with 4px gaps are nearly impossible to tap accurately.
Most mobile tap targets on Shopify product pages fail because swatches are too small and too close together. 15 color options in a 28×28 button with 4px of padding between each swatch makes for a minefield of mis-taps. Tapping “Navy” and selecting “Black” instead is a common mis-tap scenario that leads to wrong-color orders and returns.
Mobile swatch optimization
Swatches need special attention on mobile:
- Reduce swatch count per row. On a 375px screen, 5 to 6 swatches per row is the maximum before they overflow. Use CSS media queries to set smaller swatch sizes on mobile or allow horizontal scrolling for many swatches.
- Show color name labels. On mobile there is no hover tooltip. The only way to identify a color is by the swatch color itself or a visible text label. For similar colors (Navy vs Black), labels are the difference between correct and wrong orders.
- Clear selected state. The selected swatch must be obvious on mobile. A subtle 1px border change is invisible on a small screen. Use a thick border, box-shadow ring, or scale transform.
Rubik Variant Images has separate swatch sizes which allows you to set the swatches and spacing larger on the mobile version so they are easier to tap with your finger, and more compact on the desktop version for those who can be more precise with the mouse.
Mobile image gallery
The gallery is the largest element on a product page. Two key behaviors to include in the gallery.
- Horizontal swipe. The gallery should support native swipe gestures. No arrow buttons (too small to tap). No dot navigation (works but swipe is faster). Swipe is the most natural mobile interaction for browsing images.
- Pinch-to-zoom. Customers need to inspect product details on mobile. If your theme blocks pinch-zoom (some set
touch-action: none), re-enable it. See our zoom guide for the CSS fix.
When you have many color variants for products, variant image filtering is even more important on mobile than on desktop. On desktop, it’s annoying to have to scroll through a grid of 30 images. On mobile, it’s painful to have to swipe through a 30-item carousel of images. Filtering for the selected variant reduces the number of relevant images down to 4 to 6 which makes the gallery usable.
Sticky add-to-cart
A floating add-to-cart bar is pinned to the bottom of the mobile screen allowing customers to always see the buy button while simultaneously browsing through the product description, reviews of the product and related, more products. Without this floating widget, customers would have to return to the top of the page to find the add to cart button (which is placed above the fold on desktop) – a huge source of friction on mobile. And remember, friction is the enemy of conversions.
Most modern themes have an option to enable sticky add-to-cart links in their theme customizer under “Customize > Product page > Product information > Sticky add to cart” or something similar. If your theme doesn’t have this option, a simple fix can be achieved with CSS:
@media (max-width: 768px) {
.product-form__submit-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background: #fff;
padding: 12px 16px;
box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}
}Content ordering on mobile
We layout the product pages on desktop in a two column format with the gallery on the left and details on the right. On mobile all of the content stacks in a single column. The stacking order of the content determines how the user experiences it as they scroll down.
Recommended mobile content order:
- Product image gallery (swipeable)
- Title + price + star rating
- Color swatches
- Size buttons
- Add-to-cart button (+ sticky floating bar)
- Short description (2 to 3 sentences)
- Trust signals (returns, shipping, payment icons)
- Full description (collapsible or tabbed)
- Reviews
- Related products
Make the first 5 reasons obvious to readers. Content below can be additional information to convince readers to buy, but should not be read unless they scroll down.
For stores that include grouped products in their Rubik Combined Listings, the mobile swatch layout on the mobile store has its own settings. Instead of being a simple on/off toggle, you can have compact swatches appear on the collection view and then expand out on the product view, making efficient use of real-estate on a desktop or tablet screen but providing a more traditional experience on mobile.
“This app is an absolute lifesaver! It’s incredibly easy to use, and it completely eliminated the usual headaches of sizing and color selection. The process is smooth, intuitive, and hassle-free. On top of that, the support team is fantastic , helpful, responsive, and genuinely committed to making things smooth. Highly recommend”
Koazzi, US, Rubik Variant Images on the Shopify App Store
Frequently asked questions
What percentage of Shopify traffic is mobile?
+70, over 80% for fashion and accessory stores. Check the split for your store in your Shopify Admin > Analytics > Sessions by device.
What is the minimum touch target size for mobile?
44x44pt (Apple) or 48x48dp (Google) Minimum 32px for swatches with padding to cover 44px active tap area Minimum 48px for buttons (height)
Should I use a sticky add-to-cart on mobile?
Widget Abumper keeps the WordPress buy now button in always in view position on your mobile website. Making the buy now button sticky during scrolling has been shown to increase conversion rates of as much as 3-8% in split test results. The sticky buy now button is commonly referred to as a CTA or Sticky Call To Action. Most of the popular website themes support widget Abumper sticky CTA widget from theme settings.
How do I test my product page on mobile?
Test on real devices as opposed to browser responsive mode. iPhone simulator, and a mid-range Android for example, will expose bugs in Chrome DevTools mobile emulation for user interactions, physics for scrolling, and rendering performance.
Do variant image apps work properly on mobile?
Modern applications like Rubik Variant Images are written mobile-first. Swatch rendering, image filtering and gallery navigation all work on touch devices. The app comes with separate desktop and mobile swatch sizes, allowing you to optimise the tap targets for the phone screen size.
