Build Better Custom Shopify Sites With the Help of This Article

Manage your work better with version control

You may want to use themes to control the source code, but a better choice would be putting your code base in a repository. This will grant an organized code, it will prevent the loss of your work and will give you a history of all your codes. If things don’t go as intended, you can always go back to a stable theme version.

If you use the version control, you might encounter problems with themes, branches, multiple developers, features and many other changes that happen through the online Shopify’s editor. Use a system that’s good for you.

Grunt is the best choice for your Sass and JavaScript compiling

When it comes to bigger projects, you’ll need to make a structure to your CSS and JavaScript. Sass is a good program for CSS. Shopify has it, too!

For JavaScript, just as for the Sass, you’ll need to split the files into directories, wait for the changes to take place, and put everything into one file within the assets directory. This will help you in keeping everything organized and the amount of files for JavaScript will the reduced when it comes to page load.

The files can get large, so you’d better load it on the top of thetag. Most browsers support the sync attribute, you’ll need to use it if you want to be sure that your page’s rending will not be held up when you’re starting the request. Don’t forget to wrap the DOM logic in a document-ready function. By doing this, you’ll load the entire file at before the end of the body tag without having a single worry about the DOM execution.

You should know when to use JavaScript and not Liquid

Liquid is not and will probably never be a programming language. It’s supposed to help you output the data that you’re working with and create some markups. It’s advisable to do logic in Liquid, but sometimes things run more clearly with JavaScript.
After encountering problems such as endless string appends, you can put all the data into a JavaScript object and start working it there.

You should abstract for as much as you can

Let’s say you are building a theme for a certain client. What you need to remember is that they’ll represent an important part of the store. A Shopify developer would advise you to do in such way, that you’d abstract the features found on the site for as much as you can.

Join the discussion