Shopify Theme Development 101: How to Build a Custom Shopify Theme

When it comes to choosing the perfect eCommerce store look, Shopify store owners are spoiled for choice. But if you’re looking to shape a custom buyer experience or your store has needs that preset templates just don’t meet, Shopify theme development can be a viable option. 

How do you go about building a custom Shopify theme and what are the key steps involved? You’ll learn all you need here plus tips to help you find an easier way to create Shopify templates from scratch using a Shopify page builder.

What is Shopify theme development?

As everyone knows, one of the biggest reasons why Shopify is so popular is its incredible theme store. The Shopify theme store provides access to thousands of free and paid themes that are optimized for speed and maximum conversion. 

Source: Shopify

With each Shopify theme, store owners receive a carefully designed template created to fit their industry and target market. However, for various reasons, sellers may sometimes feel that they require more than preset templates have to offer when designing their store. 

This is where Shopify theme development comes into play. 

Shopify theme development is when store owners customize or develop new Shopify themes for their online store. 

There are two broad routes available for eCommerce sellers looking to pimp their Shopify template:

• Shopify theme customization: It’s possible to change various elements of your store’s pages using Shopify’s customization options. There are many ways to do this, including code-free pathways and other options that require coding.
• Shopify theme development: If your needs run much deeper than what existing themes on the Shopify store offer, you can choose to build a new theme from scratch instead. With this route, you’ll be doing a lot more coding on your way to developing a theme that is tailored to your audience.

But the most important thing is that Shopify offers the tools to dive deep down into the theme development process and mold an experience that is uniquely yours. And that’s what most people love about the platform. 

Related: Top 5 Benefits of Custom eCommerce Development

Shopify Online Store 2.0: A new era of custom themes

Shopify announced Online Store 2.0 in June 2021. According to Shopify, Online Store 2.0 is “a set of features and feature improvements that make themes and theme apps easier to build, more flexible, and easier to maintain.”

You can think of it as the architecture that underlies and runs through the newer themes on Shopify, making them more dynamic and easier to operate. 

Source: Netflix | Netflix built its merchandise store using Shopify Online Store 2.0.

Prior to Store 2.0, store owners used Shopify’s ThemeKit to customize and build new store templates. But with the introduction of the new online store, Shopify has made available a modern set of tools and capabilities that make custom theme development more rewarding.

Here’s a rundown of some key technical features now available with Online Store 2.0:

• Theme architecture upgrades: Store 2.0 brings an upgraded theme architecture. The new features make it easier for store owners to add sections to any page on their store — not just the homepage — and integrate their store with more apps than ever before.

• A new reference theme: As part of the launch, Shopify announced Dawn, a new development reference theme that incorporates all the best features that Store 2.0 offers. It replaces Debut as the default theme for new stores and will also be the baseline theme for sellers pursuing custom theme development.
• Modern developer tools: Shopify introduced a raft of new developer tools, including GitHub integration and Theme Check. They also released an updated version of Shopify CLI which will be your primary development interface for building custom themes.

• New accessibility requirements: Lastly, accessibility now plays a bigger role in Shopify theme design. If you’re building a custom theme, there’s a set of accessibility requirements your template must follow to be compatible with Shopify best practices. 

Source: Shopify | Shopify’s new reference theme, Dawn.

Why customize Shopify themes?

Shopify themes are templates that affect the appearance and functionality of your Shopify online store. Everything about how your store looks, feels, and works is determined by your installed template. 

As a result, store owners are careful to ensure that every aspect of their online store provides the best buyer experience possible. 

Buyers already have high expectations when visiting eCommerce stores. They expect an engaging first impression, maximum usability, and a seamless process from landing page to checkout.

Sometimes, these expectations vary by industry and user preference. For instance, roughly 75% of shoppers expect checkout to take 4 minutes at most, while 28% require a maximum of 2 minutes or zilch, according to the 2022 Online Shopping Survey by Capterra. 

The bottom line is: every niche and target market has its expectations for what makes a great buyer experience. If they don’t see what they want, your store visitors will bounce within 15 seconds. 

