The Definitive Guide

on Custom Shopify Theme

Development From the Ground Up

It’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!

Pros and Cons of Building Shopify Themes From Scratch

Shopify 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:

• The current theme is outdated or doesn’t match the brand’s requirements
• Current theme is a deeply customized template and slows down the overall website performance
• The theme isn’t optimized for conversions

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.

The benefits

Custom Shopify themes are substantially more efficient than pre-made ones. The benefits of designing your own theme on Shopify include:

• Staying up to date. As the owner of your custom Shopify theme, you decide which upgrades need to be implemented in your theme. These upgrades won’t interfere with Shopify platform-related updates and will make updating to the newest versions a smooth and error-free experience.
• Creative control. You will get to have full creative control over every element on your website, from layout and color palette to custom icons and fonts.
• Designed to target the needs of your audience. Shopify theme development from scratch allows you to create the layout that will effectively convert your users into customers.
• Ability to customize functionality. Customize your theme to include the necessary features for your business without the need to install third-party apps.
• Clean code. By implementing only the code that is necessary to run your website, you avoid code bloating and ensure high website loading speed.

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.

The drawbacks

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:

• Cost. A fully custom website will inevitably cost you more than simply buying and installing a pre-made theme from a Theme Store. Unless you’re a developer yourself, you will undoubtedly need to hire professionals in Shopify development services to design and implement your custom theme. The cost will vary depending on your requirements and professional competencies of the Shopify development company you choose.
• Time. Developing custom Shopify themes from scratch requires more time than simply installing a pre-made theme. Depending on your design plan, the approximate time it takes to create a custom Shopify theme will range between several weeks to several months.

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.

How to Create a Custom Shopify Theme Step by Step

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:

• Research. First and foremost, you need to have a comprehensive idea on why ready-made Shopify themes do not fit your business needs. Revisit the existing themes on different theme marketplaces, like ThemeForest or TemplateMonster to see which functionality you like, which is missing and what aspects need improvement.
• Design idea. Your idea for the custom Shopify theme must come from your business niche, customer preferences, be unique compared to your online competitors, and support your customers’ buying journey. You must have a general outline of the page’s structure and features you need to have.
• Wireframes. To conceptualize the look of your theme, work with a designer to create a wireframe and use it as a reference in the work process. A wireframe is a graphical blueprint of a website that details the proper placement of elements across your website.

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.

#1 Understand Shopify theme architecture

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 theme architecture

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:

• 1. Layout. The base of a theme that can be reused across the website to feature the basics like headers and footers.
• 2. Templates. These elements control what’s displayed on the webpage. Each page has its own associated template type, which we will discuss more below. You can create multiple versions of the same template type to customize each page as you see fit.
• 3. Sections. Reusable modules of content that are displayed on the webpage. For example, you can create an “Image with text” section that will showcase an image and text side-by-side with options to customize its placement, colors, etc.
• 4. Blocks. Types of content modules that can be added, removed, and reordered within a section. A block could be an image, a video, or text. You can add a maximum of 16 blocks per section.

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.

#2 Get acquainted with Liquid

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:

• Double curly braces {{ }}, which indicate output
• Curly braces with percentages {% %}, which denote logic

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.

#3 Use JSON templates for sections

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.

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.

#4 Take advantage of the proper tools

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

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:

• Automatic pulling and pushing theme code from any repository associated with your GitHub account
• Connecting multiple branches from a repository to develop and test new theme features
• Tracking edits made to the custom theme using code editor or theme editor
• Connecting branches to published and unpublished themes

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.

Shopify Command-Line Interface (CLI)

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:

• Ruby
• Ruby+Devkit
• Git

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 theme

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.

Theme check

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:

• Liquid syntax errors
• Missing templates
• Unused variables and snippets
• Unknown and deprecated tags
• Excessive snippet nesting

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.

#5 Publish your custom theme

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:

• 1. Go to Online Store
• 2. Click on Themes
• 3. In the Theme library section find your custom theme
• 4. Click Actions > Publish

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.

Determining Factors for Custom Shopify Theme Cost

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:

• Wireframing. The designer creates a blueprint of your website based on your requirements. It will serve as the foundation for your custom Shopify theme. Using a wireframe, you can visualize how elements within your theme architecture connect to each other.
• UI design. Based on the wireframe, the designer will proceed to create a full-color user interface (UI) design. UI designer focuses on creating and stylizing visual elements on every page, like menus, buttons, footers, etc.
• Development. Unsurprisingly, the development stage takes the longest to complete since the developer must build every element and custom functionality of your theme from scratch. The time it takes to develop a custom Shopify theme will depend on the complexity of theme architecture and chosen visual effects.
• Testing. Before the new Shopify theme can be implemented on your website, it must undergo quality assurance. Quality assurance (QA) testing is the process of ensuring that your project meets the highest quality standards and performs completely bug-free.

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.

So how much does a Shopify custom theme cost?

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.

E-commerce development company vs. Web development company

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.

Big-name e-commerce development company

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:

Final Thoughts

Choosing 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!