smplx.

Shopify Architektur

Testing und QA für Shopify-Projekte: Checkliste

Claudio Gerlich··Aktualisiert: ·⏱ 12 min
Testing und QA für Shopify-Projekte: Checkliste

Im Shopify-Architektur-Ratgeber sprechen wir über Grundlagen. Heute: Der letzte 10% des Projekts, der oft 90% der Probleme verursacht.

Bei smplx. haben wir gelernt: Ein "fast fertig" Shop ist nicht dasselbe wie ein "Launch-ready" Shop. Testing und QA sind nicht Extras – sie sind Architektur.

Warum QA kritisch ist

Die Zahlen:

  • 0.1% der Besucher machen einen Kauf
  • Jeder Fehler im Checkout = direkte Revenue-Verluste
  • Mobile ist fragil (das sehen Browser-Tests nicht)
  • Payment-Fehler sind existenzbedrohend

Realität: Du kannst nicht alles manuell testen. Du brauchst Strategie.

Was du testen musst

1. Checkout Flow (Höchste Priorität)

Kritische Pfade:

  • Produkt hinzufügen → Cart
  • Mengen ändern
  • Coupon eingeben (gültig, ungültig, expired)
  • Checkout starten
  • Shipping-Methode wählen
  • Payment eingeben
  • Order confirmation zeigen
  • Email erhalten

Szenarios:

  • Normales Kreditkarten-Checkout
  • Guest Checkout
  • Logged-In Customer
  • Express Payment (Google Pay, Apple Pay)
  • Multi-Currency (wenn relevant)
  • Aus verschiedenen Ländern

Test-Payments:

Stripe Test Cards:
- 4242 4242 4242 4242 (Success)
- 4000 0000 0000 0002 (Decline)
- 4000 0025 0000 3155 (Requires 3D Secure)

Klarna Test:
- 4111 1111 1111 1111 (Success - Invoice)

2. Responsive & Browser-Testing

Geräte testen:

  • Desktop (1920x1080, 1440x900, 1024x768)
  • Tablet (iPad, Samsung Tab)
  • Mobile (iPhone 12, iPhone SE, Samsung Galaxy)
  • Old Mobile (iPhone 8)

Browser testen:

  • Chrome (Neueste Version)
  • Safari (Mac + iOS)
  • Firefox (Neueste)
  • Edge
  • Mobile Safari (iOS)
  • Chrome Mobile (Android)

Tools:

BrowserStack: https://www.browserstack.com
- Real devices in der Cloud
- Automatisierte Screenshot-Tests

3. Performance-Testing (Web Vitals)

Mit Lighthouse testen:

# Terminal
lighthouse https://shop.example.com --view

Ziele:

  • LCP < 2.5s
  • INP < 100ms
  • CLS < 0.1
  • Overall Score > 85

Mit Web Vitals messen:

// Im Theme oder Headless App
import { getCLS, onINP, getFCP, getLCP, getTTFB } from 'web-vitals';

function sendMetrics(metric) {
  // Sende zu Analytics
  fetch('/api/metrics', {
    method: 'POST',
    body: JSON.stringify(metric)
  });
}

getCLS(sendMetrics);
onINP(sendMetrics);
getFCP(sendMetrics);
getLCP(sendMetrics);
getTTFB(sendMetrics);

4. SEO-Testing

Mit axe DevTools (kostenlos):

# Browser Extension für Chrome
# Prüft: Accessibility + Basic SEO

Manuell checken:

  • H1 auf jeder Seite (genau ein)
  • Meta Descriptions (alle Pages)
  • Open Graph Tags (sozial teilen)
  • Structured Data (JSON-LD für Products)
  • Sitemap.xml existiert
  • robots.txt nicht zu restriktiv

Beispiel: Product Structured Data

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "{{ product.title }}",
  "description": "{{ product.description }}",
  "image": "{{ product.featured_image | image_url: width: 800 }}",
  "brand": {
    "@type": "Brand",
    "name": "{{ shop.name }}"
  },
  "offers": {
    "@type": "Offer",
    "price": "{{ product.selected_or_first_available_variant.price | divided_by: 100 }}",
    "priceCurrency": "{{ shop.currency }}",
    "availability": "https://schema.org/{% if product.selected_or_first_available_variant.available %}InStock{% else %}OutOfStock{% endif %}"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "{{ product.metafields.reviews.rating.value | default: 5 }}",
    "reviewCount": "{{ product.metafields.reviews.count.value | default: 0 }}"
  }
}
</script>

