How to Use New Shopify Code Editor VS Code Tutorial [2025]

Shopify recently introduced a new code editor that resembles VS Code, a popular tool among developers. While this update excites coders, many store owners and merchants find it confusing.

If you’re struggling with the new interface, this step-by-step guide will help you navigate it effortlessly.


Step 1: Accessing the New Code Editor

  1. Go to your Shopify Admin Dashboard.
  2. Navigate to Online Store > Themes.
  3. Click on the three dots (⋯) next to your theme.
  4. Select “Edit code” to open the new editor.

(Note: The old editor is gone—this is the only option now.)


Step 2: Understanding the Layout

The new editor has:

  • File Explorer (Left Sidebar) – Lists all theme files (sections, templates, assets, etc.).
  • Code Panel (Center) – Where you edit files.
  • Settings & Search (Top Bar) – For file search, theme settings, and more.

Key Differences from the Old Editor:

✔ File search is faster (like VS Code).
✔ Syntax highlighting (easier to read code).
✔ Auto-save & version history (no more lost changes).


Step 3: Finding & Editing Files

Option 1: Manual Navigation

  • Click through folders (e.g., Sections, Templates, Assets) to find your file.

Option 2: Quick File Search (For Power Users)

  • Press Ctrl + P (Windows) / Cmd + P (Mac).
  • Type the filename (e.g., theme.liquid or base.css).

Option 3: Search Code Across All Files

  1. Click the magnifying glass icon (🔍) in the sidebar.
  2. Type a keyword (e.g., “copyright”).
  3. Results will show every file containing that code.

Step 4: Creating a New Section or Template

Adding a New Section

  1. In the File Explorer, go to Sections.
  2. Click the + (New File) button.
  3. Name it (e.g., testimonial-section.liquid).
  4. Paste your code (or use a free section from my YouTube channel).
  5. Save (Ctrl + S / Cmd + S).

Adding a New Template

  1. Go to Templates.
  2. Click + (New File).
  3. Name it (e.g., product.custom.liquid).
  4. Add your code and Save.

(Alternatively, create templates via Theme Customizer > Templates > Create Template.)


Step 5: Using Auto-Save & Version History

Auto-Save Settings

  1. Click the gear icon (⚙️).
  2. Go to Settings.
  3. Choose when to auto-save:
    • After delay
    • On window change
    • When you stop typing

Restoring Old Versions

  1. Click the clock icon (🕒) in the top-right.
  2. Select a previous version.
  3. Click “Restore” to revert changes.

Step 6: Comparing File Changes

  1. Duplicate a file (right-click > Duplicate).
  2. Make changes to the copy.
  3. Right-click the original file > Select for Compare.
  4. Right-click the modified file > Compare with Selected.
  5. See differences side-by-side.

Step 7: Previewing & Publishing Changes

  1. Click the Shopify logo (🛍️) in the top-left.
  2. Select “Preview” to test changes.
  3. If everything looks good, go back to Themes > Publish.

Final Thoughts

The new editor is more powerful but takes some getting used to. Once you master it, you’ll appreciate features like:
✅ Faster file search
✅ Better code organization
✅ Auto-save & version control

Need free Shopify sections? Check out my 150+ Free Sections Playlist!

Got questions? Drop them in the comments! 🚀

Vote Here

About

Leave a Comment

Your email address will not be published. Required fields are marked *