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
- Navigate to Theme Intelligence in the sidebar
- Select the theme to scan:
- Live Theme: Your published, customer-facing theme
- Development Themes: Unpublished themes for testing
- Click New Scan
- 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
- Run scans on multiple themes
- Click Compare in the toolbar
- Select themes to compare
- 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:
- Select code or click an issue
- Click Ask AI
- 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
- Critical issues first: Always address security vulnerabilities
- High severity next: Performance impacts customer experience
- Group related issues: Fix similar issues together for efficiency
- Document exceptions: If ignoring an issue, document why
Development Workflow
- Develop on unpublished theme
- Run full scan before publishing
- Address all critical/high issues
- Run quick scan after each major change
- 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
- Code Editor - Edit theme files with AI assistance
- Changes Tracking - Monitor theme modifications
- Tickets - Track issues through resolution