5. Accessibility-Testing

Tools:

  • axe DevTools (Chrome Extension)
  • WAVE (WebAIM)
  • Lighthouse Accessibility Audit

Kritische Checks:

  • Alle Images haben Alt-Text
  • Farbkontrast ist ausreichend
  • Keyboard Navigation funktioniert (Tab durch Links)
  • Formular-Labels richtig (nicht nur Placeholder)
  • ARIA-Labels wo nötig

Beispiel: Accessible Form

<!-- ❌ FALSCH -->
<input type="email" placeholder="Email">

<!-- ✅ RICHTIG -->
<label for="email">Email</label>
<input type="email" id="email" name="email" required>

6. Payment & Tax Compliance

Testen:

  • Shipping Calculations (richtig nach Land)
  • Tax Calculations (Sales Tax, VAT)
  • Currency Conversions (wenn Multi-Currency)
  • Payment Methods verfügbar (je nach Land)
  • Address Validation funktioniert

Beispiel: Shipping kalkulieren

// Shopify GraphQL
query CalculateShipping {
  cart(cartId: "...") {
    estimatedCost {
      shippingEstimate {
        amount
      }
      totalTaxEstimate {
        amount
      }
      subtotalAmount {
        amount
      }
      totalAmount {
        amount
      }
    }
  }
}

7. Mobile Payment Testing

Wichtig: Apple Pay und Google Pay funktionieren nur auf echten Geräten!

Setup:

  • Apple Pay auf Testgerät
  • Google Pay auf Android

Testen mit echten Geräten:

Stripe Test Card für Apple Pay:
- Card Number: 4242 4242 4242 4242
- Exp: 12/26
- CVC: 123

Testing-Tools und -Setups

Automated Testing: End-to-End

Mit Playwright (empfohlen):

Teams ohne eigene QA-Ressourcen lösen das über laufender technischer Shopify-Support — wir übernehmen die CI-Pipeline und halten Test-Suites über Theme-Updates hinweg aktuell.

// test.spec.js
import { test, expect } from '@playwright/test';

test('Kompletter Checkout Flow', async ({ page }) => {
  // 1. Zur Shop gehen
  await page.goto('https://shop.example.com');

  // 2. Produkt klicken
  await page.click('[data-test="product-card"]');
  expect(page).toHaveURL(/\/products\//);

  // 3. Zu Cart hinzufügen
  await page.click('button:has-text("Add to cart")');
  await page.waitForURL('**/cart');

  // 4. Checkout starten
  await page.click('button:has-text("Checkout")');
  await page.waitForURL('**/checkout');

  // 5. Email eingeben
  await page.fill('input[type="email"]', 'test@example.com');

  // 6. Shipping Address
  await page.fill('input[placeholder="First name"]', 'Test');
  await page.fill('input[placeholder="Last name"]', 'User');
  await page.fill('input[placeholder="Address"]', '123 Main St');

  // 7. Shipping Method wählen
  await page.click('text=Standard Shipping');

  // 8. Payment
  // Stripe iFrame handling ist komplex
  // Aber Shopify managed Checkout macht es leichter

  // 9. Order Confirmation
  expect(page).toContain('Order #');
});

test('Coupon wird angewendet', async ({ page }) => {
  await page.goto('https://shop.example.com/cart');
  await page.fill('input[placeholder="Discount code"]', 'SAVE10');
  await page.click('button:has-text("Apply")');

  // Preis sollte updated sein
  await page.waitForSelector('text=Subtotal');
  const originalPrice = await page.locator('text=Subtotal').evaluate(el => el.textContent);
  expect(originalPrice).toContain('$');
});

Ausführen:

npx playwright test
# Oder mit UI
npx playwright test --ui

Performance Testing: Lighthouse CI

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "https://shop.example.com",
        "https://shop.example.com/products",
        "https://shop.example.com/collections"
      ],
      "numberOfRuns": 3
    },
    "assert": {
      "preset": "lighthouse:recommended",
      "assertions": {
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "first-input-delay": ["error", { "maxNumericValue": 100 }]
      }
    }
  }
}