Although Shopify templates accommodate features that cater to specific industries, such as the Foodie theme that has pages designed to look like a restaurant menu, a store’s customization needs may be more.

Source: Shopify

Whatever your reason for choosing a custom Shopify store, you’ll be pleased to know that there’s a clear pathway to your end goal. 

How do you start and what do you need to develop customized Shopify templates? That’s what we’re discussing next!

The Partner Recommendation. You might be interested in Shopify Website Development Services from our partner BSSCommerce. Check them out, they have been on Shopify ecosystem for over 5 years.

What do you need to create a Shopify theme from scratch?

Right off the bat, it’s important to note that developing a custom Shopify theme can be a daunting task. Here’s why.

Building custom templates requires coding skills and an understanding of several coding languages. In addition, you need to be familiar with the Shopify theme native environment and the tools used on the platform, such as Shopify CLI and GitHub. 

As a result, you’ll likely have to invest a lot of time and resources in the project. 

Here’s a closer look at the basic requirements for developing custom themes on Shopify.

Shopify custom theme tools 

There are three key tools you should be familiar with. The first is Shopify CLI or Shopify command line interface, in full. 

Shopify CLI is the coding environment in which you’ll develop your Shopify theme. If you’re not a developer, you should know that this tool is vastly different from the drag-and-drop builder you may be used to when setting up Shopify stores.

You’ll make use of the CLI by writing commands in lines of text, following the syntax of the coding languages required for Shopify themes. 

The second tool is Dawn theme, for developers who would like to build on Shopify’s reference theme. To commence your development process, you will typically need to “clone” or copy the Dawn theme GitHub repository to your device.

The third tool is GitHub itself. GitHub is a code hosting platform where developers can reliably store code and source documents, collaborate on projects, and track/control changes to their code.

You’ll need a GitHub repository where you save your copy of the Dawn theme or your custom-built theme. You’ll also use the GitHub repository to link your custom theme to your Shopify store.

Fluency in Liquid 

Liquid is the primary language in which Shopify themes are built. It is a programming language developed by Shopify and hosted on GitHub as an open source project.

Source: Shopify

While using Liquid requires some coding experience, it’s not the hardest of programming languages to use. It consists mostly of HTML files with embedded code and is relatively simple to code in. 

However, you would also need to be familiar with other coding languages in addition to Liquid. For instance, you may need to use CSS, HTML, js, Ruby and React at various points during the development process.

Own a Shopify store 

Lastly, only people with access to a Shopify store can customize or develop themes on the platform. So, you either need to be a store owner or a store staff / collaborator. 

If you don’t already have a Shopify store, it’s best to get that sorted by opening an account today. Follow this link to get started with a 3-day trial and a sweet deal for your first three months on Shopify.

How to design a Shopify theme: Step-by-step guide

So let’s get right into the meat of it. How do you design a Shopify theme from scratch? Here’s a step-by-step guide that’ll get you going:

1. Define the end goal 

This is called taking requirements in coding. Essentially, it means defining what the template should look like, what it should do, and how buyers will interact with it. 

Requirements not only help you plan the final output of the template, they also help you define the workflow. You’ll gain better clarity as to what features your store needs, where they’ll come into the development process, and how they tie into the whole. 

Likewise, having clear requirements provides a means to “verify and validate” the end product. This way, you can be certain that the output meets both you and your customers’ expectations.

2. Test with research 

The next step is to apply a little empiricism to your requirements. The goal here is to test whether the requirements are capable of achieving your desired effect. 

Is this something that your buyers will love? How are those features likely to perform in daily use? Is there another Shopify store doing something similar that you can learn from?

If you find a store employing an approach you think looks good, plug their website into an SEO tool and check the stats to see if they’re worth emulating. 

Shopify’s Theme Detector can also help you tell what Shopify theme they’re using — if they’re using one — so you know exactly what features are money spinners for them.

3. Install Shopify CLI

After the preliminaries, you’re all set to start your custom theme development journey. Begin by downloading and installing Shopify CLI on your device. See the specifications you’ll need to run Shopify CLI below:

