Home > Articles > Shopify 2.0 Theme Development: Step-by-Step Guide to Developing a Shopify 2.0 Theme

Shopify 2.0 Theme Development: Step-by-Step Guide to Developing a Shopify 2.0 Theme

August 11, 2023

Written and researched by experts at AvadaLearn more about our methodology

CEO Avada Commerce

Introduction: This article explores how to craft a customized Shopify theme that aligns seamlessly with your brand’s specific needs. It illuminates the processes of utilizing Shopify Online Store 2.0, initiating a custom theme using Dawn, and constructing a headless Shopify storefront with the Hydrogen framework.

Understanding the Shopify Online Store 2.0

The Shopify Online Store 2.0 is an enhanced suite of features from Shopify. Its main goal is to make the process of designing themes and developing apps easier for creators. Another notable advantage is that it offers merchants the flexibility to personalize their online stores. The best part is they don’t need to be coding wizards to do it.

The Advancements of Shopify’s Online Store 2.0 in Theme Development

Why is Online Store 2.0 an improvement for theme development on Shopify? The answer lies in a variety of enhancements, one of which is the improved section flexibility. In the past, sections could only be incorporated on the homepage. However, with this upgrade, you have the power to modify and insert sections on every single page.

Another prominent update brought by Online Sto r e 2.0 is the introduction of meta fields. This feature liberates merchants from the previous need to utilize APIs or hire developers for personalizing product pages. Now, they can effortlessly modify these pages by uploading files, such as images or documents, without touching a line of code.

Furthermore, the theme app extension is another notable update. It empowers merchants to add or remove apps in their Shopify store without the need for any coding expertise.

Lastly, the process of custom theme creation has been simplified. Now, you’re not bound to use Theme Kit for this task. Instead, you can opt for the more straightforward Shopify command line interface (CLI). Unlike Theme Kit, Shopify CLI integrates better with Shopify’s platform, making theme creation and management more efficient and less complex. Hence, it showcases Shopify’s commitment to improving the user experience for both developers and merchants.

Preparing to Create a Custom Shopify Theme

Before diving into developing your custom theme, there are some key points to remember. Ensure that your theme is designed with SEO optimization in mind and that it adheres to the best practices for user experience (UX).

Before you begin, clarity on the following aspects is crucial:

How do you envision your storefront? The elements like layout, colors, and fonts play a substantial role in defining the ambiance of your brand.
What’s the first action you’d like your visitors to perform? The layout of your theme will influence this. Would you prefer your visitors to explore collections, instantly make a purchase, inquire about a product, or add products to their cart?
What’s the number of steps a shopper has to navigate before completing the primary action? Keep in mind: if there are too many steps, there’s a higher chance the shopper might leave your store.

Top 5 Essential Pages for Shopify Theme Development

Building a theme on Shopify involves using templates to decide what content appears on each page. Depending on your requirements, Shopify allows you to create either JSON or Liquid templates. Although there is an option to create over a thousand JSON templates, ensure your templates can effectively cater to these five crucial pages.

Homepage: This is typically the first point of contact for shoppers seeking information about your brand. The homepage should portray your brand’s essence, personality, and, most significantly, the unique selling proposition. Additionally, it should be easy for visitors to navigate.
Product Pages: These are the spaces where customer testimonials, optimized product names, and descriptions should be displayed. They must also include an easily accessible Add to Cart function, complete with clear instructions.
Landing Pages: Landing pages provide the perfect platform to highlight your special offers, unique products, or new launches. Given their critical role in capturing visitor interest, your theme should enable comprehensive customization to bring to life compelling landing page designs.
Contact Us Page: A Contact Us page is a must-have for any Shopify store, facilitating easy communication between you and your customers. Your contact details should be prominently displayed on all pages. An even better approach would be to use a chatbot for immediate interaction.
Blog Page: Incorporating a blog page can be an effective strategy to attract more traffic to your store through engaging content. This page should be mobile-friendly and easy to navigate for the best user experience.

Requirements for Developing a Custom Shopify Theme

With the advent of Shopify’s Online Store 2.0, crafting a custom theme has become more accessible. However, it does involve some effort and, most importantly, necessitates proficiency in multiple coding languages and frameworks. For instance, to achieve your desired customization, you’ll need skills in CSS, HTML, JavaScript, Liquid, Ruby, and React.

Understanding Liquid and Its Importance in Building Shopify Themes

Liquid is Shopify’s own coding language, which is integral in building Shopify templates. It’s based on Ruby and forms the heart of Shopify themes, alongside other elements like HTML, CSS, and Javascript.

If you aim to create a Shopify theme from scratch, you’ll need to learn Liquid and have a good handle on Ruby. If you’re already comfortable with these, your job will be much simpler. Don’t worry if you hit a snag; there are plenty of cheat sheets and guides available to help you.

Shopify has already sorted out most of the e-commerce functions. Your job will mainly involve tweaking the layout and flow to construct your unique theme.

Also, it’s important to get familiar with Shopify’s Command Line Interface (CLI). Just like giving commands to your computer, Shopify’s CLI allows you to tell Shopify what actions it should take while building your theme.

The Command Line Interface, or CLI, allows you to carry out a variety of tasks, such as:

Previewing and testing your customized theme
Starting the creation of a new theme using Dawn as a foundation
Pushing and publishing your theme directly to your Shopify store via GitHub
Fetching data from your store
Running a Theme Check on your newly crafted theme

Next, you’ll need to install Ruby on your device. You can do this using a tool like RubyInstaller, making sure to choose version 2.7 or higher.