lhci autorun

Pre-Launch Checkliste

72 Stunden vor Launch

Funktionalität:

  • Alle Produkte visible + Bilder laden
  • Varianten funktionieren (alle Optionen)
  • Inventur korrekt (nicht Oversell möglich)
  • Alle Payment Methods aktiv
  • Alle Shipping Methoden tested
  • Alle Coupons/Discounts tested
  • Email-Bestätigungen funktionieren

Performance:

  • Lighthouse Score > 85
  • LCP < 2.5s (mobil)
  • Keine broken Images
  • Keine 404er

SEO:

  • Sitemap.xml submitted zu Google
  • Meta Descriptions alle Pages
  • Robots.txt nicht zu restriktiv
  • Structured Data ok (Rich Snippets)

Security:

  • HTTPS überall
  • CSP Headers gesetzt
  • XSS-Schutz
  • CSRF Protection (Shopify default)

Legal:

  • Privacy Policy current
  • Terms & Conditions ok
  • Return Policy clear
  • Impressum (DSGVO)

24 Stunden vor Launch

  • Database Backup
  • Monitoring Setup (Analytics, Error Tracking)
  • Incident Response Plan (wer macht was wenn Problem)
  • Support-System online (Email, Chat)
  • Marketing-Kampagne bereit (nicht noch am Launch-Tag starten)

Nach Launch (24-48h monitoring)

  • Error Rates monitored
  • Payment Success Rate > 95%
  • Page Load Times ok
  • Customer Support Tickets scannen (gibt Patterns)
  • Conversion Rate normal (keine Anomalien)

Post-Launch Monitoring

Real User Monitoring (RUM)

// Im Theme oder App
// Sende Metriken zu Monitoring-Service

window.addEventListener('error', (event) => {
  fetch('/api/errors', {
    method: 'POST',
    body: JSON.stringify({
      message: event.message,
      stack: event.error?.stack,
      url: window.location.href,
      timestamp: new Date()
    })
  });
});

// Unhandled Promise Rejections
window.addEventListener('unhandledrejection', (event) => {
  fetch('/api/errors', {
    method: 'POST',
    body: JSON.stringify({
      message: 'Unhandled Promise Rejection',
      error: event.reason,
      timestamp: new Date()
    })
  });
});

Key Metrics im Blick

Dashboard mit:

  • Conversion Rate (Visits → Purchases)
  • Cart Abandonment Rate
  • Average Order Value
  • Payment Success Rate
  • Page Load Time (Real Users)
  • Error Rate (Frontend + Backend)
  • Customer Support Tickets

Tools:

  • Google Analytics 4 (kostenlos)
  • Shopify Admin Reports
  • Sentry (Error Tracking)
  • Databox (KPI Dashboard)

Incident Response

Wenn Problem passiert:

1. Detect (Monitoring alert)
   └─ Severity: Critical/High/Medium/Low

2. Acknowledge (Team wird benachrichtigt)
   └─ On-Call Person: [Name]

3. Assess
   └─ Impact: Revenue-Loss? UX-Broken? API Down?

4. Mitigate (Schnell!)
   └─ Theme Rollback?
   └─ App ausschalten?
   └─ Maintenance Mode?

5. Fix (Root Cause)
   └─ Code Debug
   └─ Deploy Fix

6. Monitor (24h nach Fix)
   └─ Error rate noch ok?
   └─ Performance normal?

7. Postmortem (nächster Tag)
   └─ Warum passiert?
   └─ Wie prevent wir es in Zukunft?

Testing für verschiedene Shopify-Architekturen

Theme-Based Shop (Liquid)

Focus:

  • Theme Performance
  • Liquid Template Errors
  • CSS/JS Conflicts
  • Browser Compatibility

Tools:

  • Lighthouse
  • BrowserStack
  • Chrome DevTools

Headless Shop (Next.js/Remix)

