Categories
Development Shopify

Shopify Theme Development in 2024: How to Make Your Own Shopify Theme with Online Store 2.0

You need a theme that perfectly fits your brand’s needs, but sometimes what you need isn’t always available. Here’s how you can develop your own Shopify theme!

While Shopify has many free and paid theme options, sometimes you want a theme that can perfectly fit your brand’s needs. While there are tons of theme options for you to choose from, there will be times where you need something that’s more customized for your business.

Luckily, you can create a Shopify theme from the ground up or customize an existing theme to create one that fits your brand.

In this guide, we take you through:

  • Shopify Online Store 2.0 
  • Building a custom Shopify theme with Dawn as a start
  • Creating a headless Shopify Storefront with Hydrogen

What is Shopify Online Store 2.0?

Online Store 2.0 is a set of Shopify features that helps developers create more customizable themes and apps. It also allows merchants to make customizations without necessarily having expert-level coding knowledge. 

How is Online Store 2.0 Better for Shopify Theme Development?

One of the benefits of the Online Store 2.0 platform is section flexibility. Previously, you could only add sections on the homepage, but now you can add and edit sections on every page with this new update. 

Metafields is also another exciting feature that Online Store 2.0 brings. Merchants no longer have to rely on APIs or outsource a developer to customize the product pages. Merchants can now make changes to these pages by uploading documents, images, etc., without relying on code. 

Next in line on feature updates is the theme app extension, which allows merchants to integrate apps or uninstall apps on the Shopify store without coding. 

Finally, instead of using Theme Kit to build a custom theme, you can now do it more easily with the Shopify command line interface (CLI). (More of this in a bit.)

Before You Build a Customized Shopify Theme

You have to keep a few things in mind before working on your custom theme. For example, you want to build a theme that you can easily optimize for SEO. And you also have to keep UX best practices in mind when creating the theme.

Before you start, make sure you have a clear answer to these questions:

  • What do I want my storefront to feel like? Consider the layout options, colors, and fonts since they will all contribute to your brand’s ‘feel.’
  • What immediate action do I want store visitors to take— The layout you choose when designing your theme will determine the first action store visitors lean towards. Do you want them to browse collections, make an immediate purchase, ask a question or add items to a shopping cart?
  • How many steps does a shopper need to take before taking the primary action? Hint: Too many steps, and the shopper is most likely going to click back and out of your store. 

Get A Free Quick Win For Your Website

Want to get more conversions on your website but not sure where to start? Give us a URL you want to improve and we’ll put together a few suggestions for how to optimize it, absolutely free!

The 5 Most Important Pages to Incorporate in Shopify Theme Development

When developing a theme on Shopify, you’ll use templates to determine what content to render for each page. In Shopify, you can create JSON or Liquid templates as best fits your needs. You have the option to create over 1000 JSON templates, but your templates need to cater to these 5 pages. 

1. Homepage

Your homepage is often the page shoppers go to when they want to learn about your brand. It needs to represent you in terms of content, personality, and, most importantly, value proposition. Your homepage should also be easy to navigate. 

2. Product Pages

These pages should house testimonials, optimized product titles, and descriptions. They also need an Add to Cart functionality that’s simple to use, with clear instructions.

3. Landing Pages

A landing page allows you to showcase all the offers you might have, unique products, and product launches. Since landing pages need a captivating design, ensure that your theme allows for extensive customization to deploy dynamic landing page designs.  

4. Contact Us Page

Every Shopify store needs a contact page so your customers can easily reach you. However, your contacts should be prominent on every page as a rule of thumb. Or better yet, enlist the help of a chatbot.

5. Blog Page

A blog page will be an excellent addition and a smart way to drive traffic to your store with content. The page needs to be mobile responsive and easy to navigate. 

What You Need to Build a Customized Shopify Theme Store

Since Shopify announced Online Store 2.0, building a customized theme on the platform is easy, but it does require a little work. And most importantly, you need to have coding knowledge in various languages. And frameworks. For instance, you have to be proficient in CSS, HTML, JS, Liquid, Ruby, and React, depending on the customization you want to make. 

A Bit About Liquid and its Role in Shopify Theme Development

Liquid is Shopify’s coding language used to make Shopify templates. It is written in Ruby, and it forms the core of Shopify themes. However, themes in Shopify also incorporate a mix of HTML, CSSS, and Javascript. 

If you want to build a Shopify theme from scratch, you’ll need to learn Liquid and, of course, be proficient in Ruby. So if you are familiar with both, it will be a piece of cake, at least for the most part. Plus, there is a boatload of cheat sheets and documentation to help you if you get stuck. 

That said, Shopify has most of the e-commerce functionality figured out. Your primary focus will be customizing the layout, flow and making slight tweaks to build a fully custom theme. 

Back to the requirements, you’ll need to familiarize yourself with Shopify’s CLI. Like your computer’s command line, Shopify’s CLI helps you instruct Shopify on what action you need it to take when developing your theme. 

With the CLI, you can create actions to:

  1. Preview and test your customized theme
  2. Initiate development of a new theme with Dawn as the base
  3. Push and Publish your theme directly to Shopify store through Github
  4. Populate data from your store
  5. Run a Theme Check on your newly built theme

Next, install Ruby on your device. You can do that through RubyInstaller, and the version must be 2.7 or higher. 

