Features

Theme Intelligence

Theme Intelligence is PeerScripts' flagship code analysis feature. It scans your Shopify theme files for performance issues, security vulnerabilities, deprecated patterns, and deviations from best pra

Theme Intelligence

Theme Intelligence is PeerScripts' flagship code analysis feature. It scans your Shopify theme files for performance issues, security vulnerabilities, deprecated patterns, and deviations from best practices.


Overview

Your Shopify theme directly impacts customer experience, site performance, and security. Theme Intelligence provides:

  • Automated Code Analysis: Scans Liquid, JavaScript, CSS, and JSON files
  • Security Scanning: Identifies vulnerabilities and risky patterns
  • Performance Detection: Finds code that slows down your store
  • Best Practice Enforcement: Ensures your theme follows Shopify guidelines
  • Regression Tracking: Alerts when new issues are introduced

Getting Started

Running Your First Scan

  1. Navigate to Theme Intelligence in the sidebar
  2. Select the theme to scan:
    • Live Theme: Your published, customer-facing theme
    • Development Themes: Unpublished themes for testing
  3. Click New Scan
  4. Choose scan type:
    • Quick Scan: Fast check of critical issues (1-2 minutes)
    • Full Scan: Comprehensive analysis (3-5 minutes)
    • Targeted Scan: Specific file types or folders

Understanding Scan Progress

During a scan, you'll see:

┌─────────────────────────────────────────────────────────────┐
│  SCAN IN PROGRESS                                           │
│                                                             │
│  Theme: Dawn 12.0                                           │
│  Type: Full Scan                                            │
│                                                             │
│  [████████████░░░░░░░░] 60%                                 │
│                                                             │
│  ✓ Liquid templates analyzed (45/45)                        │
│  ✓ JavaScript files analyzed (12/12)                        │
│  ○ CSS files analyzing... (3/8)                             │
│  ○ JSON settings pending                                    │
│  ○ Asset validation pending                                 │
└─────────────────────────────────────────────────────────────┘

Understanding Results

Health Score

Each scan produces a health score from 0-100:

Score Rating Meaning
90-100 Excellent Minor or no issues
70-89 Good Some improvements recommended
50-69 Fair Several issues need attention
0-49 Poor Significant problems exist

Issue Categories

Issues are organized into categories:

Performance

  • Unoptimized images
  • Render-blocking resources
  • Excessive DOM size
  • Large file sizes
  • Inefficient loops

Security

  • Cross-site scripting (XSS) vulnerabilities
  • Unsafe external resources
  • Sensitive data exposure
  • Insecure dependencies

Deprecated Patterns

  • Outdated Liquid tags
  • Removed API features
  • Legacy syntax

Best Practices

  • Missing accessibility attributes
  • Non-semantic HTML
  • Code organization issues
  • Documentation gaps

Severity Levels

Severity Description Example
Critical Security risk or breaking issue XSS vulnerability
High Significant impact on performance/UX Uncompressed 5MB image
Medium Should be fixed soon Deprecated filter usage
Low Minor improvement opportunity Missing alt text

Issue Details

Click any issue to view detailed information:

Issue View

┌─────────────────────────────────────────────────────────────────┐
│  ISSUE: Unescaped User Input in Template                        │
│                                                                 │
│  Severity: CRITICAL          Category: Security                 │
│  File: templates/product.liquid                                 │
│  Line: 145                                                      │
│                                                                 │
│  ─────────────────────────────────────────────────────────────  │
│                                                                 │
│  DESCRIPTION                                                    │
│  User-provided input is rendered without proper escaping,       │
│  creating a potential cross-site scripting (XSS) vulnerability. │
│                                                                 │
│  AFFECTED CODE                                                  │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │  143 │ <div class="product-description">                │   │
│  │  144 │   {{ product.description }}                      │   │
│  │  145 │   {{ customer_note }}  ← ISSUE                   │   │
│  │  146 │ </div>                                           │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│  RECOMMENDATION                                                 │
│  Use the `escape` filter to sanitize user input:               │
│  {{ customer_note | escape }}                                   │
│                                                                 │
│  [View in Code Editor]  [Create Ticket]  [Ignore Issue]        │
└─────────────────────────────────────────────────────────────────┘

Taking Action

