Shopify Custom Theme Development: The Ultimate Guide In 2023
Last updated: 02/04/2023
Creating Shopify themes are notoriously very time & capital intensive. From a few wrong decisions early, it's easy for this process to go wrong & become hell on earth for store owners.
We've written an ultimate guidebook to custom theme development so you know exactly what to look out for and how to make this experience amazing.
Feel free to jump straight into 'Planning to create your Shopify theme' if you're already up to speed on what custom theme are.
Key takeaways
- You will need an understanding of how Shopify, Liquid and Shopify theme architecture works
- Fail to plan - plan to fail. Get the right tools, decide on your page structure, learn about Online store 2.0 and most importantly choose the right team
- Use the right tools & resources: Shopify dev docs, Shopify CLI, GitHub intergration, YouTube, Liquid docs, VS code & more
- You will spend the majority of the project time on stage 1 (Design of the website) and 2 (Development of the website)
- Quality Assurance (QA) is essential next stage for a new theme.
- The following 2 stages of creating a custom Shopify theme from scratch are publishing & ongoing support
What we'll cover
- What is a Shopify theme?
- Planning to create your Shopify theme
- Creating your Shopify theme from scratch
What is a Shopify theme?
Let's first understand what a Shopify theme is. Once logged into Shopify, you will see 'Themes' under 'Online store' in your Shopify admin panel.
A theme determines the way your online store looks, feels and functions. It takes backend data such as products, navigation and blog posts and plugs them into a different look & feel.
There are 2 types of themes:
- A Shopify store theme (from the theme library)
- A custom Shopify theme
We'll discuss the custom themes shortly. But first let's discuss what they both have in common.
Shopify Liquid
Shopify Liquid is a templating language created by Shopify which used in making their theme files. It uses the usual frontend languages you’d expect such as HTML, CSS and JS.
When you see a .liquid extension appended to the end of a file name in your theme code, that means its a Liquid file.
Shopify's theme architecture
You need to understand theme architecture, Liquid, JSON templates for sections (online store 2.0) and a broader view of how Shopify works in order to build a custom theme.
All Shopify themes have starts with layout then templates, then sections, then blocks then schemas. And also snippets and theme settings.
In fact All Shopify themes have 7 folders which all work together to create a theme:
- Layout
- Templates
(A .json file determining the structure for each type of page)
- Sections
(Code for each section across the entire website)
- Snippets
(Re-usable bits of Liquid code that can be called & have variables passed into them)
- Config
(Setting & saving Shopify theme settings using schemas)
- Assets
(HTML, CSS, JS, font and liquid files)
- Locales
(translations of key heading)
The layout folder contains the almighty theme.liquid file. This is arguably the most important file in your Shopify theme because it dictates the structure of each and every page (apart from the password page).
It has a dynamic {{ content_for_layout }} Liquid expression which will load dynamic content depending on the template (type of page) the user is on.
Theme settings are the options that the client will use in the theme editor. For example some common theme settings are ones for the heading and body font used across the website.
If these keywords like templates and blocks still don't make sense, you can read our article which goes into depth about what they are & the differences between them.
Shopify theme store
Also known as the Shopify theme library, this is where pre made themes can be purchased for you to use in your own store. All Shopify stores user themes (unless there is a custom storefront).
There are range of free themes and then paid bespoke themes too. The average price of a paid theme is between $220 and $350 USD. This is a small price to pay, considering the amount of work the developers who made that theme undertook. Feel free to visit theme store here.
To answer the common search term "shopify customize theme", you need to head to the theme settings or click on individual sections in the editor to customise a theme.
Instead of creating a custom Shopify theme, you should also consider a customized theme. Shopify theme customization is where you start off with theme you like the layout/style of already, then add in some custom sections or extra code to get it exactly to what you want it to look like.
This means you can avoid the dullness that comes with pre made Shopify themes and you can save a ton on the price of a fully custom theme.
What is a custom theme then?
Custom themes still follow the theme architecture we discussed earlier but the difference is they are themes made usually just for 1 client with specific needs (usually seeking a different design or bespoke functionality).
You will need to pay a team of developers anywhere between £3,000 to £15,000 to get a custom theme made for you. If you are a high-volume merchant (generating over £500k+ annually) this number will likely start at £25,000 and range to £100,000+ depending on the level of complexity.
Yes this is pricy but a lot of the big brands you see using Shopify have their own Shopify themes tailor made to have consistent branding and functionality which saves them time.
As a Shopify merchant, the are a ton of benefits available to you from having your own Shopify theme. You are involved from the design to the development process, you get a professional design, you get better KPI results, access custom solutions and more.
In addition to this you can get top tier performance, collaborate between design and development and add functionality to almost every page you'd like (instead of relying on third party apps from the Shopify app store).
Most Shopify store owners won't ever need a custom Shopify store. Simply because the initial investment won't make as much sense for them or they aren't selling enough.
If you don't want to go for a fully custom theme you can begin with an existing theme such as the Dawn theme then build from there.
Feel free to read our comprehensive article on the advantages and disadvantages of a custom Shopify theme here.
Planning to create a custom Shopify theme
Fail to plan - plan to fail. Custom Shopify themes are a big investment so it's in your best interest to ensure you know exactly what you want to ensure it's a smooth process.
Before you build a custom Shopify theme you should consider:
- How to make our online store stand out?
- Why do we really want to create a custom Shopify theme?
- Design (UI + UX)
- Price
- How many steps a shopper needs to take before taking action
- What actions you want your users to take
- SEO
- What should your storefront feel like
A solid team
You will most likely need a Shopify theme development agency. Since you will be working with these people for the next couple of month & potentially years, it's crucial to find the right team.
To get a Shopify theme developer is very simple. If you're on a tight budget and have experience managing a project like this then you can find a freelancer with a few clicks on websites like Upwork. Or you can find a specialist theme development agency from a Google search or referral.
There are a few reasons we recommend opting for a team instead of a freelancer:
- Faster work.
- Better project management
- Usually a higher quality of work
What to look out for when choosing a team:
- A track record of great work
- Excellent communication
- Skilled developers
- Reliability
- Responsive/Quick
What is Online store 2.0
Shopify Online store 2.0 changed the game when it came to Shopify theme architecture. The main change to the theme files were template files are now in a .json format instead of a .liquid format.
Other great features are:
- Sections Everywhere
- Shopify Metafields enhancement
- Easy Storefront filtering
- Checkout apps
- Quicker theme customizer
- Higher performance frontend and backend
Almost all the themes on the Shopify theme store have now adapted to this but if you have been on Shopify for years, you may still be using 1.0 so make sure you upgrade!
Important pages in any online store
- Product page
- If you run ads then you will understand just how crucial this page is. Shoppers will most likely spend the most time on this page trying to choose whether or not to add this product to cart
- Homepage
- This is a shoppers initial point of contact with your store. It's important to have a clear navigation and point them into others parts of the store.
You should also try to create a landing page for your best selling products. To action this, use analytics to find out the best selling products on your store (by Qty volume or sales revenue). Then design and build a product page or separate landing page for those products.
Shopify Partners
If you are an agency building this theme, we strongly suggest you get a Shopify Partners account (if you don't have one already).
With this Shopify Partners account you get a FREE development theme from Shopify. In fact you get an unlimited amount of development themes.
Creating your Shopify theme from scratch
There are 4 main parts to creating custom Shopify themes. Well 5. Design, development, QA, Publishing & ongoing support.
Design
After planning, design is where the custom Shopify theme development process kicks off. This stage is all about taking ideas and getting from a sketch (wireframe) of the website look and feel to a signed off design (Using Figma or Adobe XD).
If you want a comparison between the 3 most popular design tools, read our article on Figma vs Adobe XD vs Sketch.
There are tons of Shopify theme design options. You also want to try and make each customer's visit unique and memorable.
The biggest online brands thrive not just because of their ability to gain new customers but also being able to keep their current customers coming back again and again.
Design is also where you can beat almost any pre made theme because no one will have a design like yours. Use the opportunity to create a unique theme which has your brand identity all over it.
Mobile first
Every existing theme in the theme library is mobile responsive. Your own Shopify theme should be too.
💡 For most eCommerce store, you'll likely find around 65-85% of your website traffic is coming from mobile devices.
With this stat in mind, you need to make sure the designs made will favour mobile users just as much as desktop users. You should really consider going for a mobile-first approach when it comes to design.
Pages
Here is a good time to plan out what pages you want. Common pages are:
- Home page
- Product pages
- Collection pages
- Blog page
- Article page
Here would also be a good time to plan the structure of a landing page for seasonal occasions such as Christmas, easter sales, summer sales etc.
Custom Shopify Theme Development
Once designs have been signed off, it's time to start the development phase. Development of a new theme can take anywhere between 2 - 10 weeks or more if there is a really complex design or functionality needed.
Thanks to the amazing support there are a ton of resources and developer tools available to help you build a theme from scratch.
Some other helpful resources (for learning):
- FreeCodeCamp
- Scrimba
- YouTube
- GSAP
- Google chrome extension - Liquify
To begin, you need a Shopify store. You can use a FREE development store or you can gain access to your store owners account via Shopify Partners collaboration access.
GitHub
Shopify theme development workflow has been made very easy with the Shopify GitHub integration. You will need a GitHub account if you don't already have one. It's completely FREE.
In your local development environment you need to create a GitHub or git repository. You can do this using the GitHub for desktop app.
Another great benefit of a git repository is it allows for much easier version control & collaboration with other developers. You can easily add other developers into your GitHub repository.
To get started we recommend to clone dawn. Dawn is Shopify's reference theme and the default theme that every Shopify store owner gets installed when first creating an account.
It has a range of new Shopify features, uses Online store 2.0 & is a perfect example of a well built theme.
To clone Dawn, you simply need to install the latest copy of it from the Shopify theme store for free into own Shopify store. Then hit the 3 dots next to the theme then press "Download theme file".
Code editor like VS Code is where all your theme code will be written. Yes, you can use the native Shopify theme code editor but it isn't great. You don't get access to the Shopify CLI, you miss out of hot reload, it's harder to collaborate and more.
Shopify CLI
Shopify command line interface aka Shopify CLI was originally built for apps but they extended it to allow for Shopify theme development too. The old way of doing this was using Shopify theme kit.
There are tons of benefits and Shopify features you get access to when you install Shopify CLI. One big one is theme check. Theme check allows you to spot any problems/errors inside your liquid code while you are creating it.
Shopify CLI works great with your git repository too, especially with Shopify CLI 3.0 which came with new features like the flag --theme-editor-sync which now saves the changes made in your customiser while building a theme.
You can install Shopify cli using a command line tool. Here is a video by WeeklyHow that walks you through installing.
Schemas
Shopify is not a drag and drop builder. All themes use schemas to allow the store owner to customise the store. Schemas then create either section, block or theme settings.
So to recap on getting started
- Create a Shopify store (via Shopify partners) or get access to a client store.
- Create a GitHub account then a git repository
- Install the latest fresh copy of the dawn theme from the Shopify theme store. Then download the theme file.
- Unzip the downloaded theme file then put the 7 theme folders into the folder create on your local environment
- Using you own code editor (our favourite is VS code) or GitHub for Desktop then create the first initial commit & push that code to GitHub.
- Use the Shopify GitHub integration to connect your own theme to your Shopify store.
- Install Shopify cli (Command line interface)
The majority of time spent in development will be building out sections from the provided designs.
QA (Quality Assurance / testing)
QA is an important stage at the end of Shopify theme development (or any type of development). To fully check a new theme can take anywhere between a week and 5 weeks.
Read our article on Website Quality Assurance in 2023 here
Themes in the theme library have a very stringent test they must pass before being available for the public to use them. Since custom themes are a new theme, it's important to ensure it is also tested.
Using Shopify cli and theme check this is where you should comb through your theme code to find any errors or problems. QA is very important because you don't want a client website to break down and cost them losing real money.
Every custom Shopify development agency will have different way of doing this. We use a tool called Markup.io.
This is also another great point to use Shopify's reference theme (Dawn) to ensure you're keeping up to date.
Things to check for:
- Not using deprecated keywords for Shopify
- Each page works
- Images are responsive, converted to a next gen format & alt text is set
- Schemas are set up & correctly named for appropriate sections
- Critical functions such as the variant selection, cart and navigation, checkout are working
- Technical SEO has been implemented
- Internal store settings are set correctly
- Good performance (Read our article on how to speed up a Shopify store here)
We created a checklist of our own to ensure you have the highest quality output all the time. Feel free to email victor@steplabs.xyz to get access.
Publishing
Your custom Shopify theme is almost ready! This is your final chance to run any last checks.
Your GitHub repository should already be connected to your Shopify store. You may want to create another branch for production.
If you aren't feeling too confident, you always publish at a time when your online store is the quietest (e.g. early morning or late night) so you can have plenty time to check while causing the least disturbance if things go wrong.
Then you will want to hit publish on the GitHub theme which will replace your current theme as the live version.
To get the best out of the launch, it's usually a good idea to hype up the new website on social media or run a sale.
Hooray! You now have your own theme!
Ongoing support
Now the website is live, over time you may want to make changes to the website. This is where your development team will play an important role in actioning those changes. They are the most qualified for this as they built the theme themselves.
CRO
A higher conversion rate is an easy way to see a huge increase in revenue. Implementing tactics like side carts, landing pages, social proof, optimized product titles, A/B testing and better copywriting on product pages are great ways to improve store performance over time.
Traffic
There's is no point having a great website but no-one visiting it. Paid ads through channels like Tiktok, Instagram, Facebooks and Google are excellent ways to being traffic to your own store.
It is also important to have a longer term plan for generating more traffic. This is usually in the form of an SEO strategy, email marketing or a user retention strategy.
Summary
If it sounds like a lot to there - there is! Design and development will take up the majority of the project time (Usually 4-5 weeks minimum) but don't skip over the QA stage as it is very important.
The nightmare would be to have a broken website, be losing thousands as the problem occurs and have to pay even more to get it fixed later.
A lot of work goes into creating a custom theme so the right agency helping you build it will save you a lot of stress and time.
Frequently Asked Questions:
Can I create a custom Shopify theme ?
Yes, you or your team can create Shopify themes. You can create private themes for your clients or you can create theme for the Shopify theme store & get paid for customer purchases.
Is Shopify theme dev hard?
Not really, Shopify theme development isn't that hard. Most front end developers will already have experience with HTML, CSS and JS (the easiest languages to learn) which is what most theme code is built using. So to get started in Shopify theme dev, developers just need to understand how Shopify works broadly & learn Liquid which is only a template language and has tons of resources to help learn it.
What programming languages are used in Shopify theme development?
Shopify Liquid along with HTML, CSS and JS are the programming languages used in Shopify theme development.
We hope this article gave you some insight on custom themes and helped you make an informed decision on whether a custom theme is right for your needs.
If you are looking to build a custom theme, we'd love to be the team that helps you with that project. Feel free to contact us below!
—
We are Step Labs - a Webflow & Shopify web design & development agency! If you would like to build a beautiful and high-performing website, contact us at victor@steplabs.xyz.
Written By: Victor @ Step Labs
.webp)