Install Github if you want to save your local theme customizations on a Git repository. Later on, it will also come in handy when you want to push the changes live. And, of course, have your text editor at hand to make theme customization.

Finally, make sure that you are either a store owner, store staff, or collaborator. If you plan to develop multiple customized themes, make sure to sign in to the Shopify Partner Program. It’s free and gives you more flexibility when creating custom-made themes. 

4 Easy Steps to Build a Customized Shopify Theme

If you are set on all the requirements, let’s dive into building your own customized Shopify theme.

1. Install Shopify CLI to Your Computer

The first step you need to take is to get a hold of Shopify CLI. It’s pretty easy to do, as you’ll see below. 

You’ll be using your computer’s terminal app to install and use Shopify’s CLI natively on Windows or macOS.

If you are on Windows, use the Rubyinstaller.org package manager to help you install the CLI. Once you have the Ruby + Devkit from RubyInstaller, paste the following code in your terminal:

gem install shopify-cli

If you are using Mac, download Homebrew to help with CLI installation. Again, you’ll paste the syntax below to download the Shopify CLI:

brew tap shopify/shopify
brew install shopify-cli 

Next, you need to verify that you have the latest version installed. Simply type shopify version into your terminal, and it’ll reveal the version you are using. After verification, you must authenticate by linking the CLI to your Shopify store. To do this, type into the terminal,

shopify login --store <DOMAIN>. 

<DOMAIN>, in this case, is the name of your store. Make sure to log in using the email you used to sign up for your Shopify store and not your Partners account.

This action sends you to a new window, prompting you to log in to your store, and once logged in, you are now authenticated. 

2. Clone the Dawn Theme

Still on your terminal, create a local directory to save your theme clone. Once that is done, it’s time to clone Dawn. For this step, you have two options. You can either access it from a Git repository or pull the theme from Shopify. 

To access Dawn through Git, type in

shopify theme init [ NAME ] [ options ]

This will pull up an existing Git theme repository. But if you don’t have a specified repository, the CLI will automatically clone a copy of the Dawn theme.

If you prefer to go the other way, type;

shopify theme pull [ options ][/path/to/your/theme ]

This action will pull the Dawn theme directly from Shopify and start cloning. Options, in this case, are optional parameters like the THEME ID to pull only one exact theme, or live option, to pull the theme currently running on a store. You can learn about more parameter options here.

Once you clone Dawn, the CLI will display a success message. Make sure to confirm that you have all the files you need for your cloned theme in the local directory.

Next, open a new terminal in your code editor and open your cloned theme directory. You’ll then paste

shopify theme serve

This uploads your cloned theme as a development theme on your store.

When the theme is uploaded, you receive:

  • A local development link, only available on Google Chrome. With this link, you can hot-reload changes to your sections and CSS and preview them in real-time. 
  • A link to your online store editor.
  • And a link to share the preview with others.

Quick note: The cloned theme is more like a phantom theme, in the sense that it’s not available in your Shopify theme library. But through Git, you can add the theme to your library, so the changes you make locally are not wiped out should you log out through the CLI. With that, let’s get into the next step.

3. Sync the Git Repository to Your Shopify Store and Local Directory

If you don’t have a Git repository in place, make sure to create one and link your cloned theme directory to the Git repository. This way, all the changes you make locally are synced to the Git Repository, and it will be easier to push the live changes to your online store. 

Next, head over to your store, and click on the Add a Theme option. Shopify allows you to add a theme to the theme library directly from Github through the Git+Shopify integration. 

After that, the new theme is installed into your Theme Library, and you can preview it and start customization. This video makes the process feel seamless if you’re struggling with syncing the local changes to the Git repository. 

4. Push the Changes to Your Online Store

If you’ve created all necessary changes and customization to your theme locally, it’s time to make it live on your Shopify store! First, you need to push the changes made to the Github repository. The changes will then sync with the theme on the Shopify theme library in a few seconds. 

Now, once you preview the theme from your library, you’ll notice that it manifests both the changes you made locally and on your customizer. 

Building a Shopify Storefront with Hydrogen Framework

Hydrogen is a framework by Shopify that helps store owners build a storefront with Shopify’s infrastructure as a backend. You connect Hydrogen to Shopify using the storefront API to fetch data. With Hydrogen, you get to enjoy all the e-commerce capabilities of Shopify but still host your own store. 

It’s relatively new and a bit more complex, but Shopify has a good chunk of documentation to help you build a Hydrogen storefront. However, you can only create a web storefront, as Shopify custom stores are not supported.

To start building a storefront with Hydrogen, create a Hydrogen app by pasting this code to your terminal:

npx create-hydrogen-app

You’ll then be prompted to name the app. From there, you can use your code editor to make customizations and build a web storefront. Hydrogen also comes with a template to help you kickstart your store’s development.

Get Help Building a Custom Shopify Theme

Custom Shopify themes are fantastic, especially if they fit your brand’s needs. But building a custom theme takes time, and it can quickly get overwhelming. If you want to create a customized theme but don’t have the time to do it, a web strategist will come in handy.

A web strategist can help you create a Shopify theme custom to your brand. If you are ready to create a custom Shopify store that’s easy to run and one that your customers will love, schedule a free call to see how we can bring your store to life.

By David Martin

I'm obsessed with building websites. I love planning, designing, developing, and tweaking them until they're converting users into customers. This is where I share some of what I've learned over the past decade building websites on the Internet.