Features

Code Editor

The Code Editor provides a built-in environment for editing Shopify theme files with AI assistance. Make changes directly within PeerScripts without switching contexts.

Code Editor

The Code Editor provides a built-in environment for editing Shopify theme files with AI assistance. Make changes directly within PeerScripts without switching contexts.

Overview

When Theme Intelligence detects issues, you often need to fix them in code. The Code Editor provides:

  • Direct Theme Access: Browse and edit all theme files
  • Syntax Highlighting: Support for Liquid, JS, CSS, and JSON
  • AI Assistance: Get help understanding and fixing code
  • Issue Integration: Jump directly to problematic code
  • Safe Editing: Protection for live themes

Getting Started

Accessing the Code Editor

  1. Navigate to Code in the sidebar
  2. Select a theme to edit
  3. Browse the file tree
  4. Click any file to open

Theme Selection

┌─────────────────────────────────────────────────────────────────┐
│  SELECT THEME                                                   │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │ 🔒 Dawn (Live)                                          │   │
│  │    Status: Published  •  Cannot edit directly           │   │
│  │    [Create Copy]                                         │   │
│  ├─────────────────────────────────────────────────────────┤   │
│  │ ✏️  Development Theme                                    │   │
│  │    Status: Unpublished  •  Ready to edit                │   │
│  │    [Open]                                                │   │
│  ├─────────────────────────────────────────────────────────┤   │
│  │ ✏️  Feature Branch Theme                                 │   │
│  │    Status: Unpublished  •  Ready to edit                │   │
│  │    [Open]                                                │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│  ⓘ Live themes are protected. Create a copy to make changes.  │
└─────────────────────────────────────────────────────────────────┘

Important: The live theme is protected from direct editing. Create a copy or edit an unpublished theme.

Editor Interface

Layout Overview

┌─────────────────────────────────────────────────────────────────────────┐
│  CODE EDITOR                                    [Theme: Development]   │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌──────────────┐ ┌────────────────────────────────────────────────┐   │
│  │ FILE TREE    │ │ sections/header.liquid                         │   │
│  │              │ ├────────────────────────────────────────────────┤   │
│  │ > assets     │ │  1 │ {% comment %}                             │   │
│  │ > config     │ │  2 │   Header section with navigation          │   │
│  │ > layout     │ │  3 │ {% endcomment %}                          │   │
│  │ > locales    │ │  4 │                                           │   │
│  │ v sections   │ │  5 │ <header class="header">                   │   │
│  │   header.liq │ │  6 │   <div class="header__inner">             │   │
│  │   footer.liq │ │  7 │     {% render 'logo' %}                   │   │
│  │   ...        │ │  8 │     {% render 'navigation' %}             │   │
│  │ > snippets   │ │  9 │   </div>                                  │   │
│  │ > templates  │ │ 10 │ </header>                                 │   │
│  │              │ │    │                                           │   │
│  │              │ │    │                                           │   │
│  │              │ │    │                                           │   │
│  │              │ ├────────────────────────────────────────────────┤   │
│  │              │ │ AI CHAT                        [Ask AI]        │   │
│  │              │ │ Ask questions about this code...               │   │
│  └──────────────┘ └────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────────┘

File Tree Navigation

  • Click folder to expand/collapse
  • Click file to open in editor
  • Right-click for context menu
  • Search to find files by name

Editor Features

Feature Description
Line numbers Click to set breakpoints
Syntax highlighting Language-aware coloring
Issue markers Inline warnings from Theme Intelligence
Auto-complete Suggestions for Liquid tags
Search & replace Find text within file
Multiple tabs Open several files

Editing Files

Making Changes

  1. Open a file from the file tree
  2. Click in the editor to position cursor
  3. Make your changes
  4. Changes auto-save (or click Save)

Keyboard Shortcuts

Shortcut Action
Cmd/Ctrl + S Save file
Cmd/Ctrl + F Find in file
Cmd/Ctrl + H Find and replace
Cmd/Ctrl + G Go to line
Cmd/Ctrl + / Toggle comment
Cmd/Ctrl + Z Undo
Cmd/Ctrl + Shift + Z Redo

File Operations

Operation How
Create file Right-click folder → New File
Rename file Right-click file → Rename
Delete file Right-click file → Delete
Duplicate file Right-click file → Duplicate
Upload file Drag and drop to file tree

AI Assistance

Asking Questions

Get help understanding or fixing code:

  1. Select code (optional)
  2. Click Ask AI or press Cmd/Ctrl + Shift + A
  3. Type your question
  4. Review the AI response

Example Questions

Question Use Case
"What does this code do?" Understand unfamiliar code
"Why might this cause a performance issue?" Diagnose problems
"How can I fix this XSS vulnerability?" Security fixes
"Rewrite this to use modern Liquid syntax" Code updates
"Add proper accessibility attributes" Accessibility fixes

AI Chat Interface

┌─────────────────────────────────────────────────────────────────┐
│  AI CHAT                                                        │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │ You: What does this for loop do?                        │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │ AI: This for loop iterates through the product's        │   │
│  │ variants and creates a dropdown option for each one.    │   │
│  │ The `variant.title` displays the variant name, and      │   │
│  │ `variant.id` is used as the option value for the        │   │
│  │ cart form submission.                                    │   │
│  │                                                          │   │
│  │ However, I notice this loop doesn't handle the case     │   │
│  │ where a variant is sold out. You might want to add:     │   │
│  │                                                          │   │
│  │ {% if variant.available %}                              │   │
│  │   ...                                                    │   │
│  │ {% endif %}                                              │   │
│  │                                                          │   │
│  │ [Apply Suggestion]                                       │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │ Ask a question...                              [Send]   │   │
│  └─────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘

