Shopify's New Code Editor - Beginners Guide (for non-developers)

A quick-start guide to Shopify's new code editor that was released in August 2025. The new editor is based on VS Code - a tool for professional developers, so it has many options and features that are confusing to non-technical users. However, most of those can be ignored. You can use it effectively knowing just a few basics. 1. *Search for files* using Cmd+P 2. *Search inside a file* using Cmd+F 3. *Search inside ALL files* using Cmd+Shift+F 4. Press Enter to *rename a file* 5. Right click on a file → Open Timeline to *see version history* 1. On the left is the old version, on the right is current version. Highlighted in green are your additions, and in red your deletions. 2. Right click on a version → *Restore Contents* to go back to that version 6. Cmd+Shift+P and search 'format' to *format a document* and make it pretty 7. Right Click → Select for *Compare* , then select another file Compare with Selected. Useful when you duplicated a file to work on. 8. Gear Icon → Settings to *change font size* 9. Gear icon → Themes to *change color theme* This is actually VS Code for the web running inside the Shopify admin. Find more info about VS Code here: - VS Code Web Docs: https://code.visualstudio.com/docs/setup/vscode-web - VS Code Web: https://vscode.dev/ 👉 RELATED VIDEOS Shopify Coding 101: https://youtu.be/5z2D7dLmhfk 📢 STAY UPDATED Subscribe for more tips & tricks that I don't publish on Youtube: https://ed.codes/newsletter 🙏 SUPPORT THE CHANNEL Become a member - https://www.youtube.com/@EdCodes/join 🛠 CODE SHOP Pre-built sections & blocks. Easy copy & paste to install. https://ed.codes/shop 👍 MY FAVOURITE APPS & THEMES All listed on my website - https://ed.codes/resources 📚 MY SHOPIFY CODING EBOOK Learn HTML, CSS and Shopify Liquid from the beginning and specifically for Shopify. https://ed.codes/shopify-coding-handbook 👨🏼‍💻 WHO AM I? 👋 My name is Eduard. I'm a web developer specializing in Shopify. I want to help you