Signature Works LLC - Your Shopify Plus partner

Building shopify themes is not simple any more as it was used to in 2012. I remember, it was just plain old liquid with HTML, CSS and Javascript with couple of templates.

Because of very fast development of web standards and rapid change in ranking algorithms, development workflows have also advanced to incorporate everything in the code to make the web fast, easy to navigate and improve user experience. This added a lot to the developer’s plate, in order to keep in mind what to follow and what not.

If you are looking to build a great theme for your shopify store, Signature Works provides provides professional Shopify development services.

In order to build a great shopify theme, there are couple of things you should keep in mind and follow.

Shopify theme development Basics

Of course, basic knowledge of HTML, CSS and Javascript is required in order to build the theme. In conjunction with that, you should also have firm grasp of Liquid – Shopify’s templating language. You can learn all about liquid over here

Also Shopify has created a set of documentation on theme development on how to create the theme’s architecture. The basic building blocks of a shopify theme, templates, assets, snippets and layouts. It contains all the standards and must haves to follow. You can find it in the link given below.

Important Links:

• Liquid Cheatsheet: Find it here
• Theme Architecture : Find it here

Vanilla Javascript

By Vanilla javascript, we mean plain old javascript.

We are now ahead of those times when integrating a framework or library for each feature was encouraged. It resulted in very low page loading speed because of all the extra code that frameworks had.

Today, the usage of plain old javascript is encouraged at every step, in order to have the least amount of code specific to functionality. So, if you are going to develop a new shopify theme or extend an existing one, please try not to use any framework, instead write vanilla javascript to acheive your desired specification.

Online Store 2.0

Of course, Shopify is very ahead of old times now. Shopify introduced online store 2.0 as part of its storefront, which includes adding sections, blocks and other data structures to facilitate merchants, so they can add multiple versions of same data structure without copying/editing the code.

Data structures are defined using JSON in liquid’s schema tags in each section to define settings for merchants which are then turned into an interface in Shopify theme customizer.

Online store 2.0 also introduced JSON templates instead of liquid. Each template has a .json extension instead of .liquid and has JSON inside it. That JSON structure automatically changes with each change merchant makes in the theme customizer. There are a lot more features which are introduced as part of this standard in Shopify, you could read about them here.

If you are building a shopify theme, or are doing a customization for any client, you should prefer the use of Online store 2.0 functionalities provided by shopify.

Shopify Theme CLI

Very important tool in building shopify theme, provided and maintained by Shopify itself. You can use Theme CLI to setup your environment for development.

You can setup a new theme for development quickly by running the following command:

shopify theme init

and then you can run the following command to setup fast paced development environment

shopify theme dev --store=yourstore.myshopify.com

Conclusion

There is a lot more to building shopify themes than these basic, but this is a quickstart that you can follow in order to grow and learn more. Shopify has also written straightforward documentation to all the basic tools and workflows you need to follow in order to develop for Shopify.
Follow us and Subscribe to our weekly newsletter for more Shopify guides like these.

Happy Coding!