I was coding HTML/CSS/liquid files in Shopify this last week. Those are the languages they use, with a little JSON thrown in. I was using their built-in behind the scenes editor to make changes and while it is functional, it’s a pretty basic editor.
That was OK at first. In the beginning, I didn’t realize how deep I’d need to go to tailor a shop to my customer’s needs – and those needs weren’t all that complex or unique. I kept having the grumbly feeling Shopify should have more features built in. Spoiled? Yes, I am.
A whole lot of modifications to Shopify layouts are done with cut-and-paste but then some involve writing CSS or HTML from scratch, too. Just a smidge here and a pinch there, but it adds up. Sometime around 2am last night, just as a fox started barking in our backyard, I realized I was losing too much time on stupid things like syntax errors. It was well past time to switch to a proper code editor. Today, I begin using Microsoft’s free Visual Studio.
It was div tags that decided me. Web pages use a lot of them to delineate sections and define their styles. A code editor will make sure they are always in pairs, one to open a section and one to close it. A simple text editor does not check for that and it can cause a mess if they’re not right. Once I saw Visual Studio has vertical lines drawn to the left of the code that show which sections are bounded by a matching pair of div tags, I had to switch.
The learning curve was what stopped me till now. Visual Studio is powerful and with great power comes great amounts of time spent learning how to control it. I don’t have time to devote to that right now, so I’ll use the basic, helpful features and learn as I need to.
If you’re adapting code in a Shopify store, you need this: Shopify Cheat Sheet
You might also be interested in…
Video by codeSTACKr : Brackets Is Dead – Switch To VS Code