How to build Shopify Store with Liquid: From Local Development to Production Deployment
In this comprehensive guide, we will walk you through the process of building a Shopify store using Liquid, from setting up your local development environment to deploying your site to production. Whether it’s your first time
Introduction: Whether you're working with Shopify or looking to expand your development skills, this article will provide you with the essential steps and insights to get started. Let’s jump right in!
Understanding Liquid
Liquid is the backbone of Shopify theme development. It’s a simple yet powerful templating language that allows you to create dynamic content and customise the appearance of your online store. It helps us make our Shopify store work just the way we want. We can use different values to do cool things like loops and if-else conditions.
It’s like magic! We can also use the same code repeatedly, which saves us time and makes things easier. For those of you who come from WordPress or PHP development, liquid is something like twig template language.
Liquid reference: https://shopify.dev/docs/api/liquid
Exploring Shopify 2.0 Themes
Shopify 2.0 themes offer enhanced flexibility and functionality compared to their predecessors (liquid or static templates).
These themes give you more freedom to make your store look exactly how you want it—and they run faster, too! Using Shopify 2.0 themes, we can customise and reuse almost every section in our theme, making theme development easier and simpler.
We can leverage JSON files to adjust our sections in the Shopify Page editor. With the new 2.0, users with zero coding experience can edit how they want and add much content to improve their store appearance.
Setting Up Your Local Environment
Before diving into Shopify theme development, you must set up a local development environment. Shopify CLI (Command Line Interface) is a powerful tool streamlining theme development tasks.
Shopify CLI is a tool to build extensions and themes for your Shopify store. Using Shopify CLI, you can easily create a starter project, so you don’t have to start from scratch. They also provide a local development server, allowing you to freely develop a theme, just like building apps using modern stacks like React, Next.js, or Vue.js.
We will not be giving you step by step guide on how to set up Shopify CLI, because the Shopify team itself already covered really good tutorials here: https://shopify.dev/docs/themes/tools/cli/install
Theme structure on Shopify
Shopify uses a theme as their native storefront appearance, so they also have guidance and example of folder and file structure that we should follow, it is to ensure all themes that we developed are compatible with any integrations and no vendor locking issue in the future.
Here is the Shopify theme structure (2024)
├── assets
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
└── customers
For the explanation of each folder and file, you can find here: https://shopify.dev/docs/themes/architecture#directory-structure-and-component-types
Developing and Testing Your Theme Locally
This section will dive into the practical steps of starting a theme using Shopify CLI commands.
We will learn how to initiate a new theme using ‘Shopify theme init’ and pull it from the Shopify Dawn theme as the starter.
Shopify theme init
We will explore how to develop a theme locally with a specific store connected to your partner account (https://www.shopify.com/partners) using ‘shopify theme dev’.
shopify theme dev
Additionally, we will cover ‘shopify theme pull’, a crucial command to get all updates made on the store Shopify site, as these updates are only stored within Shopify. Regularly performing this command ensures you have the latest updates.
shopify theme pull
Lastly, we will discuss ‘shopify theme push’, which allows you to push your local changes into the store. This ensures that visitors or clients can see the updates from the live link.
shopify theme push
Reference of Shopify CLI command: https://shopify.dev/docs/themes/tools/cli/commands
An alternative way if you already have a GitHub account and want to store your theme in a GitHub repository is to leverage Shopify infrastructure to push changes into commit every time someone changes content, settings, or adds a section in the live site theme. This is a more convenient way to keep everything synchronised.
Reference GitHub integration: https://shopify.dev/docs/themes/tools/github/getting-started
Deploying Your Theme to a Live Shopify Site
Once you’ve built and tested your theme locally, it’s time to deploy it to a live Shopify site. Leveraging either GitHub or Shopify CLI to push a theme to production is easier than doing it manually.
However, please be careful when updating your theme if you push to the live site, as Shopify may prompt you to confirm the update.
To do this, you can use ‘shopify theme push’. Afterward, a list of themes in your store will be displayed. You can then decide which theme on the live site you want to update.
shopify theme push https://gist.github.com/Wijayaac/f1ac3ca682bc658a9aa6adfc4022b249
Common Issues When First Time Developing a Theme
Cannot see the store preview on the live site
- Make sure your developed theme has already been pushed.
- Make sure your theme is published as a live theme. Check this if there is no published theme: use this command to publish a theme: “Shopify theme publish”.
Made a change from Shopify Editor but did not see it on my development
- Try to pull updates from the theme you are changing, usually the theme has a name on the top left corner, and when pulling a theme you can select it. To do pulling, use the command shopify theme pull.
Local Development Port already used
- If you want to develop multiple stores at the same time, make sure you are using different ports when running the ‘shopify theme dev’ command since the default port is 9292, and if some application or service is already using it, there is no fallback or alternative port is, but you can assign the custom port you want by adding (–port) parameter for example 9191 ( any port that is not conflict with existing services or applications)
Conclusion
In conclusion, learning Shopify theme development and Liquid can bring many exciting opportunities for anyone interested in creating online stores. By mastering the Liquid basics, using the new Shopify 2.0 theme structure, and mastering the development process, you’ll be ready to create amazing online stores that really work. So, get ready to jump into Shopify development and let your creativity shine in the e-commerce universe!
This article is written by Kadek, Upscalix CMS Developer.
