QA & Screenshots
Capture full-page screenshots across real browser engines and multiple device sizes. Review, approve, and reject per page × viewport × role — before clients ever see the theme.
How QA works
- Select pages to capture — your mapped templates and custom URLs
- Choose devices — Desktop, iPhone, iPad, Android, Wide monitor
- Pick a browser — Chromium, Firefox, Safari (WebKit), or real Safari via BrowserStack
- Click Capture — ThemeSync takes full-page screenshots with smart scrolling to trigger lazy-loaded images
- Review the grid, approve what looks right, flag anything broken
Screenshot needed: QA tab — screenshot grid showing multiple pages × devices, approval badges, and run controls at the top.
Device Presets
| Device | Viewport | Type |
|---|---|---|
| Desktop | 1280 × 800 | Standard laptop |
| Wide Desktop | 1920 × 1080 | Full HD monitor |
| iPhone 14 | 390 × 844 @2x | iOS mobile |
| iPad | 768 × 1024 @2x | Tablet |
| Android (Pixel 7) | 412 × 915 @2x | Android mobile |
Select any combination per run. Desktop + iPhone is the fastest check. All five for a full pre-launch audit.
Browser Engines
ThemeSync uses real browser rendering engines — not device emulation. CSS and JavaScript behave differently across engines, which is exactly why cross-browser testing matters.
Chromium
Chrome & Edge rendering. Default and fastest.
Firefox
Gecko engine. Catches CSS divergences from Chrome.
Safari (WebKit)
Real WebKit — matches iOS & macOS Safari rendering.
Real Safari
BrowserStack: actual iOS device, actual Safari. No simulation.
Real Safari Testing
For the most accurate iOS/macOS results, ThemeSync integrates with BrowserStack to run screenshots on real hardware:
- iPhone 16 — real Mobile Safari on iOS 18
- iPad Pro 12.9" — real tablet Safari
- macOS Sonoma — real desktop Safari, latest version
- Samsung Galaxy S24 — real Android Chrome
Code Scan
The code scan analyses your theme source files for cross-browser compatibility issues and performance anti-patterns — before you take screenshots.
flexbox gap (Safari bug), missing vendor prefixes, grid fallbacks, sticky positioning in overflow containers
Missing polyfills, Web Components without fallbacks, modern syntax that may not transpile
Render-blocking scripts, deprecated Shopify APIs, performance anti-patterns
Critical (will break), Warning (may cause issues), Info (worth noting)
Each finding includes the affected file, line number, and a recommended fix. Run a code scan before capturing screenshots to catch issues proactively.
Dismiss Selectors
Cookie banners, popups, and modals can obscure pages during screenshots. Add dismiss selectors in Theme Settings → QA to automatically close them before capture.
- Enter a CSS selector for the close button — e.g.
.cookie-banner [data-dismiss] - ThemeSync clicks it before each screenshot
- Selectors are saved per theme and persist across all future QA runs
QA Approvals
After capturing, team members approve or reject each page at each viewport. Sign-offs are tracked across three dimensions:
| Dimension | How it works |
|---|---|
| Per page | Each mapped URL is approved independently |
| Per viewport | Mobile, Tablet, Desktop are signed off separately |
| Per role | Designer, QA, PM — each role signs off independently |
A page is fully approved only when all required roles have approved all viewports. Rejections include a reason and can be re-approved after a fix.