If you want to keep your local theme customizations in a Git repository, you’ll need to install GitHub. It’s also useful for pushing live updates. And naturally, you’ll need a text editor to make theme customizations.

Lastly, make sure you are the store owner, a staff member, or a collaborator. If you’re planning to develop multiple custom themes, it’s a good idea to sign up for the Shopify Partner Program. It’s free and gives you extra flexibility when creating tailor-made themes.

Four Simple Steps to Create a Custom Shopify Theme

Once you’ve prepared all the necessary tools, it’s time to start crafting your custom Shopify theme.

Install Shopify CLI on Your Computer

Your first step is to install Shopify CLI on your computer. This straightforward process involves using your computer’s terminal app to install and use Shopify’s CLI natively on Windows or macOS.

For Windows users, the Rubyinstaller.org package manager can assist in installing the CLI. After acquiring Ruby + Devkit from RubyInstaller, input this command in your terminal:

gem install shopify-cli

Mac users, on the other hand, can use Homebrew for the CLI installation. You’ll need to input the following commands to download the Shopify CLI:

brew tap shopify/shopify
brew install shopify-cli

After installation, ensure you’re running the latest version by typing ‘shopify version’ into your terminal. This will display the version currently installed. Next, you’ll need to authenticate by connecting the CLI to your Shopify store. To do this, type into the terminal:

shopify login --store . </code></td></tr></tbody></table></figure>
Replacing  with your store’s name. Remember to log in with the email associated with your Shopify store, not your Partners account.</p>
These steps will prompt you to log in to your store in a new window. Once you’re logged in, you’re authenticated and ready to go.

Make a Copy of the Dawn Theme

With the terminal still open, establish a local folder to store your theme’s copy. Once this is sorted, it’s time to make a copy of Dawn. You have two methods to choose from for this: accessing it via a Git repository or fetching the theme directly from Shopify.
If you opt for the Git route, enter
shopify theme init [ NAME ] [ options ]
This will draw from an existing Git theme repository. If you still need to designate a specific repository, the CLI will automatically make a copy of the Dawn theme for you.
Alternatively, if you prefer to fetch directly from Shopify, type:
shopify theme pull [ options ][/path/to/your/theme ]
This will pull the Dawn theme straight from Shopify and start making a copy. The ‘options’ here refer to optional parameters such as the THEME ID, which pulls a specific theme, or the ‘live’ option, which pulls the theme currently live on a store. You can find more information about these options here.
After copying Dawn, the CLI will display a confirmation message. Ensure you have all the required files for your copied theme in the local folder.
Next, open a new terminal in your coding editor and access your copied theme’s directory. After that, input:
shopify theme serve
This will upload your copied theme as a development theme on your store.
Once the theme is uploaded, you’ll receive the following:

A local development link accessible exclusively via Google Chrome. This link enables you to instantly update and preview changes to your sections and CSS in real time.
A link directs you to your online store editor.
And a link to share a preview with others.

Important note: The copied theme acts like a ‘ghost’ theme; it doesn’t appear in your Shopify theme library. However, through Git, you can add the theme to your library. This ensures that any modifications made locally aren’t lost if you log out through the CLI. Now, let’s proceed to the next step.

Connect Your Git Repository to Your Shopify Store and Local Directory

If you don’t already have a Git repository, it’s important to set one up and link it to the directory of your cloned theme. This ensures that any modifications you make locally are simultaneously updated in the Git Repository, facilitating the process of implementing live changes to your online store.
Next, visit your store and select the Add a Theme option. Shopify enables you to add a theme directly from GitHub to the theme library via the Git+Shopify integration.
Once this is done, the new theme will appear in your Theme Library, where you can preview it and begin customization. If you’re finding it difficult to synchronize local changes with the Git repository, this video guide can help simplify the process for you.




Implement Changes to Your Online Store

Once you’ve completed all necessary modifications and personalization to your theme locally, it’s time to launch it on your Shopify store! Firstly, you need to transfer the changes to the GitHub repository. These alterations will then synchronize with the theme in the Shopify theme library in a matter of seconds.
After that, when you preview the theme from your library, you’ll observe that it reflects all the changes you made locally as well as in your customizer.
Creating a Shopify Storefront Using the Hydrogen Framework
Hydrogen is a tool provided by Shopify that enables store owners to construct a storefront using Shopify’s infrastructure as the backend. You can link Hydrogen to Shopify using the storefront API to retrieve data. This allows you to avail all of Shopify’s e-commerce capabilities while still operating your own store.
Although Hydrogen is fairly new and more complicated, Shopify provides an extensive set of guides to assist you in setting up a Hydrogen storefront. However, it’s important to note that you can only create a web storefront, as Shopify doesn’t support custom stores.
To commence the creation of a storefront with Hydrogen, you’ll need to set up a Hydrogen app. This can be achieved by inputting the following code into your terminal:
npx create-hydrogen-app
After this, you’ll be asked to provide a name for the app. Then, you can employ your code editor to personalize and construct a web storefront. Hydrogen also provides a template to help you start developing your store swiftly.
Seek Assistance in Crafting a Bespoke Shopify Theme
Having a Shopify theme that is specially designed for your brand is great. But, creating one can take a lot of time and can be quite complicated. If you want a unique theme but don’t have enough time to build it, a web strategist can be helpful.
Bottom line
Mastering Shopify 2.0 theme development gives you the tools to craft an online store that stands out from the crowd and aligns with your brand’s unique needs. Whether you’re building from scratch or customizing existing templates, this guide helps you navigate Shopify 2.0’s robust theme development features with ease.

Sam Nguyen

Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.