• Windows: Windows devices must have Node.js 14.17.0 or higher installed. You also require Ruby+Devkit 3.0, Git, and Bundler 2.3.8 or higher.
• Linux: Users with Linux OS require Node.js 14.17.0 or higher and Ruby 3.0. You’ll also need the Ruby development environment, Git, cURL, GCC, g++, and Make.
• Mac: For macOS, ensure you have Homebrew installed. Likewise, you’ll need Node.js, Ruby, and Git. But the great news is you’ll get these three automatically if you install Shopify CLI using Homebrew.

Here’s a tutorial from Shopify with more detailed instructions for installing Shopify CLI.

4. Build on the Dawn theme 

Next, you’ll proceed to clone the Dawn theme GitHub repository to your device. This repository has the Dawn source code and other resources you need to understand how the theme functions and make effective changes. 

As you work, it’s important to pay the most focus to those pages that are important for your buyers. This is also referred to as your “critical path” — or the route your buyers will travel from landing page to checkout. 

While every website is unique, some of the most important pages will typically include:

• Homepage
• Product pages
• Checkout page
• About Us

Also keep in mind that Shopify has specific guidelines for building on Dawn. Your eventual output must be “substantively different” from Dawn — it should provide added value for users.

Source: Shopify

5. Sync Git repository with Shopify

As you build, ensure to sync your Git repository with Shopify and your local directory. While you will be able to see changes to your theme in real time using Google Chrome, your Git integration helps automatically store your data in your repository. 

It’s also easier to push live changes to the online store during development and when you’re done. You’ll be able to add a theme directly from Shopify’s store into your theme library using the Git integration. 

6. Test and preview 

While building your theme, you can preview changes in real time using the “Shopify theme dev” command. The command automatically reloads any changes you make locally to CSS and the theme’s sections. It also lets you preview these changes using Google Chrome.

You can share a permanent link to the theme or prepare for it to be published by uploading it to your theme library. 

Remember, testing is a critical part of the process as it helps ensure that you have satisfied the requirements you set up before starting. It’s also critical to run checks to ensure that you have met Shopify’s testing requirements, including accessibility criteria.

7. Push to Shopify theme store 

Finally, you’re almost set to go live with your brand new Shopify theme. Go over the theme once more to check that all ongoing dev activities have been completed. Then proceed to push the theme to your store by using the “theme push” command.

Shopify theme development

Clearly, creating custom themes on Shopify will require time and effort. It gets even harder if you’re new to all this. 

Thankfully, there are many resources that can help make the process easier. 

Explore free resources 

Shopify offers a ton of resources that you can exploit as you find your way around custom theme development. 

These include the Shopify Theme Development resource center, which has several articles on various aspects of building Shopify themes. Another great resource you can explore is the Shopify Developers Platform and the ShopifyDevs YouTube channel.

Lastly, you can check out this Liquid cheat sheet created by Mark Dunkley of Shopify. It has many tips and shortcuts that you’ll find valuable.

Take a paid course 

A different, more expensive option, is to take a paid course. Some available courses you can check out include:

• Udemy’s Shopify Theme Development course
• Camp Liquid’s Liquid and Theme Development course
• Skillshare’s Advanced Shopify Theme Development course

Source: Camp Liquid

Is there an easier way to build custom Shopify themes?

So you’ve learned how to create custom Shopify themes and you know how to go about creating one from scratch. But is there an easier way to proceed?

The downside of Shopify custom themes

While custom Shopify templates give you all the functionality and custom features that preset themes cannot, it’s hard to ignore the significant costs of choosing this route. 

• It’s a time intensive process that may take anywhere from several weeks to months, depending on the complexity of the process
• Custom theme development can cost up to six figures in time and material outlay
• Most importantly, it takes away time that may be better spent on closing more deals and satisfying customers

The simplest way to build custom shopify themes 

The good news is that it’s possible to enjoy the benefits of tailor-made Shopify themes while minimizing the downsides of custom theme development. 

With PageFly, you can avoid the stress of learning Liquid and coding individual pages on your own. PageFly is a drag-and-drop page builder that lets you build any type of eCommerce page with tons of customization options at your fingertips. 

If you have used any type of drag-and-drop tool you’ll be comfortable with PageFly. Try it out today to see how it works.