How to Develop a Custom Shopify Theme From Scratch

When building a Shopify store, you must choose a pre-built or custom theme. Themes vary wildly in terms of functionality, appearance, and customization, forming your website’s core look and feel. It’s obvious then that you would want something unique that reflects your brand values. How can you get that, though?

When picking a theme, there are four primary options.

1. You can use the default Shopify theme with a few color changes and tweaks.
2. You can use a theme from the Shopify store. These are often more robust, customized, and unique than default themes but aren’t unique to you.
3. You can buy a theme from a third-party marketplace. These themes have the same pros and cons as #2, except you’re slightly less likely to get a theme that everybody else uses. There is also a small risk that third-party marketplace themes will have bugs or issues as they don’t have the same quality control and strict reviews.
4. You can have a custom theme developed.

Building a custom theme is the most labor-intensive of the options, but it’s guaranteed to give you something unique to your site. The question is, how can you build one yourself? Is it doable with a beginner’s knowledge, or do you need to know how to code to get it to work? Let’s explore.

What Does “From Scratch” Mean to You?

Before we get further, you must answer a question for yourself.

To some people, it means putting together a theme from parts, creating something unique to you. That is, you’re not buying a theme, you’re not just cloning a theme and changing the colors, but you’re still perfectly willing to use code from other sources or existing themes.

To others, from scratch means from scratch. You start with zero, write all the code yourself, and create a website from a blank slate.

This second option is guaranteed to result in something unique to you, and you can even sell it as your own later if you want. The downside is it can be a nightmare to keep updated, and you have to follow theme development best practices to avoid irreparable problems, security holes, and other issues that can crop up with custom code. The biggest drawback is that you’re using Shopify as a base, which means your theme could break whenever Shopify updates, and you need to be ready to fix your code at the drop of a hat.

Most people developing custom themes will follow something like Shopify’s tutorial, which clones a base theme so they can make changes to it. Very few people start from nothing and create a theme truly from scratch. If you’re familiar with code, you can know how Shopify works inside and out, and you want to. Usually? It’s not worth it.

Lay Your Groundwork

Before you even think about putting down a single line of code, you have a lot of work. You need to plan your design, which means introspection, questions and answers, and wireframing.

Consider your sales funnel. What pages are users likely to enter your website on, and where do you want them to go from there? What does your checkout page look like? Your product pages? Your landing pages? Your blog posts? What does the customer flow look like and your site’s overall structure?

Consider your design. You have to look at the design from many different angles.

• From a user perspective, what do they see, what do they overlook, and how do you guide them from one place to the next?
• From an accessibility perspective, how easy is it to navigate, what is the contrast and positioning, and how visible are the essential elements, like price information?
• From a sales perspective, how do you plan to present your offers, calls to action, and sales information?
• From a marketing perspective, how well optimized is your design, how quickly do your elements load, and how well do they adjust to different devices?

Many of these elements have generally accepted best practices throughout the internet. For example, these days, a responsive design is critical. But, if you’re building a theme from scratch, you need to decide what elements stay and disappear at different viewport sizes. These are the details you might not even think you need to decide on – until you’ve reached a point where you need to choose them.

What is a wireframe?

It can be much more costly to make last-minute design changes than it is to make wireframe changes.

You can be casual or formal with it, but you need to make it one way or another. Here’s an example of how to make a wireframe and what you want it to look like when you’re done.

Make a List and Check it Twice

Wireframing your site isn’t just about sketching what your homepage will look like. You need to decide on the layout and theme for your entire site, which means each page you might need.

For a Shopify store, that means:

• Your homepage.
• Landing pages, possibly of various types, if you want to test different layouts.
• Product pages, again possibly of various types if you sell multiple products or plan to.
• Collection pages for users to browse collections of products.
• Search results if you have a site search on your site.
• Blog posts and a blog index page to tie them all together.
• Any other structural or navigational pages, like tag or category pages and indexes.
• Any static kinds of pages, like a contact page, privacy policy page, or About Us page, if they won’t use another standard form.

If you’re unsure of what you’ll need, find a few online stores you like, browse around, and look at how many different kinds of pages they have and what elements they include.

Learn the Language

Creating a theme for Shopify requires coding expertise, even if you’re using a theme builder – unless you’re doing the minimum amount of customizations. The more unique you want your theme to be, the more you need to know how to manage your code.

There are a handful of languages you’ll need to know:

• HTML is the basis of just about everything web-based.
• CSS is the eternal companion of HTML and the core of your theme and design specifications.
• Liquid, a variation of Ruby that Shopify uses as their template design language. Shopify even handily produced a cheat sheet for developers.
• JSON/JavaScript for additional scripting throughout your site and use with Liquid.
• Shopify CLI, the command-line interface Shopify uses for accelerated development.

