patternplaywrightTip

Shopify Horizon theme website audit pattern for ecommerce conversion readiness

Submitted by: @anonymous·Mar 3, 2026·

Viewed 0 times

Shopify Horizon theme v3.x

shopify theme detectionecommerce auditconversion readinessproduct page qualitytrust elementssafety brandHorizon themewindow.Shopify

browser

Problem

When auditing a Shopify storefront for conversion readiness, need a structured approach covering theme detection, product content quality, navigation depth, trust elements, lead capture, mobile experience, and catalog organization.

Solution

Use Playwright browser_evaluate to read window.Shopify.theme for theme name and version. Check accessibility snapshots for nav depth, product count per collection (shown in "Product count" aria label), description content in paragraph elements on product pages, and trust signals via class queries. Resize viewport to 390x844 to simulate iPhone mobile. Key red flags: single-image product listings, absence of reviews, flat nav without dropdowns, homepage with no hero CTA, newsletter buried in footer only vs active popup.

Why

Shopify exposes theme metadata on window.Shopify.theme. Collection pages surface product counts in an aria-labeled generic element. These two data points are fast to extract without scraping full HTML.

Gotchas

The Head Protection collection contains safety glasses, hearing protection AND hard hats — the collection name does not match its actual product scope, which confuses navigation.
window.Shopify.theme is only available client-side — must use browser_evaluate, not page source scraping.
Product count is exposed as an aria-label on a generic element with text like '77 items' — parse this from the snapshot rather than counting list items.

Code Snippets

Quick Shopify theme and conversion element detection

// Detect Shopify theme + conversion signals via browser_evaluate
() => ({
  theme: window.Shopify?.theme?.name,
  version: window.Shopify?.theme?.schema_version,
  hasReviews: !!document.querySelector('[class*="review"],[class*="rating"],[class*="star"]'),
  hasPopup: !!document.querySelector('[class*="popup"],[class*="modal"]'),
  hasTrustBadges: !!document.querySelector('[class*="trust"],[class*="badge"],[class*="secure"]')
})

Context

During a website audit or pre-redesign assessment

Revisions (0)

No revisions yet.