How to fix meta viewport on Shopify

Steps for Shopify

1. In your Shopify admin, go to Online Store → Themes.
2. Next to your active theme, click Actions → Edit code.
3. In the Layout folder, open `theme.liquid`.
4. Search (Ctrl/Cmd+F) for `meta name="viewport"`.
5. Edit the content attribute to read exactly: `content="width=device-width, initial-scale=1"` — remove `user-scalable=no` and any `maximum-scale` below 5.
6. Click Save. Verify by opening your storefront on a mobile device and pinching to zoom.

<meta name="viewport" content="width=device-width, initial-scale=1">

What is meta viewport?

The `<meta name="viewport">` tag in your site's HTML tells mobile browsers how to display your page. Two specific settings inside it — `user-scalable=no` and `maximum-scale=1` (or any value less than 5) — completely prevent visitors from pinching to zoom in on your content. This violates WCAG 2.1 Success Criterion 1.4.4 (Resize Text), which requires that text can be resized up to 200% without loss of content or functionality. Removing these restrictions restores the browser's built-in zoom capability and brings your site into compliance.

Millions of people with low vision, aging eyesight, or small screens rely on pinch-to-zoom to read text comfortably — disabling it makes your store actively unusable for them. From a legal standpoint, WCAG 1.4.4 is referenced in accessibility laws and regulations in the US (ADA), EU (EN 301 549), and UK (PSBAR), meaning a blocked zoom can expose you to discrimination complaints or lawsuits. On the SEO and conversion side, Google uses mobile usability as a ranking signal, and visitors who can't read your product descriptions will simply bounce — costing you sales. Fixing this is one of the fastest accessibility wins available: it's a single line of HTML.

See the complete Meta viewport guide for every platform and the full background.