Thousands of merchants visit the Shopify theme store to find the perfect look for their eCommerce store. However, not all of them find what they are looking for. If you want to know how to build a Shopify theme from scratch, you are in the right place. 

Making a Shopify theme from scratch can be a daunting experience. Getting familiar with a new platform is never easy. With that in mind, we carefully prepared this ultimate guide to help you make your own Shopify theme. Check it out!

What is a Shopify theme?

A Shopify theme is a template that decides the overall look and feel of your website. Different themes come with different styles and layouts that make customers’ impressions. On Shopify theme marketplace, you can find both premium and free pre-built visual stunning themes.

The significant advantage of pre-built themes is the ability to set-up and sprint. Instead of spending many weeks/months to completely build a custom online store, with a pre-built Shopify theme, you can take a store from conception to launch successfully in hours (or less). Also, using a pre-made Shopify theme keeps your costs low because you do not need to pay for a developer or sink too much time into line-by-line customization. All you have to do is click on the theme installation button. Then. with minimal adjustments and flexible branding options, you can quickly personalize the theme to give your store a unique appearance.

However, there are some disadvantages of a pre-built Shopify theme such as limited scalability designed for non-technical users, and limited customization. In addition, available Shopify themes often are often designed for aesthetic rather than significantly for conversions. These are the reasons why you should build a Shopify theme from scratch. 

A custom Shopify theme powers you with more control over scalability from the layout to every element on your store. Besides, you can freely implement and test the content and element placements to see how they impact the customer’s shopping experience and store conversion rate.

>>>> Read more: Shopify – Best 9 Shopify FREE themes of 2020 for beginners

How to build a Shopify theme from scratch 2020?

Planning and analyzing

build a Shopify theme from scratch 1

To start creating a Shopify theme, make sure you not only have all the technical knowledge but also the non-technical requirements. You need to review the different Shopify theme design options. There are some themes coming in handy while you find out your own ideas or let creativity take over. However, you should remember that your custom theme should have considerable differences from the available Shopify theme. If it won’t stand out from others, why you need to waste your time building a Shopify theme from scratch. 

Let’s start with analyzing the existing Shopify theme options and find out what is lacking, which may include the specific needs of your targeted niche market. 

For instance, additional demonstrations of specific product features or extraordinary layout styles should be considered. Figuring out your source of inspiration and ensuring that what you create will be outstanding in the Shopify theme market.

In case you build a Shopify theme from scratch for a client, rather than for your own business, make sure that you fully understand their requirements. It is costly to make a custom Shopify theme, so there is no way to start the process without a definite concept of the final results. 

Familiarising with the Liquid code

Whether you are customizing a merchant’s existing theme or building a Shopify theme from scratch, you will need to be familiar with Liquid – a Shopify’s open-source template language. If you have never heard about it before, don’t worry! We promise that it is easier than you think. 

There are tons of useful resources to help you get started with Liquid and make your Shopify theme. Below are a few notable ones:

  • Shopify Liquid Code examples: A searchable library of theme component-based Liquid examples. You can add them directly to your theme to build and customize it faster.
  • Shopify’s Liquid Reference documentation: A comprehensive and complete reference to Liquid that covers Liquid basics and shows you how to utilize tags, objects, and filters. 
  • Shopify Liquid Cheat Sheet: A simple and detailed cheat sheet for building Shopify themes with Liquid. This page contains examples of most Liquid syntactical elements and their purpose description.
  • Theme Kit: A command-line tool for Shopify themes which helps you to work locally on your computer and upload automatically to your Shopify store. 
  • Shopify theme template documentation: An useful resource for learning the ins and outs of making Shopify themes, including typical Liquid template files used as the basis for most Shopify themes. 
  • Shopify Design Tutorials: These 24-video tutorial series help you easily work with Liquid and design Shopify themes. Just one thing to remember is that there are somethings in videos has changed.

Learning with Shopify Partner Academy

learn with Shopify partner academy

To build a Shopify theme from scratch, you need to understand Shopify’s core features and functionality as well as tools and frameworks of front end development. Fortunately, there are several self-study and fundamentals courses in Shopify Partner Academy, which power you shorten your path to success as a Shopify Partner. Just sign-up a Shopify Partner account and get access to these free courses. Here are some useful courses you should consider when building your own Shopify theme:

Here are some useful courses you should consider when building your own Shopify theme:

  • Shopify Fundamentals: This course will help you become familiar with Shopify’s core features and functionality. 
  • Shopify Plus Fundamentals: In this course, you will learn how Shopify Plus powers high-volume merchants with scalable, customizable, and secure solutions.
  • Design and Theming Fundamentals: This course will show you how to build extraordinary customer shopping experiences with front-end development tools and frameworks.

Making the Timber framework become your friend

Timber is an open-source framework that can help you easier to build a Shopify theme from scratch. It can become a great starting point and a valuable tool for a designer of any level. Also, there are a lot of additional tools that can power you to make your custom Shopify theme. For example, templates, pieces of code that can be adjusted to meet your personal needs and requirements. Besides, you can use snippets and some other useful components.

With Timber, you do not need to worry about backend integration as it is already taken care of.  Instead of spending time repeating steps over, now you can focus on doing interesting things on your website interface to effectively attract and interact with users. 

>>>> Read more: Shopify theme detector: Find out what theme your favorite shops are using!

Learning the Shopify Asset CDN

Every asset from images fonts, CSS, and JavaScript that you drive up to the server, is automatically deployed, concatenated, minified (except for JavaScript), gzipped, and finger-printed on Shopify’s CDN. With the templating language, you can get asset helpers to reference the assets. 

Therefore, for asset packing and delivery, you own all the necessary things. However, it may cause some problems while developing because you are looking at minified CSS. The JavaScript is not uglified or minified.

Theme development workflow

Below is a typical workflow for a single feature branch:

Step 1: Pull from the master and check out a new branch.

Step 2: Log in to Shopify admin

log in Shopify store

Step 3: Duplicate the live theme

Duplicate Shopify theme

Step 4: Rename the duplicated theme

Rename the duplicated theme to your branch name

Rename the duplicated theme

Step 5: Click on Customize them option

Tap on Customize theme of your new branch name

Customize duplicated theme

Step 6: Note the theme ID in the URL

For example: /admin/themes/108432720023/editor

build Shopify theme from scratch 2

Step 7: Edit config.yml

Edit the theme_id in config.yml to point to your branched theme.

Step 8: Theme watch and do your work

Step 9: Preview your work

You can browse to that theme in Shopify admin and clicking on Preview

build Shopify theme from scratch 4

Step 10: Pull Request

Step 11: Rebase onto master, push to master repo

Step 12: Delete your branch (local and server)

Step 13: Delete your branched theme in Shopify admin

Deployment stage

The next phase is to deploy. In this stage, please follow the below steps to force-deploy the theme in the master branch onto the production site:
Step 1: Make sure to kill your local theme watcher
Step 2: Remove your theme ID (to point it to the live theme)
Step 3: Theme upload to push master onto the primary theme

If you have deleted files, you can also run theme replace.

Then, you are ready to push master onto the published theme, as well as you blacklisted the setting_data.json.

Final words

Alright! We together go through the ultimate guide to build a Shopify theme from scratch 2020! Hopefully, now you are more confident to start making your own stunning and high-converting Shopify theme.

Let’s make your awesome ideas turn into a reality that will bring more value to your potential customers and increase your revenue from your Shopify store! 

Leave a Comment

© AllFetch 2021

For business enquiries: [email protected]

About Us