Applying Suggestions

When AI provides code suggestions:

  1. Review the suggested code
  2. Click Apply Suggestion
  3. Code is inserted at cursor (or replaces selection)
  4. Review and adjust as needed

Issue Integration

Viewing Issues in Editor

Theme Intelligence issues appear as inline markers:

┌─────────────────────────────────────────────────────────────────┐
│ 45 │   <div class="product-description">                       │
│ 46 │     {{ product.description }}                              │
│ 47 │     {{ customer_note }}      ⚠ [XSS: Unescaped input]     │
│ 48 │   </div>                                                   │
└─────────────────────────────────────────────────────────────────┘

Jumping to Issues

From Theme Intelligence:

  1. View an issue
  2. Click View in Code Editor
  3. Editor opens with file and line highlighted

Issue Panel

View all issues in current file:

┌─────────────────────────────────────────────────────────────────┐
│  ISSUES IN FILE: header.liquid                                  │
│                                                                 │
│  ⚠ Line 47: Unescaped user input (Security)                   │
│  ⓘ Line 89: Deprecated filter 'json' (Deprecated)             │
│  ⓘ Line 123: Missing alt attribute (Best Practice)            │
│                                                                 │
│  Click an issue to jump to that line                           │
└─────────────────────────────────────────────────────────────────┘

Asset Preview

Viewing Assets

Preview image and other assets directly:

  1. Navigate to the assets folder
  2. Click an image file
  3. Preview displays in the editor area

Supported Previews

File Type Preview
Images (PNG, JPG, SVG, WebP) Visual preview
CSS Syntax highlighted code
JavaScript Syntax highlighted code
JSON Formatted JSON view
Fonts Font information

Working with Changes

Change Tracking

The editor tracks your modifications:

┌─────────────────────────────────────────────────────────────────┐
│  CHANGES                                                        │
│                                                                 │
│  Modified Files:                                                │
│  ├─ sections/header.liquid (3 changes)                         │
│  ├─ snippets/product-card.liquid (1 change)                    │
│  └─ assets/custom.css (5 changes)                              │
│                                                                 │
│  [View Diff]  [Discard All]  [Save All]                        │
└─────────────────────────────────────────────────────────────────┘

Viewing Diffs

See what changed:

  1. Click View Diff on a file
  2. Side-by-side comparison shows
  3. Additions in green, deletions in red

Discarding Changes

Revert to the last saved version:

  • Single file: Right-click → Discard Changes
  • All files: Click Discard All in Changes panel

Theme Safety

Live Theme Protection

The live theme cannot be edited directly:

  • Prevents accidental production changes
  • Forces use of development workflow
  • Creates audit trail

Creating a Safe Copy

To edit live theme code:

  1. Select the live theme
  2. Click Create Copy
  3. Name the copy (e.g., "Development")
  4. Edit the copy
  5. When ready, publish the copy to make it live

Best Practices

  1. Always edit copies - Never edit live themes
  2. Test before publishing - Preview changes thoroughly
  3. Use version control - Export themes regularly
  4. Document changes - Add comments to explain modifications

File Upload

Uploading Assets

Add new files to themes:

  1. Navigate to target folder
  2. Drag and drop files, or click Upload
  3. Files are added to theme

Supported Uploads

  • Images (PNG, JPG, GIF, SVG, WebP)
  • Fonts (WOFF, WOFF2, TTF)
  • CSS and JavaScript
  • Liquid templates

Search Across Files

Global Search

Search all files in the theme:

  1. Press Cmd/Ctrl + Shift + F
  2. Enter search term
  3. View results across all files
  4. Click result to open file

Search Options

Option Description
Case sensitive Match exact case
Regex Use regular expressions
File types Limit to specific extensions

Best Practices

Code Quality

  1. Follow Shopify standards - Use documented patterns
  2. Comment your code - Explain complex logic
  3. Use snippets - Reusable code components
  4. Keep files organized - Logical folder structure

Performance

  1. Minimize JavaScript - Only load what's needed
  2. Optimize images - Compress before upload
  3. Use lazy loading - Defer off-screen content
  4. Avoid inline styles - Use CSS files

Security

  1. Escape output - Always use | escape for user input
  2. Validate input - Check data before using
  3. Use HTTPS - For all external resources
  4. Review dependencies - Keep libraries updated

Troubleshooting

File Won't Save

  • Check theme permissions
  • Verify file isn't too large
  • Check network connection
  • Try refreshing the page

AI Not Responding

  • Check internet connection
  • Try a simpler question
  • Refresh the chat panel
  • Check AI settings in Settings

Syntax Highlighting Wrong

  • Verify file extension is correct
  • Try closing and reopening file
  • Check for unusual characters

Related Features

More in 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

Quality Audits

Quality Audits scans your Shopify store for SEO issues, content quality problems, and accessibility concerns. Ensure your store is optimized for search engines and provides a great experience for all

Lighthouse Performance

Lighthouse monitors your store's Core Web Vitals and overall performance metrics. Track, analyze, and improve your storefront's speed and user experience.

Catalog Intelligence

Catalog Intelligence analyzes your product catalog for structural issues, pricing inconsistencies, and fulfillment patterns. Keep your catalog healthy and operations running smoothly.

All Documentation