Focus:

  • API Error Handling
  • Storefront API Rate Limits
  • SSR/SSG Performance
  • Data Freshness

Tools:

  • Jest (Unit Tests)
  • Playwright (E2E Tests)
  • K6 (Load Testing)
// Jest Example
describe('Product Page', () => {
  it('should fetch product data from Storefront API', async () => {
    const response = await fetchProduct('123');
    expect(response).toHaveProperty('id');
    expect(response).toHaveProperty('title');
  });

  it('should handle API errors gracefully', async () => {
    const response = await fetchProduct('invalid');
    expect(response).toBeNull();
  });
});

Multi-App Ecosystem

Focus:

  • App Communication (wenn Apps interagieren)
  • Webhook Handling
  • API Rate Limits
  • Data Consistency

Tools:

  • API Monitoring (Postman, Insomnia)
  • Webhook Testing (webhook.cool)
  • Load Testing (Apache JMeter)

QA Checkliste (Kopierbar)

# Pre-Launch QA Checklist

## Functional Testing
- [ ] Homepage loads
- [ ] Product pages load with images
- [ ] Variants work (all options)
- [ ] Add to cart works
- [ ] Cart shows correct totals
- [ ] Checkout flow complete
- [ ] Payment processes successfully
- [ ] Order confirmation email sent
- [ ] Customer account created (if applicable)

## Responsive Design
- [ ] Mobile (320px) looks ok
- [ ] Tablet (768px) looks ok
- [ ] Desktop (1920px) looks ok
- [ ] Touch targets are at least 44x44px
- [ ] No horizontal scroll
- [ ] Images scale properly

## Performance
- [ ] Lighthouse Score > 85
- [ ] LCP < 2.5s
- [ ] INP < 200ms
- [ ] CLS < 0.1
- [ ] Page size < 5MB

## SEO
- [ ] Meta descriptions set
- [ ] H1 tags correct
- [ ] Open Graph tags
- [ ] Structured data valid
- [ ] Sitemap submitted

## Security
- [ ] HTTPS everywhere
- [ ] No console errors
- [ ] Payment data secure
- [ ] PII protected

## Browsers
- [ ] Chrome (latest)
- [ ] Safari (Mac + iOS)
- [ ] Firefox (latest)
- [ ] Edge (latest)

## Payment
- [ ] Test card works
- [ ] Invalid card rejected
- [ ] Tax calculated
- [ ] Shipping calculated
- [ ] Coupons work

Über den Autor

Claudio Gerlich ist Technical Architect bei smplx. und seit 2020 spezialisiert auf Shopify. Mit dutzenden Launches haben wir gelernt: 90% der Launch-Probleme sind vermeidbar mit guter QA-Strategie.

QA ist nicht "langweilig testen". Es ist Risikovermeidung. Es ist Revenue-Protection.

smplx. ist Shopify Technical Partner (seit 2020) mit Sitz in Coesfeld, NRW.

Weiterlesen

Shopify Architektur

Shopify API: REST, GraphQL & Webhooks

Shopify bietet REST, GraphQL und Webhooks. Wir zeigen dir wann du welche API nutzt, wie du Rate Limits handhabst und wie du robuste Integrationen baust.

⏱ 13 min

Shopify API: REST, GraphQL & Webhooks
Shopify Architektur

Shopify Metaobjects erklärt: Wann, warum und wie

Metaobjects sind die Evolution von Metafields. So baust du komplexe Datenstrukturen in Shopify – mit Code-Beispielen.

⏱ 12 min

Shopify Metaobjects erklärt: Wann, warum und wie
Shopify Architektur

Technische Schulden in Shopify vermeiden

Technische Schulden entstehen schnell in Shopify. Wir zeigen dir wie sie entstehen, wie du sie vermeidest und wie du bestehende Schulden abbaust.

⏱ 12 min

Technische Schulden in Shopify vermeiden
← Alle Artikel

Bereit, das in deinem Shopify-Store zu fixen?

In 5 Werktagen weißt du genau, was du zuerst fixen musst — 990 €, kein Pitch.

Audit starten — 990 € →Quick-Check (kostenlos)
WhatsApp Chat