Depending on your existing developer skill, you may already have some of these. Others may be new to you, but you might be familiar enough with development to pick them up quickly. If you’re not used to coding and development on your own, be prepared to spend quite a while studying, troubleshooting, and banging your head into StackOverflow to figure out why perfect-looking code isn’t working.

Read the Best Practices

Technically, you can make just about any Shopify theme you want to use for your site, and that’s fine.

You only need to follow specific rules if you plan to publish your theme on the Shopify theme store. That said, those rules are in place for good reason; they help avoid many common usability issues, copyright issues, and security problems. These rigorous rules give you confidence in the themes on the Shopify store; third-party websites are much more hit or miss, even if they have positive reviews.

This page is Shopify’s list of best practices for developing themes. This page is Shopify’s list of requirements to list a theme on the theme store, whether you intend to do so or not.

Clone “Dawn”

Let’s be honest: there are many resources available for developing themes, and you don’t have to start from scratch. In most cases, it’s better if you didn’t start from scratch; so much base code goes into a Shopify theme that trying to engineer it all from base principles can be wasted time and effort that just adds to your project cost. Think of it like building a house; a modest remodel is more affordable and much faster than building a home on an empty lot.

Dawn is Shopify’s dev theme.

It’s a free theme that offers a core framework for a complete theme, so you can clone it and make changes without needing to build the entire framework from nothing. There’s little reason not to start with Dawn and customize from there.

If you’re worried about uniqueness, don’t be. One of the best practices above is that your theme’s code base should be sufficiently altered so that it can’t be identified as a Dawn clone. That means you’ll systematically review each page and resource in Dawn and edit it to suit your new theme.

Here’s another way to think about it:

If you want to create a painting, don’t start by learning to weave a canvas yourself. No one is going to criticize you for using a store-bought canvas. Right? You buy a canvas, paints, and brushes and get started with the part you’re interested in.

Don’t Forget About SEO

When you build a theme, you have an opportunity to ensure you build with SEO in mind. Shopify SEO presents its own unique set of challenges but if you keep search engine optimization top of mind throughout your planning and development, there will be less work to do later to climb Google’s rankings.

Get to Work

Building a theme is a challenging task. It’s also not something we can necessarily give you a play-by-play on how to do.

You have a wireframe and a plan, the core Dawn template, and the code, so put it all together.

It will take time, trial and error, frustration, and troubleshooting, but you’ll eventually put together what you want.

One way to go about this is to use a guide like Shopify’s theme architecture document and go down the list, theming and customizing each module and page as you go.

You’ll have a complete custom theme by the time you reach the end. Sounds straightforward, right?

Once you have your theme going, at least in a rough draft state, you can test it. Shopify has various tools available to test themes to verify their functionality and eligibility for the theme store. Here’s a complete testing guide and information about Theme Check, a linter Shopify offers as part of the CLI to test and validate themes.

Change Your Mind?

Over and over again, we see businesses and entrepreneurs decide they want to make a custom theme or architecture for their site, only to encounter just how daunting and immense a task it truly is. They give up, either on the design or on the whole project.

If you’re in over your head, why not take a step back and reevaluate whether or not you genuinely want to design a theme from scratch? Usually, there is less benefit to doing so than you might think.

For one thing, many of the existing Shopify themes have a lot of customization available. You can customize an exciting theme enough to look pretty unique with your branding, and no one will be the wiser.

For another thing, there’s a near-infinite variety of alternatives out there. WordPress, for example, has millions of themes to pick from and a much easier time developing something custom. Most plugins on WordPress are free, but most apps on the Shopify store are not only paid – they are monthly subscriptions. To achieve the same functionality you’d get for free on WordPress, you’ll have to pay $1,000-2,000 per month on Shopify. Some larger Shopify stores pay over $10,000 monthly between their Shopify Plus subscription and various apps and plugins. That’s no joke! You can build a fully custom store, and your monthly savings by creating a site you own is significant.

Alternatively, you can contact a web design agency (like us!) and enlist their help. Specialists who are already well aware of how to design a theme from scratch can work with you to take your plans, wireframes, and design documents and turn them into a professionally-made website much more quickly than you can learn how to do it all on your own. Of course, paying a design agency costs money, but that’s the tradeoff. You pay Shopify and various plugin developers every month, or you pay an agency once to build a website you own and control entirely with significantly less overhead.

There are many ways to build a custom eCommerce theme on various platforms. We’re a top-ranked web design agency that works with both Shopify and WordPress. Our lines are always open if you want to explore options or consult with us! We’d love to hear about your project and help you build a plan for your website that is on time and on budget.