The Definitive Guide
on Custom Shopify Theme
Development From the Ground Up
The Definitive Guide
on Custom Shopify Theme
Development From the Ground Up
16 mins readIt’s no secret people tend to make premature judgements based on appearance. When it comes to e-commerce, your website theme is the first thing the visitors are going to notice. If they find the overall look of your website to be off-putting or unappealing, they won’t hesitate to leave.
Luckily, your own Shopify theme development can remedy this issue and set your brand apart from the myriad of competition. We’ve compiled our definitive guide to give you an idea of how to create a custom Shopify theme from the ground up.
Think of your Shopify theme as a visual representation of your business that motivates visitors to engage with your store. The Shopify store theme affects the journey your customers take, from landing page to checkout. Your theme must properly portray your brand image and provide remarkable user-experience to secure low bounce rate and high conversion. If you consider developing your own theme, keep reading to find out what it takes to create a custom Shopify theme from scratch!
Table of Contents
ToggleShopify Theme Store provides numerous ready-made themes to install on your website, both free and premium. However, a lot of them are made to be visually appealing but don’t account for the specific needs some e-commerce stores may have. For that reason Shopify allows merchants to create their own custom themes from scratch.
There are three common concerns that usually push e-commerce merchants to consider a custom Shopify theme development:
Fiddling with general settings in your “Customize theme” control panel, such as changing colors, fonts, descriptions, etc, is perfectly fine and intended by design. What we’re talking about is adding custom functionality by changing the code in CSS and Liquid files of your theme.
With Shopify’s routine updates to themes, upgrading a heavily-customized pre-made theme is going to become a major headache. Shopify as a platform lacks automated ways to upgrade themes while also maintaining any customizations. That means your customized pre-made theme is going to be left out of the future updates.
For this reason, we highly encourage you to create a custom Shopify theme instead of tinkering with a pre-made theme’s code.
Custom Shopify themes are substantially more efficient than pre-made ones. The benefits of designing your own theme on Shopify include:
Needless to say, most e-commerce store owners opt for a custom Shopify theme development to attain a distinct and unique look for their website. However, exclusivity of design is not the only advantage of building Shopify themes from scratch. Being properly designed, a custom Shopify theme will keep the customers more engaged with your store as they go down the sales funnel. This catered approach will surely have a considerable impact on your conversions.
We can’t talk about the benefits of creating a custom Shopify theme without discussing the drawbacks, too. The two biggest disadvantages of a custom Shopify theme development from the ground up are:
Fundamentally, Shopify theme development will require a larger initial investment of time and money, but the outcome will bring greater value to your business. Having a custom theme means not worrying about the look and feel of your website anymore. Instead, you will free up the time to focus on other areas of the business, such as optimizing conversions and raising brand awareness.
Before we can answer the question of how to create a custom Shopify theme, we can’t stress enough how important planning is to the process. Without a proper analysis of the existing themes on Shopify Theme Store, it’s impossible to gain insights on both the technical and non-technical aspects. There are several best practices when it comes to planning your custom Shopify theme development:
Once you have a robust plan for your theme, it’s time to look into the intricacies of how to create a custom Shopify theme from the ground up. Bear in mind that all of these aspects require coding knowledge and development expertise to create a functioning custom theme. We advise you to reach out to a professional Shopify development team to get you started on the process.
Reach out to an experienced development company today!
So, how to design a Shopify theme? First, you need to have a general understanding of how Shopify theme architecture functions. Theme architecture controls how features and elements are displayed in an e-commerce store. The placement of these features, such as templates and sections, determines the overall style and feel of an online store.
In July 2021, Shopify released an update called Online Store 2.0 that introduced a new theme architecture to the platform. This update was centered around expanding customization options and presenting new developer tools to make developing custom Shopify themes and apps easier.
In addition, the update introduced a new template structure — JSON templates — which made building Shopify themes from scratch less challenging. JSON templates are more productive in the development process as they minimize the amount of data needed to render the page. This approach also allows for a more nuanced theme customization.
You can migrate your themes and apps to Online Store 2.0 following this Shopify guide. Upgrading to Online Store 2.0 isn’t mandatory. You can continue using pre-update versions of themes, which are now called vintage themes, without any errors. However, upgrading is recommended as you will be able to take full advantage of new features and improvements.
Shopify uses standard directory structure to organize theme code files. Additionally, supporting assets such as images, CSS, and JavaScript files can also be found in the directory. To help you understand how each page is organized within a theme, take a look at the image below:
Shopify theme architecture can be broken down into the following components:
Properly implementing all of these components is crucial to create functional custom Shopify themes. The great thing is that you can customize the placement, content, and look of every element inside your theme. This gives you an opportunity to create a unique brand look and optimize conversions by catering to your target audience needs.
If you want to create a custom Shopify theme, then you must learn how to use Liquid. Liquid is an open source template language created by Shopify and written in Ruby. It serves as the foundation for Shopify theme architecture and powers every theme on Shopify. Although learning a new template language can seem scary, we promise it is much easier to get your head around than you think.
Liquid simplifies the task of custom Shopify theme development by acting as a placeholder for your Shopify store’s data. Think of placeholders as pieces of code that will ultimately be replaced by the corresponding store data when the compiled theme is sent to the browser. Thus, Liquid elements serve as representations of what will be rendered on a webpage.
{% section 'announcement-bar' %}
{% section ‘header’ %}
{{ content_for_layout }}
{% section ‘footer’ %}
A template language makes it possible to reuse static elements that construct the layout of a webpage, while dynamically populating the page with data from the Shopify store. The static elements are written in HTML, and the dynamic elements are written in Liquid. Liquid uses a combination of tags, objects, and filters to load dynamic content.
A Liquid file is a combination of a standard HTML code and Liquid constructs with an easy to read syntax. It is simple to recognize since it uses a unique .liquid file extension. When working on creating custom Shopify themes, Liquid can be quickly identified by its two delimiters:
Shopify created a series of resources with technical tips and beginner how-to’s to help developers adapt to Liquid faster. Additionally, you can reference this cheat sheet to navigate through all its objects, tags, and filters when building Shopify themes from scratch. Liquid is available to download on GitHub.
As we mentioned above, the 2021 update overhauled how sections work within theme architecture. From now on, if you want to add sections to your templates, it’s best to use JSON template files as they provide more flexibility to refine the look of your theme.
"sections": {
“cart-items”: {
“type”: “main-cart-items”,
“settings”: {
}
},
“cart-footer”: {
“type”: “main-cart-footer”,
“blocks”: {
“subtotal”: {
“type”: “subtotal”,
“settings”: {
}
},
“buttons”: {
“type”: “buttons”,
“settings”: {
}
}
},
“block_order”: [
“subtotal”,
“buttons”
],
“settings”: {
}
},
“featured-products”: {
“type”: “featured-collection”,
“settings”: {
“collection”: “all”,
“image_ratio”: “square”
}
}
},
“order”: [
“cart-items”,
“cart-footer”,
“featured-products”
]
}
JSON templates are data files that store a list of sections to be rendered and their associated settings. For themes that use JSON templates merchants can add, rearrange, and customize sections right from the “Customize theme” panel.
When building Shopify themes from scratch, you must name your JSON templates according to specific Shopify template types. Each template type represents a niche of content that is displayed in your Shopify store. Such template types include product pages, collection pages, shopping cart, blog posts, etc.
For instance, a product template can be named product.json or product.alternate.json. The latter is an optional suffix that can be used to create an alternative template. This approach allows Shopify store owners to create multiple different templates for the same template types to use interchangeably. JSON templates can support all Shopify template types, except for gift_card and robots.txt, which must be Liquid files.
Keep in mind that a template can only exist as a JSON or a Liquid file, not both.
If product.liquid already exists, then you can’t create product.json. This issue can be resolved by migrating your store to Online Store 2.0 requirements.
One theme can contain up to 1,000 JSON templates with each JSON template being able to render up to 20 sections. You can add sections to a template in code, or through a theme editor once your custom Shopify theme has been published.
The process of creating a custom Shopify theme development is going to be severely incapacitated without the usage of proper tools to make development and troubleshooting easier. Luckily, Shopify presents developers with a handful of native tools that are available for free. With Online Store 2.0 update in place, some tools that we’re going to discuss are new, like Shopify CLI, and some have been around for awhile, like Theme Check. Keep reading to discover the must-have tricks every Shopify theme developer should have up their sleeve!
Shopify GitHub integration allows you to connect your Shopify store account to your GitHub repository. This integration lets you edit theme code and keep track of changes when building Shopify themes from scratch. The Shopify GitHub integration includes the following features:
To begin, you need to connect your GitHub account to your Shopify store through your theme library. You will be prompted to connect your theme with GitHub repository using a Shopify GitHub app.
Make sure the connection between the branch and the repository is properly set up. You can test it by making a small change to the theme, like changing the announcement bar, to see if a commit was made in the branch.
Having a Git repository for your theme provides you with a history and a backup in case of any errors. Any changes you make to a theme through the admin panel are automatically saved in your Git repository. The connection between your GitHub branch and your custom theme is maintained even after a theme has been published in your store.
Keep in mind that you can’t reconnect a branch to a theme after it has been disconnected. If you reconnect a branch, it will be added as a new theme.
Shopify recommends using Shopify CLI when developing post Online Store 2.0 custom Shopify themes. It is a command-line tool that not only helps develop Shopify themes and apps, but resolves many common development tasks. The list of accessible command lines in Shopify CLI is presented in an image below.
To install and run Shopify CLI you need to have one of the following downloaded on your computer:
The installation instructions will differ depending on the operating system you use. To create a custom Shopify theme, running a shopify theme init
command will clone a Git repository with an example theme to use it as a starting point. By default, this command creates a copy of Dawn, Shopify’s example theme, which we will discuss in just a moment.
During the development process, running a shopify theme serve
command will allow you to see the preview of your theme and interact with it in a browser. For that purpose, Shopify creates a development theme in your theme library. Development themes are temporary themes in your Shopify store that you use for development. They are hidden, meaning only admin or partner accounts can access them. Development themes are deleted from the store after seven days of inactivity, or when you run shopify logout
.
Dawn is Shopify’s example theme that utilizes Online Store 2.0 features, including JSON templates. You can refer to Dawn to understand the anatomy of a Shopify theme, or use it as a starting point to create a custom Shopify theme. All development themes created after the Online Store 2.0 update use Dawn as the default theme.
Dawn’s selling point is being mobile-first and optimized for loading speed. Shopify achieved that by using CSS and native browser features over JavaScript wherever possible to reduce the overall weight of a theme. Since Dawn already utilizes JSON templates, you can use it as a model when building templates and sections to your custom theme. You can download Dawn right from the Shopify Theme Store, along with viewing an interactive demo.
To help you detect and eradicate any mistakes when creating custom Shopify themes, you can use Theme Check. Theme Check is a linter created by Shopify specifically for the Liquid and JSON files that make up your theme. In simple terms, a linter is a tool that helps eliminate errors by analyzing the source code and identifying problems. Theme Check can pinpoint the following issues in a theme code:
If you’re using Shopify CLI, you can run Theme Check using a shopify theme check
command. All errors detected during a theme check are displayed directly in your console or code editor with a link to the failed check’s documentation. Furthermore, you can write your own checks in Ruby and reference them in your configuration file. This technique allows you to make Shopify themes from scratch trouble-free.
Publishing your newly made custom theme is a straightforward process. If your custom theme is connected to Shopify CLI, you can push your theme by running a shopify theme push
command. Otherwise, you can make your custom theme go live right from your Shopify admin panel. All you have to do is:
A window will come up on screen with a preview of a theme you want to publish. If you’re satisfied with it, click Publish. Your new theme will be displayed in the “Current theme” section. Any other Shopify themes you may have will remain in your theme library.
So, how much does it cost to create a custom theme in Shopify? If you’re planning on developing a custom theme yourself, the price will depend on the amount of time and effort you’re willing to put into the project. If you’re not a developer or feel you don’t have much knowledge in this sphere, then it’s best to leave the job to professionals.
Before we can get into the price ranges of development companies for custom Shopify theme development, you need to have a solid understanding of the development stages your custom theme will go through. Each of these development stages is not a one-day job and requires professionals with different specializations to work on the project. The estimated price range is based on the time it takes to complete each stage and an average hourly rate.
To create a custom Shopify theme, we at Whidegroup stick to a workflow that includes the following steps:
Now that you have insight into the workflow that we use to design a Shopify theme, you can begin assessing the price range for a custom theme.
As we mentioned previously, the exact price of custom Shopify theme development will vary depending on the professional qualifications of the company you employ and the project requirements you establish.
Generally, the main thing that affects the cost is the specialization of a development company you hire to create a custom Shopify theme. Luckily, you have multiple options to choose from.
A boutique e-commerce development company has in-depth knowledge of Shopify’s theme structure and platform-specific functionality. Such companies tackle fewer projects at a time, providing a more thorough and flexible development process.
The rates of boutique e-commerce development companies are typically higher compared to web development companies which don’t have much specialization in the industry. Such companies create e-commerce stores, blogs, forums, etc. Which means you can’t expect deep expertise and fast turnaround time for project completion which costs more in the long run. However, with a boutique development company you pay for years of experience in a niche field, faster development, and overall higher quality of the end result.
Another option you have is hiring a bigger and well-known e-commerce development company. Being well-versed in the e-commerce niche and having an experienced staff, they can provide you with quality development services and deliver a worthy result.
However, keep in mind, large development agencies assemble bigger teams to work on the projects, have established procedures and excessive bureaucracy as a result. Ultimately, they are less flexible in tailoring projects to clients’ needs. The total cost to design a Shopify theme with these companies will include the price for their big name and will undoubtedly be the highest on the market.
With all of these intricacies in mind, the estimated price range for a custom Shopify theme development is as follows:
Shopify theme creation steps
Boutique e-commerce development company ($50-$100/hr)
Big name e-commerce development company ($100-$200/hr)
Web development company ($25-$100/hr)
Shopify theme creation steps
Wireframing, hrsBoutique e-commerce development company ($50-$100/hr)
~ 20Big name e-commerce development company ($100-$200/hr)
~ 20Web development company ($25-$100/hr)
~ 40Shopify theme creation steps
UI design, hrsBoutique e-commerce development company ($50-$100/hr)
50 – 100Big name e-commerce development company ($100-$200/hr)
50 – 100Web development company ($25-$100/hr)
50-100Shopify theme creation steps
Development, hrsBoutique e-commerce development company ($50-$100/hr)
80 – 240Big name e-commerce development company ($100-$200/hr)
80 – 240Web development company ($25-$100/hr)
100 – 360Shopify theme creation steps
Testing, hrsBoutique e-commerce development company ($50-$100/hr)
40 – 60Big name e-commerce development company ($100-$200/hr)
40 – 60Web development company ($25-$100/hr)
40 – 80Shopify theme creation steps
Total, hrsBoutique e-commerce development company ($50-$100/hr)
190 – 420Big name e-commerce development company ($100-$200/hr)
190 – 420Web development company ($25-$100/hr)
230 – 570Shopify theme creation steps
Total, $Boutique e-commerce development company ($50-$100/hr)
9,500 – 42,000Big name e-commerce development company ($100-$200/hr)
42,000 – 84,000Web development company ($25-$100/hr)
5,750 – 57,000Choosing the right theme to represent your e-commerce store can be a tedious job. Apart from being visually appealing, your theme must provide stable performance and encourage conversions. Although the Shopify Theme Store and other marketplaces provide a multitude of pre-made themes to choose from, some e-commerce stores may not find a suitable option for their brand. Fortunately, the platform allows merchants to create a custom Shopify theme to mold the design based on their business’s needs.
Our definitive guide to Shopify themes gave you various helpful insights to answer the question of how to create a custom Shopify theme. The development process requires extensive knowledge of Shopify’s theme architecture and platform-specific coding skills. To design your custom Shopify theme, hiring a Shopify development company isn’t a necessity. However, if you finally decide to bring your unique design idea to life, the benefits will greatly outweigh the expenditures. Feel free to drop us a line anytime to get your custom Shopify theme development project started!
Share This Article
Keep in mind that building Shopify themes from scratch is not the same as customizing an already existing theme in your library.