Testing and QA for Shopify Stores

A Shopify store that has not been properly tested is a liability. Broken checkout flows lose sales silently. Layout issues on specific mobile devices create friction that analytics cannot always explain. Third-party app conflicts cause JavaScript errors that degrade performance. And accessibility failures exclude customers and expose you to legal risk under the Equality Act 2010.

Testing is not a phase you bolt on at the end of a build. It is a discipline that runs throughout development and continues after launch. Every theme update, every new app installation, every configuration change introduces the potential for regression — something that worked before breaking because of a seemingly unrelated change.

This guide covers the complete testing and QA framework we use as part of our Shopify development work. For our internal QA process, see how we QA test every Shopify store before launch. For related technical content, see our guides on Shopify updates and maintenance and CI/CD for Shopify theme deployment.

Why testing matters for Shopify stores

Shopify handles much of the infrastructure complexity — hosting, security, checkout processing — but everything above the platform layer is your responsibility. Your theme code, your app stack, your product data, your content, and your configuration all need systematic testing. The cost of finding a bug after launch is significantly higher than finding it during development: lost sales, damaged reputation, emergency fixes during business hours, and the stress of debugging a production issue under pressure.

Testing is not about proving your code works. It is about finding the cases where it does not — before your customers find them for you.

The most common issues we find during QA are not dramatic failures. They are subtle problems: a variant selector that breaks when a specific colour is out of stock, a discount code that applies incorrectly to a particular product combination, a mobile layout that overflows on a specific screen width, or a third-party script that blocks the main thread and adds 2 seconds to page load time.

Checkout and payment testing

Checkout is the most critical path in your store. A single bug in the checkout flow can silently prevent sales, and because most analytics drop off at checkout (due to Shopify’s hosted checkout), you may not immediately know something is broken.

Test payment gateway

# Enable Shopify's Bogus Gateway for testing
# Settings > Payments > Add payment method > Bogus Gateway

# Test card numbers for Bogus Gateway:
# Success: "1" in card number field
# Failure: "2" in card number field
# Error:   "3" in card number field

# For Stripe test mode:
# Success: 4242 4242 4242 4242
# Decline: 4000 0000 0000 0002
# 3D Secure: 4000 0025 0000 3155
# Insufficient funds: 4000 0000 0000 9995

Checkout scenarios to test

• Guest checkout. Complete a purchase without creating an account. Verify confirmation email delivery and order appears in admin.
• Account checkout. Log in, add items, complete checkout. Verify order appears in account history.
• Discount codes. Test each discount type: percentage off, fixed amount, free shipping, buy-X-get-Y. Test with minimum purchase requirements. Test stacking behaviour. Test expired codes. Test codes limited to specific products or collections.
• Shipping rates. Test shipping calculation for domestic UK addresses, Northern Ireland, Scottish Highlands and Islands, Channel Islands, and international destinations. Verify free shipping thresholds work correctly.
• Tax calculation. Verify VAT is calculated correctly for UK orders. Test tax-exempt scenarios if applicable. Verify tax display in cart, checkout, and confirmation email.
• Multi-item orders. Test with different product types, variants, quantities, and combinations. Verify cart totals, discount application, and shipping calculation.

Cross-browser and cross-device testing

Your Shopify store must work correctly across all major browsers and device types. The target matrix for UK ecommerce in 2026 includes Chrome (desktop and mobile), Safari (iOS and macOS), Firefox, Edge, and Samsung Internet.

Device testing matrix

# Minimum device testing matrix for UK ecommerce
Desktop:
  - Chrome (latest) on Windows
  - Chrome (latest) on macOS
  - Safari (latest) on macOS
  - Firefox (latest) on Windows
  - Edge (latest) on Windows

Mobile:
  - Safari on iPhone (iOS 17+) — multiple screen sizes
  - Chrome on Android — multiple screen sizes
  - Samsung Internet on Samsung devices

Tablet:
  - Safari on iPad (landscape and portrait)
  - Chrome on Android tablet

Key areas to test

