DE
E-Commerce Oct 03, 2020

How to Build a Custom Shopify Theme From Scratch: Best Tutorial

Jane Vyshnova

Jane Vyshnova

CEO

Author

Daria Diachenko

Daria Diachenko

Copywriter

Author

How to Build a Custom Shopify Theme From Scratch: Best Tutorial

Time to read: 15 minutes

Content

  1. What is Shopify Online Store 2.0?
  2. Shopify Online Store 2.0 Changes
  3. Benefits Of Shopify Online Store 2.0
  4. Plan the theme before crafting it
  5. Familiarize yourself with the Timber framework
  6. Make Liquid your best friend
  7. The theme review process is part of the task
  8. Make sure to match CSS and template structures
  9. Variety of Ecommerce Theme Builders
  10. Best Shopify Custom Theme Development Receipt: Conclusion

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.

Have a project in mind?

Lets talk about it

Request 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.

tricks is to create a custom Shopify theme

Of course, there is no easy answer to “How to create a Shopify theme from scratch ?”. It might be quite difficult as you’d have to know the platform itself, together with a few UI/UX design tricks, Javascript, and more.

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.

 review the different Shopify theme design options

What is Shopify Online Store 2.0?

Shopify Online Store 2.0 is the next generation of online shopping, offering a more streamlined and efficient experience for both shoppers and merchants alike.

Some of the new features in Shopify Online Store 2.0 include:

Shopify Online Store 2.0 provides a more user-friendly and efficient experience for both shoppers and merchants, making it the ideal platform for online shopping. Let's summarize what Shopify 2.0 is in the video below:

 

Shopify Online Store 2.0 Changes

Shopify Online Store 2.0 was released in April of this year and brought with it a number of changes that have implications for store owners and developers. The most notable change is the switch to a new, responsive theme called "Debut" which is designed to work across all devices. Other changes include an updated checkout process, new order management features, and a number of smaller tweaks and improvements.

For store owners, the biggest change is likely the switch to the new responsive theme. This can have a significant impact on your store's design and layout, and may require some changes to your existing theme or customizations. The good news is that Shopify has made it easy to switch between the old and new themes, so you can experiment and see what works best for your store.

For developers, the biggest change is the switch to using Shopify's new GraphQL API. This new API provides a more efficient way to query data from Shopify, and opens up a number of new possibilities for building custom applications and integrations. If you're currently using the Shopify API, you'll need to update your code to use the new GraphQL endpoint.

Overall, the changes in Shopify Online Store 2.0 are mostly positive and should make for a better experience for both store owners and developers. If you have any questions about the changes, or need help updating your code, please feel free to reach out to Dinarys. We're always happy to help!

Benefits Of Shopify Online Store 2.0

As an online retailer, you are always looking for ways to improve your business and reach more customers. One way to do this is to upgrade to Shopify Online Store 2.0. This new version of Shopify offers many benefits that can help you grow your business.

Some of the benefits of Shopify Online Store 2.0 include:

Increased Sales

With the new features and improvements in Shopify Online Store 2.0, you can expect to see an increase in sales. The improved design and layout will make it easier for customers to find what they are looking for on your site, and the additional payment options will make it easier for them to complete a purchase.

More Traffic

The improved design and layout of Shopify Online Store 2.0 will also help to increase the amount of traffic to your site. This means more potential customers will see your products and services, and you may even see an increase in search engine ranking.

Better Customer Service

With the new features in Shopify Online Store 2.0, you will be able to offer better customer service. The improved order management system will allow you to keep track of orders and customers more easily, and the live chat support will allow you to quickly resolve any issues that customers may have.

More Products 

Shopify Online Store 2.0 also comes with a number of new features that will allow you to add more products to your site. With the ability to create product pages, you can showcase all of the products that you offer in one place, making it easier for customers to find what they are looking for.

Improved Security

Shopify Online Store 2.0 also offers improved security features. With the new SSL certificate, you can be sure that your site is secure and that your customers' information is safe.

These are just a few of the benefits of Shopify Online Store 2.0. If you are looking for ways to improve your online business, this is one upgrade that you should consider.  With the increased sales, traffic, and customer service that you can expect, Shopify Online Store 2.0 is an investment that will pay off in the long run.

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:

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.

 Theme Kit is a useful cross-platform tool that can assist with Shopify theme development.

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:

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.

Magento

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.

Standard theme

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

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:

Shopware

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.

Let professionals meet your challenge

Our certified specialists will find the most optimal solution for your business.

Please enter valid name
messages.form.validation.company
Please enter valid name
Please enter valid E-mail
Message is too short

Your message has been successfully sent. We will be in touch shortly! Success icon