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
- Go to your Shopify Admin Dashboard.
- Navigate to Online Store > Themes.
- Click on the three dots (⋯) next to your theme.
- 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.liquidorbase.css).
Option 3: Search Code Across All Files
- Click the magnifying glass icon (🔍) in the sidebar.
- Type a keyword (e.g., “copyright”).
- Results will show every file containing that code.
Step 4: Creating a New Section or Template
Adding a New Section
- In the File Explorer, go to
Sections. - Click the
+(New File) button. - Name it (e.g.,
testimonial-section.liquid). - Paste your code (or use a free section from my YouTube channel).
- Save (
Ctrl + S/Cmd + S).
Adding a New Template
- Go to
Templates. - Click
+(New File). - Name it (e.g.,
product.custom.liquid). - Add your code and Save.
(Alternatively, create templates via Theme Customizer > Templates > Create Template.)
Step 5: Using Auto-Save & Version History
Auto-Save Settings
- Click the gear icon (⚙️).
- Go to Settings.
- Choose when to auto-save:
- After delay
- On window change
- When you stop typing
Restoring Old Versions
- Click the clock icon (🕒) in the top-right.
- Select a previous version.
- Click “Restore” to revert changes.
Step 6: Comparing File Changes
- Duplicate a file (right-click > Duplicate).
- Make changes to the copy.
- Right-click the original file > Select for Compare.
- Right-click the modified file > Compare with Selected.
- See differences side-by-side.
Step 7: Previewing & Publishing Changes
- Click the Shopify logo (🛍️) in the top-left.
- Select “Preview” to test changes.
- 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! 🚀