• Navigation. Desktop dropdown menus, mobile hamburger menu, mega menus, search functionality.
• Product pages. Image gallery, variant selection, add-to-cart, quantity selectors, sticky add-to-cart bars.
• Cart. Cart drawer or cart page, quantity updates, discount code entry, upsell widgets.
• Responsive layout. Check every page at common breakpoints: 320px, 375px, 414px, 768px, 1024px, 1280px, 1440px. Look for horizontal overflow, text truncation, overlapping elements, and touch target sizes.

Performance testing

Performance directly impacts conversion rate. Research consistently shows that each additional second of page load time reduces conversion by 7-12%. For Shopify stores, the main performance concerns are image optimisation, third-party script loading, and Liquid template render time.

Core Web Vitals targets

# Core Web Vitals targets for Shopify stores
LCP (Largest Contentful Paint): < 2.5 seconds
INP (Interaction to Next Paint):  < 200 milliseconds
CLS (Cumulative Layout Shift):    < 0.1

# Testing tools:
# - Google PageSpeed Insights (lab + field data)
# - Chrome DevTools Lighthouse
# - WebPageTest.org (multi-location)
# - Google Search Console Core Web Vitals report

Performance testing process

• Test key pages. Homepage, collection pages, product pages, cart, and blog pages. Each has different performance characteristics.
• Test on throttled connections. Not everyone has fast broadband. Test on 3G and slow 4G to understand the experience for mobile users on cellular networks.
• Identify script bloat. Use Chrome DevTools Coverage tab to identify unused JavaScript and CSS. Check third-party app scripts for size and blocking behaviour.
• Monitor after launch. Performance degrades over time as content grows and apps are added. Set up weekly automated performance monitoring.

Automated testing with Playwright

Manual testing is essential but does not scale. Automated tests catch regressions that manual testing misses, run consistently without human error, and execute in minutes rather than hours.

// Example Playwright test for Shopify checkout flow
import { test, expect } from '@playwright/test';

test('complete checkout flow', async ({ page }) => {
  // Navigate to a product page
  await page.goto('/products/test-product');

  // Select a variant
  await page.click('[data-value="Medium"]');

  // Add to cart
  await page.click('button[name="add"]');

  // Navigate to cart
  await page.goto('/cart');

  // Verify product is in cart
  await expect(page.locator('.cart-item')).toHaveCount(1);

  // Proceed to checkout
  await page.click('[name="checkout"]');

  // Verify checkout page loads
  await expect(page).toHaveURL(/checkouts/);

  // Fill shipping information
  await page.fill('#email', 'test@example.com');
  await page.fill('#TextField0', 'Test');  // First name
  await page.fill('#TextField1', 'User');  // Last name
  await page.fill('#TextField2', '123 Test Street');  // Address

  // Verify shipping methods appear
  await expect(page.locator('[data-shipping-method]')).toBeVisible();
});

test('discount code applies correctly', async ({ page }) => {
  await page.goto('/cart');
  await page.fill('#discount-code', 'TEST10');
  await page.click('[data-apply-discount]');

  // Verify discount is applied
  await expect(page.locator('.discount-amount')).toContainText('10%');
});

Integrate these tests into your CI/CD pipeline so they run automatically before every theme deployment. A failing test blocks the deployment, preventing regressions from reaching production.

Accessibility testing

Accessibility is not optional. Under the Equality Act 2010, UK businesses must make reasonable adjustments to ensure their services are accessible to disabled people. Beyond legal compliance, accessible stores convert better because the underlying principles — clear navigation, logical structure, sufficient contrast — benefit all users.

Automated accessibility tools

# Automated accessibility testing tools
# axe-core (browser extension and CLI)
npx @axe-core/cli https://your-store.myshopify.com

# Lighthouse accessibility audit
npx lighthouse https://your-store.myshopify.com --only-categories=accessibility

# Pa11y (command line)
npx pa11y https://your-store.myshopify.com

Manual accessibility checks

• Keyboard navigation. Tab through every interactive element. Verify focus indicators are visible. Test focus trapping in modals (cart drawer, quick view).
• Screen reader. Navigate the store with VoiceOver (macOS/iOS) or NVDA (Windows). Verify all images have meaningful alt text, form fields have labels, and dynamic content updates are announced.
• Colour contrast. Verify text meets WCAG AA contrast ratios (4.5:1 for body text, 3:1 for large text). Test with a colour contrast analyser.
• Touch targets. Verify all interactive elements meet the 24x24px minimum target size on mobile. Check filter toggles, size selectors, and navigation links.

