Unlike its counterparts, Shopify has become a household name for anyone contemplating about starting an online store. With a wide range of features, it has been successful in luring its customers and has evolved its themes and suitability to cover as many business types as possible. As the time passes, many flocks to Shopify to search for the perfect theme for their first store.
Starting with Shopify may sound every exciting and easy in the first go but it can be very daunting once you start building your site. Finding your perfect theme is just the beginning. What follows is much more than just using the theme as it is. As Shopify developers, you need to have a solid development rhythm to determine how your site will turn out. Though the platform is most sought after for building an online store, yet for you, it is new. Getting familiar with it may take some time and will require some experience and knowledge about how things can be tweaked to work for you uniquely.
At WebBee Global, we love building custom Shopify apps and themes. We have already spent ample amount of time in research and development with a variety of methods. Some have worked while others were lessons learned. But nevertheless, the experience has been nurturing and that is why we have compiled a few points for developers to keep in mind while building sites on Shopify.
Use these development tips as milestones to create feature rich Shopify sites for yourself and your clients:
1. Utilize Version Control for Managing the Work
Many developers use multiple themes to store and control the source code. Although there may be a temptation to do so, you will be better off storing the code base in a remote version repository. The reason behind this is, through this method, the code remains organized, prevented, and offers a complete history of all changes. Later, in case, things go south, you can always switch back to a stable theme version easily.
Another point is how do you manage themes, branches, features, multiple developers, and changes that happen through the online Shopify’s editor after you start using version control. If you have multiple developers working on the same store, ensure that each dev works on separate branches and themes. Keep the master branch “production ready,” and merge it only after the other branches have been tested within the theme. This way you won’t inadvertently publish any half-done work.
Best practice is this case would be to download the changes made within the online theme editor and incorporate them into your repository after they have been made.
Be careful to merge the changes in the correct order and know what commit you make. This ensures all changes are checked into the repository before going to the store and the repo manages the code and not the themes.
2. Focus More on the Shopify Theme Gem to Develop Locally
Even though Shopify is cloud based, you can’t challenge leaving a local instance of the software and achieve to work locally. A better approach would be to upload theme files and directly view the changes on an online Shopify store. Make judicial use of the Shopify Theme Gem through which you can actively keep a watch on your directory and can upload files automatically to the theme as you have to save files.
However, at times when you work on a small project with minimal changes, working on the online editor is a safe option. Editing online would means you’ll never face issues with overwriting a file that’s out of sync with your local changes.
3. Spend some time with Liquid
Liquid is a highly decipherable and communicative Ruby-based language which acts as an intermediary between a store’s data and its theme templates used by Shopify. If you are brand new to Liquid, it’s time to familiarize yourself with it.
Reading about Liquid will help you to gain knowledge on how you can leverage the power of alternate template and layout files. It is easier than you think and will facilitate you to customize your site professionally.
4. Allow Grunt for Sass and JavaScript Compiling
Remembering that Liquid isn’t meant to be a programming language but to be used for creating markups to the output data you are working with is important. Handing the data to JavaScript is sometimes a better choice, especially for large projects where you might find yourself stuck in endless loops.
Since Shopify has a Sass parser, you can use it to compile and structure the CSS and JavaScript. A number ways and methods can be used to do this. The simplest way is to create a folder name ‘Sass’ within the root directory of the theme, to contains various folders and files.
Allow Grunt task for Sass and JavaScript compiling which brings it into one valuable file of the assets directory. This will ease out the work for you and will be more elegant than using Liquid to do the same.
5. Abstract Whenever Possible
A simple thumb rule says, when you build a theme for a client, your theme shouldn’t store data. The theme should be built without hard coding as much as possible and remember to abstract whenever possible. Since your client will be the primary user of the site, use relatable content and keep it simple. The reason behind this is to enable the client to manage the site without bothering you for simple updates.
6. Check Load Times and Performance
Always keep a tab on how your site is performing with every feature you add during the development. You can use Google Chrome Developer Tools for quick performance testing and to find bottlenecks within themes.
Check Images, JavaScript, and CSS compression as they are the most obvious ones. But also look out for intense Liquid and JavaScript computation. If possible, do not render content on the page that is primarily hidden.
7. Make Good Use of Snippets
Another great way to break up logic into separate files is to make use of Liquid Snippets. Snippets are easy to understand than markups and it is better to have them. It helps in saving time that most of us waste in hunting down that one unclosed div tag that’s impossible to find.
With the use of Snippets, your content is organized logically and markup becomes easy to follow. This also eliminated duplication. Make use of snippets to reuse a section of markup in multiple files.
8. Build Your Own JSON Endpoints for Dynamic Data
Making use of template views can make all the difference when you are looking to create a difference in your work. Each template can be used for a separate purpose and customized for a particular view.
Customize your product pages with unique names and view parameters in the URL to tell Shopify to use a specific template. This will create the data you want on any page within the store.
Conclusion
I’m sure the above tips will help to improvise your development process for Shopify. Every project is unique and has different requirements, and therefore the best approach can be decided only after understanding the project complexity, and client’s needs.
You should stick to what works for you but keep looking for innovative ways to optimize your workflow.
