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.
Lets talk about it
Have a project in mind?
Lets talk about itRequest a quote
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 a 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.
The good news is that having a desire is the first step on the road to success, and we will be happy to share some additional tips with you on Shopify custom theme development.
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.
For those thinking to choose Magento for their website, we recommend reading our guide on Choosing a Magento 2 B2B Theme.
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.
The 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.
Variety of Ecommerce Theme Builders
As we know, Shopify is one of the most popular ecommerce platforms, but not the only one. We advise you to consider different variants, before choosing what to go with. At Dinarys, we tend to recommend taking a look at Magento and Shopware. Let’s see why.
An interface in Magento consists of one or more themes, which together make up what you see in your store, as well as how it looks in the eyes of your customers.
A theme in Magento is what determines the look and feel of the store. Interfaces can have multiple themes assigned to them in Magento, allowing seasonal images to be used during specific periods, such as Christmas or Thanksgiving.
The default theme in Magento is the main theme of the interface. Magento looks for this default theme and loads it into the online store interface (this is the part your customers see).
The default theme should contain all the elements that a visitor will come across when visiting our store, such as shopping cart, checkout, and so on. If your theme does not use these elements, then you do not need to include these elements in your theme by default.
Custom themes allow you to create seasonal looking online stores by applying as many or as few additional design elements like CSS or images as you need. Custom themes can also be used to customize your store to:
- Create a different look or layout for specific product pages that require less (or more) information than regular products.
- Provide a way to display new products or even products that are coming soon, without allowing customers to add them to their carts.
- Customize some aspects of your store to meet the requirements of specific countries, like customers expecting a button elsewhere on a website in the country.
Shopware was designed according to the principle "form follows function". The pursuit of a consistent flat design results in a clean and modern look. It was developed with the idea of an even smarter and easier operation for the shop customer. Open templates as a basis enable, on the one hand, many standard adjustments in the backend, and on the other hand, Shopware can be completely individualized. Responsive design enables the customer to have the same user experience across all devices. The interaction of tested usability and optimized checkout process increases the conversion rate significantly.
You may be interested in How to Quickly Make an eCommerce Website with Shopware.
Cost to Develop a Custom Theme
Wondering how much developing a custom theme might cost? In fact, the final price depends on your future theme complexity as well as your developers’ rates. The hourly rate of a Shopify, Magento, or Shopware developer heavily depends on their location. Thus, developing a Shopify team with a US-based team will cost approximately $5,000-15,000- depending on your team features. If you choose other locations, such as Eastern Europe, the cost will go down to $3,000-$7,000.
Do lower rates mean lower quality? In fact, developers’ rates depend on their local salaries - therefore, you can hire a skilled programmer and save budget at the same time. We recommend carefully analyzing your development agency portfolio and previous experience before making a final choice.
When it comes to development costs, it is important to request a custom quote to get an accurate pricing for your particular project. Don’t hesitate to contact our team to get a dedicated offer.
Best Shopify Custom Theme Development Receipt: 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.
When you create a custom Shopify theme, you start to understand that 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 turn the idea into a reality that will add value to your potential and increase your income in the e-commerce market. However, if you already have a business and are ready to expand, we advise you to pay attention to creating themes for Magento or Shopware platforms. They are flexible enough, and creating a unique theme will help you stand out from the competition and rank above your competitors in search results.
Want to read more
Get fresh articles, news and case studies to your email firstly