App conflict and integration testing

Third-party Shopify apps are the most common source of bugs in production stores. Each app injects its own JavaScript, CSS, and sometimes Liquid code into your theme. When multiple apps interact — or when an app conflicts with your custom theme code — the results range from visual glitches to broken checkout flows.

Testing approach

• Isolate each app. Disable all apps, then enable them one at a time. Test core functionality after each app is activated. This identifies which app causes a specific issue.
• Check the JavaScript console. Open browser DevTools and watch for errors on every page. App conflicts frequently manifest as JavaScript errors that break subsequent scripts.
• Measure performance impact. Test page speed with all apps enabled and with each app disabled individually. This reveals which apps have the largest performance cost.
• Test after app updates. App developers push updates without warning. Monitor for issues after app auto-updates by running your automated test suite regularly.

Pre-launch QA checklist

Before launching or migrating a Shopify store, run through this checklist. Every item must pass before going live.

# Pre-launch QA checklist
## Checkout
- [ ] Complete a test purchase (guest checkout)
- [ ] Complete a test purchase (account checkout)
- [ ] Test all payment methods
- [ ] Test all discount code types
- [ ] Verify shipping rates for all regions
- [ ] Verify tax calculation
- [ ] Verify order confirmation email

## Content
- [ ] Proofread all pages (spelling, grammar)
- [ ] Verify all internal links work
- [ ] Verify all external links work
- [ ] Check all images load (no broken images)
- [ ] Verify meta titles and descriptions
- [ ] Check Open Graph and Twitter Card previews
- [ ] Verify structured data (Schema.org)
- [ ] Check robots.txt and sitemap.xml

## Visual
- [ ] Test on Chrome desktop
- [ ] Test on Safari desktop
- [ ] Test on Firefox desktop
- [ ] Test on iPhone Safari
- [ ] Test on Android Chrome
- [ ] Test on iPad (landscape + portrait)
- [ ] Verify favicon displays correctly

## Performance
- [ ] PageSpeed score > 70 on mobile
- [ ] LCP < 2.5 seconds
- [ ] All images optimised and lazy-loaded
- [ ] No render-blocking scripts

## Accessibility
- [ ] Keyboard navigation works throughout
- [ ] All images have alt text
- [ ] Form fields have labels
- [ ] Colour contrast meets AA standards
- [ ] Focus indicators visible

Post-launch monitoring

Testing does not stop at launch. Production monitoring catches issues that testing missed and identifies problems caused by real-world usage patterns, browser updates, and app changes.

• Real user monitoring (RUM). Track actual page load times and Core Web Vitals from real visitors using tools like Google Search Console or SpeedCurve.
• Error tracking. Implement error monitoring (Sentry, Bugsnag, or LogRocket) to capture JavaScript errors from real user sessions. Investigate new error types within 24 hours.
• Checkout monitoring. Track checkout completion rate daily. A sudden drop indicates a checkout issue that needs immediate investigation.
• Uptime monitoring. Although Shopify handles infrastructure uptime, monitor your specific pages for availability. Third-party services or custom code can cause page-level outages even when Shopify is operational.

CI/CD integration for ongoing QA

The best QA is automated QA that runs on every code change. Integrate your testing framework into a CI/CD pipeline that validates each theme deployment before it reaches production.

# GitHub Actions workflow for Shopify theme testing
name: Theme QA
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - name: Upload test results
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-results
          path: test-results/

This pipeline runs your Playwright test suite on every push to the main branch and on every pull request. If any test fails, the deployment is blocked. This creates a safety net that catches regressions before they affect customers.

---

Testing is not glamorous work, but it is the work that separates professional Shopify stores from amateur ones. A systematic approach — covering functional, visual, performance, accessibility, and integration testing — catches problems before they cost you sales. Automated testing scales this discipline so it runs continuously, not just before launch. And post-launch monitoring ensures you catch the issues that only manifest under real-world conditions.

If you need help establishing a QA process for your Shopify store, get in touch. We build testing and QA into every Shopify development project.