For each issue, you can:

  • View in Code Editor: Open the file in PeerScripts' code editor
  • Create Ticket: Track the fix in your ticket system
  • Ignore Issue: Mark as false positive (won't appear in future scans)
  • Copy Details: Copy issue information for sharing

Theme Comparison

Compare issues between themes or scan versions:

Comparing Themes

  1. Run scans on multiple themes
  2. Click Compare in the toolbar
  3. Select themes to compare
  4. View side-by-side issue comparison

Regression Detection

PeerScripts automatically detects when new issues appear:

┌─────────────────────────────────────────────────────────────┐
│  REGRESSION ALERT                                           │
│                                                             │
│  Scan from Jan 15 vs Jan 8:                                │
│                                                             │
│  New Issues: +5                                             │
│  ├─ 2 Performance issues                                    │
│  ├─ 2 Best practice violations                              │
│  └─ 1 Deprecated pattern                                    │
│                                                             │
│  Resolved Issues: -3                                        │
│  Health Score: 78 → 72 (-6)                                 │
└─────────────────────────────────────────────────────────────┘

Scan Types

Quick Scan

  • Checks for critical and high-severity issues only
  • Scans core template files
  • Completes in 1-2 minutes
  • Best for: Daily checks, CI/CD integration

Full Scan

  • Comprehensive analysis of all files
  • Includes all severity levels
  • Checks all file types
  • Completes in 3-5 minutes
  • Best for: Weekly audits, pre-deployment checks

Targeted Scan

  • Focus on specific file types or directories
  • Customizable scope
  • Variable completion time
  • Best for: After specific file changes

Theme Code Viewer

View your theme code directly in PeerScripts:

Features

  • Syntax Highlighting: Liquid, JavaScript, CSS, JSON
  • Issue Markers: Visual indicators for detected issues
  • Line Navigation: Jump to specific lines
  • Search: Find text within files
  • File Tree: Browse all theme files

AI Assistance

The code viewer includes AI-powered assistance:

  1. Select code or click an issue
  2. Click Ask AI
  3. Get explanations, suggestions, or alternative implementations

Best Practices

Scanning Frequency

Scenario Recommended Frequency
Active development After each significant change
Stable theme Weekly
Before deployment Always
After theme updates Immediately

Prioritizing Fixes

  1. Critical issues first: Always address security vulnerabilities
  2. High severity next: Performance impacts customer experience
  3. Group related issues: Fix similar issues together for efficiency
  4. Document exceptions: If ignoring an issue, document why

Development Workflow

  1. Develop on unpublished theme
  2. Run full scan before publishing
  3. Address all critical/high issues
  4. Run quick scan after each major change
  5. Compare with live theme before swapping

Common Issues Reference

Performance Issues

Issue Impact Fix
Large uncompressed images Slow page loads Compress and resize images
Render-blocking scripts Delayed page render Defer non-critical scripts
Excessive HTTP requests Slow page loads Combine and minify assets
Large Liquid loops Server processing time Limit iterations, use pagination

Security Issues

Issue Risk Fix
Unescaped output XSS attacks Use escape filter
Hardcoded API keys Data exposure Use environment variables
Mixed content Browser warnings Use HTTPS for all resources
Outdated libraries Known vulnerabilities Update to latest versions

Best Practice Violations

Issue Impact Fix
Missing alt text Accessibility, SEO Add descriptive alt attributes
Non-semantic HTML Accessibility Use proper heading hierarchy
Inline styles Maintainability Move to CSS files
Duplicate code Maintenance burden Create reusable snippets

Integration

Webhooks

Receive notifications for scan results:

{
  "event": "theme_scan_completed",
  "theme_id": "123456789",
  "health_score": 85,
  "issues_found": 12,
  "critical_count": 0,
  "high_count": 3
}

API Access

Programmatically trigger scans and retrieve results via the API.


Troubleshooting

Scan Fails to Start

  • Ensure the theme exists and is accessible
  • Check your Shopify API permissions
  • Try refreshing the page

Scan Takes Too Long

  • Large themes may take longer
  • Try a quick scan instead
  • Check for extremely large files

False Positives

  • Use the Ignore feature for false positives
  • Ignored issues won't appear in future scans
  • You can un-ignore from the Ignored Issues list

Related Features