These are field notes. Patterns I keep finding when I open an inherited Shopify theme that was either built pre-2020 or built by a team that never really internalized mobile-first. None of these are catastrophic. All of them cost conversions in ways nobody is tracking, which is the worst kind of bug.
I am writing this one as a running list rather than a methodology, because that is how these patterns surface in real engagements: one at a time, usually after the store owner has already lived with them for a year and stopped noticing.
Tap targets under 44px
The most common. A "Quick view" button on a collection card at 32px, a filter toggle at 28px, a "+" button on a quantity selector at 24px. All of these are technically tappable and all of them cause thumb mis-taps that the analytics read as "shopper did not engage", which the merchandising team interprets as "the feature is not popular".
The fix is a global CSS pass: every interactive element hits 44px minimum. WCAG 2.1 AA guidance. iOS and Android platform guidelines both. It is not negotiable and it is usually a two-hour fix across the whole theme.
Viewport meta missing or wrong
In 2026 this should not be a problem and yet I still find it. The <meta name="viewport"> tag should be:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
What I find instead: missing entirely (older themes predating responsive defaults), user-scalable=no (accessibility violation, also makes the page feel janky), a maximum-scale=1 that prevents pinch-to-zoom. Any of these signals the theme was built without mobile as the primary target.
viewport-fit=cover is the newer addition that lets the theme handle iPhone notch and home-indicator areas correctly. If you do not ship this, you end up with content hidden behind the notch on older iPhones or weird padding on newer ones.
Fixed-position headers that crush the viewport
A desktop-thinking pattern that still ships in older Shopify themes: a fixed header at the top, a fixed promo bar above that, and sometimes a sticky category nav under that. Stacked, they eat 140-180px of viewport on mobile, which is a quarter of what you have to work with.
The pattern that works: sticky header that is minimal on mobile (logo, cart, menu), no promo bar sticky (promo bar scrolls away after first view), no second-layer sticky nav. Everything else is reachable by scrolling or tapping the menu.
Sticky CTA that is always on screen
Older themes sometimes ship a sticky add-to-cart button that is on screen from the first paint. On mobile, this fights with the static add-to-cart above the fold and creates visual duplication. The shopper sees two "Add to cart" buttons and does not know which one is real.
The pattern that works: sticky CTA appears only after the shopper has scrolled past the primary add-to-cart. Not before. Intersection Observer on the primary CTA is the right mechanism, not a scroll-distance threshold.
“Sticky elements earn their persistence. A sticky CTA that appears when the primary CTA leaves the viewport is helpful. A sticky CTA that is always there is visual clutter.”
Desktop-grade hover states on mobile
Hover states do not exist on touch. Older themes often still ship :hover as the only way to reveal add-to-cart on a collection card, or product quick-view, or variant swatches. On mobile, the first tap reveals the hover state and does not fire the action, which means the shopper has to tap twice, and most shoppers do not.
The fix is to make :hover interactions work as :focus and to not hide primary actions behind hover at all. Collection card add-to-cart should be visible by default on mobile. Product quick-view is an anti-pattern on mobile anyway; remove it.
Desktop-sized fonts
Text that is 12-13px on the desktop CSS often does not scale up on mobile media queries. The shopper is reading 12px on a 6-inch screen while holding it 30cm from their face. It is small and they will not read it.
Body text minimum on mobile should be 15-16px. Smaller text (labels, badges, captions) should be 12-13px, not smaller. If the design calls for a 10px badge, make it 12px on mobile and accept the design has to flex.
Inputs that are not thumb-friendly
Input fields at 30px tall, number inputs with tiny stepper arrows, select dropdowns that use the desktop select styling on mobile. All of these are tap-frustrating.
The fixes:
- Input height 44px minimum. Same as tap target guidance.
- Quantity inputs use +/- buttons, not stepper arrows. Native stepper arrows on
<input type="number">are a desktop pattern that does not work on touch. - Select dropdowns use the native mobile picker when possible. Custom select components often fail on mobile because they do not trigger the native picker.
Form validation that fires after submit
Older themes validate address forms at submit time, which means the shopper fills out 8 fields, hits submit, and gets "zip code is invalid" in red text. The correct pattern is inline validation with clear error states, firing on blur for each field. Shopify's native checkout handles this well; the older themes that shipped custom checkout forms pre-Checkout-Extensibility often do not.
Images without width and height
Already covered under Core Web Vitals, but it is also a mobile-first pattern failure. Images without explicit dimensions cause layout shift when they load, which is worse on mobile where the viewport is smaller. Every <img> tag should have width and height attributes, always, without exception.
Third-party apps that break mobile layouts
The third-party app that was installed "just to try it" and never removed. A pop-up app that fires on PDP entry. A reviews widget that renders 200 reviews synchronously. A social proof toast that appears every 20 seconds. On desktop these are annoying; on mobile they are conversion killers.
Horizontal scrolling that is not intentional
Some themes accidentally introduce horizontal scroll on mobile because of a wide element (a full-bleed image, a long testimonial, a countdown banner) that exceeds the viewport width. On desktop it is invisible. On mobile the shopper can scroll sideways, which feels broken and signals "this site was not tested on mobile".
The fix is overflow-x: hidden on the body plus max-width: 100vw on any element that has a risk of exceeding viewport. Test by loading the page on a 320px viewport and confirming nothing bleeds horizontally.
Where this fits in the hub
These are the field-notes version of what the mobile-first DTC conversion pattern library covers at the architecture level. For the sprint-shaped operational version of paying these down, the UX debt paydown sprint for inherited Shopify stores is the adjacent piece. For the PDP-level version, see PDP patterns that actually convert on mobile in 2026.
What is the minimum tap target size for mobile Shopify themes?
44 pixels by 44 pixels. This is WCAG 2.1 AA guidance and is mirrored in both iOS and Android platform guidelines. Smaller targets cause thumb mis-taps that show up in analytics as "feature not used".
Should a Shopify theme have a sticky add-to-cart button on mobile?
Yes, but only after the shopper scrolls past the primary above-the-fold CTA. A sticky CTA that is visible from first paint duplicates the static one and causes confusion.
What is the right viewport meta tag for a modern Shopify theme?
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">. The viewport-fit=cover is the newer addition for handling iPhone notch and home-indicator safe areas.
How do hover interactions translate to mobile?
They do not. Hover states are a desktop pattern. On mobile, the first tap reveals the hover state without firing the action, which usually loses the shopper. The fix is to make primary actions visible by default and map hover styles to focus states.
What is the minimum body text size on mobile?
15-16px for body text, 12-13px floor for smaller labels and captions. Smaller text is unreadable on a 6-inch phone at normal reading distance.
The reference theme
The DTC Theme Starter ships with 44px tap targets, correct viewport meta, intersection-observer-based sticky CTA, and mobile-first typography built in. It is the reference implementation for teams tired of paying the mobile-first tax on inherited themes.
Sources and specifics
- WCAG 2.1 AA tap target guidance: 44x44 CSS pixels minimum.
- iOS Human Interface Guidelines: 44pt minimum tap target; Android Material guidance: 48dp minimum.
viewport-fit=coversafe-area CSS: supported since iOS 11, widely available in 2024-2026.loading="lazy"andfetchpriorityattributes: native browser support covered in the 48-hour Core Web Vitals fix list.