How to Build a Custom Shopify Theme From Scratch: Best Tutorial
eCommerce Mar 26, 2020
Main / Blog / How to Build a Custom Shopify Theme From Scratch: Best Tutorial
Creating a well-known brand is not an easy task for any brand manager nowadays. With extensive competition in all industries, there is only one way to get popular with customers – by being unique and doing whatever it takes to customize your website regularly and often. Coming up with extraordinary products is one thing, but selling something that is already on the market is a completely different story. While Shopify provides you with all the technical grounds for successful selling business, there are additional tricks you can use to increase the chances for the success of your brand.
One of the tricks is to create a custom Shopify theme that will make your online shop really stand out from other sellers in the crowd. There are thousands of competitors, but a good thing is that most of them don’t pay much attention to custom design or even the general template they use.
Instead, they go with the simplest option and choose from existing stock platforms. In the meantime, you can take your time and build your very own Shopify theme from scratch that will mirror all the essential characteristics of the business you promote and assist you in driving more loyal customers to your web store.
Plan the theme before crafting it
Ensuring you have all the technical knowledge before starting the project is one thing, but the non-technical requirements are also important. Before you start to actually build your own Shopify theme, review the different Shopify theme design options. Some of them might come in handy while you line up your own ideas or let creativity take over, but remember that the new theme should be somehow different, and the difference should be quite considerable. If it won’t stand out in the crowd, there is just no sense in wasting time on it.
To start, analyze the existing options and figure out what’s lacking, which may include the specific needs of a niche market you are trying to target.
For example, additional demonstrations of particular product features or extraordinary layout styles should be reviewed. Find your source of inspiration and make sure that what you create will be different than what already exists in a market of Shopify templates. What people want, today, are:
- Contrast colors that don’t tire the eyes
- Brevity of descriptions
- Visibility of price information
- Well-organized content
- Simple navigation
- Intuitive control of actions
If you create Shopify theme from scratch for a client, rather than yourself or your own business, make sure you clearly understand their requirements. The cost of custom development can be quite high, so there is no way to start the process without a clear vision of the final result.
Familiarize yourself with the Timber framework
There is always an easy way and a hard way, and there is no point in taking the hard route. Timber is an open source framework that significantly simplifies the process of building new themes for Shopify. It can become a great starting point for a designer of any level, which makes it quite a valuable tool.
It is possible to create a shopify theme from the very beginning using Timber, and there are also plenty of additional tools that can be of help. For example, templates, pieces of code that can be modified for your personal needs and requirements, snippets and some other useful components.
With Timber, there is no need to pay attention to backend integration as this part is already taken care of. This is great because you don’t have to spend time repeating steps all over again and can totally concentrate on doing fun things that users will actually see on screen and interact with. Theme Kit is a useful cross-platform tool that can assist with Shopify theme development. It will help you update the configuration file right on your laptop in the event that you want to use some of the defaults before adding new extraordinary features.
Make Liquid your best friend
Liquid is an open source template language that is used in Shopify. You need to know it in order to make your own Shopify theme or even to customize an existing one that requires minor tweaks. If you’ve never heard about it before, don’t be intimidated by it - there is nothing complicated about it and you’ll master it in no time. It will not provide a complete answer on how to design a Shopify theme but will make the process less complicated.
This expressive language is based on Ruby and it powers all the themes that are present on Shopify. It accesses the data of a particular store and outputs it into a relevant directory in the template. Basically, it acts as an intermediary or a bridge between the data of the merchant and the code in a user’s browser. With its help, you will be able to reach different variables without any difficulty or time-consuming procedures.
Using Liquid, you don’t need to consider the data itself. All you need is to make a template that is agnostic and can be used not only for one product but for many different items. This is optional and makes sense if you develop templates for sale for different merchants. Even if it’s not the case, this is an important tip to know. You can also use the Liquid Cheat Sheet which helps new users with markups, and also outlines different elements and includes their descriptions.
Theme review process is part of the task
There are hundreds and thousands of new themes being submitted to Shopify, but only some of them (not many!) make it to the Shopify Theme Store and are published. To make sure that your theme is good enough, even if you only plan to use it for your own store, it is important to check all the rules and regulations.
Shopify Store acceptance means that the theme is good enough and that there are no faults in it. It is never harmful to double-check during the development stage. Here are some points of high importance when the theme is being submitted for review:
- Designs for the theme’s desktop product page, collection and homepage – 3 items
- Designs for the theme’s mobile product page and homepage – 2 items
- Descriptions of the design choices
- Links to the website with your portfolio
Once the designs are approved, you can actually start building the theme to later launch it and surprise everybody with some fresh ideas. Here is a good piece on how to submit a theme to the theme store.
Make sure to match CSS and template structures
Development and maintenance are very different things. In order to make it more efficient, pay attention to the template markup and CSS. It can really simplify life if you take a modular approach and match CSS structure and the template markup structure.
Generally, there should be some polishing done before letting the new eCommerce theme go public. Shopify is a reliable platform which means that no mistake or bugs of any sort are allowed. Take your time to name all the files correctly, so that it will be easy to make amendments later, if needed.
Shopify custom theme development: conclusion
Following this simple advice, you will be able to answer the question of how to build a Shopify theme. Whether you are making it for your own store to sell some merchandise, or for your client who needs a fresh shot of original design, there are lots of opportunities with Liquid and Timber. Actually, there are even more than some people think exist - if only they knew more about the tools we reviewed in this article. Keep in mind that all the limitations that exist are there for a reason. Spending time and thinking about it further will help you realize why the limitations are in place and what their purposes are. Some developers give up and use other tools, but maybe it’s worth some time to get nose deep into the process to uncover some real advantages.
Shopify theme development is quite an interesting and rewarding process. Nevertheless, not so many great themes are being submitted, which makes it a potential market for development. Finding new ideas is just the first step while implementing them and launching real products often takes much more time.
If you have started thinking about Shopify theme development, but prefer not to bother with the details, we’d be happy to help you. Contact us at Dinarys with any questions or ideas, and let’s make the idea turn into a reality that will add value to your potential and increase your revenue in a Shopify market.
Want to read more
Get fresh articles, news and case studies to your email firstly