Shopify CLI 3.0: What you need to know?

Six years ago, I needed to edit a Shopify theme to add a custom tiled style banner section for an elegant brand. Although I had never touched Shopify’s code base before, I followed a liquid guide and was able to create a basic tiled banner section. I found liquid to be very effective and easy to understand, despite its limitations. However, at the time, it was a small project and I was not familiar with Shopify’s development environment. I simply finished coding in the code section of the Theme Optimisation page.

Of course I haven’t stop to follow Shopify side. In that time I just tried Theme Kit from Shopify.Fast forward to today I need to develop Shopify Theme for custom needs. I just start to discover Shopify CLI 3.0 and Github Integration. I want to share my Shopify Theme Development Workflow. Shopify CLI 3.0, This new version is designed to make developing Shopify applications easier and more efficient.

Getting Starting Shopify Development

I followed the Shopify documentation precisely to install Shopify CLI 3.0. The installation of Shopify CLI requires a long list of prerequisites, but by using Homebrew, all of the necessary requirements, including Ruby, Node.js, and Git, can be installed through brew.

Shopify CLI macOS installation

If you do not have Homebrew installed on your local environment, please visit the brew.sh page and install Homebrew first. Once you have installed Homebrew, you can easily install Shopify CLI without any issues.

brew tap shopify/shopify
brew install shopify-cli

Shopify CLI for theme development

After installing Shopify CLI, you can use the ‘shopify’ commands on your command line to create, manage, publish, and perform other tasks related to Shopify themes. Let’s take a quick look at the Shopify CLI commands for theme development. But before that, let’s take a look at the syntax. The CLI syntax is easy to use.

shopify [topic] [command]

To use the Shopify CLI commands for theme development, start with the ‘shopify’ keyword followed by the topic, which in this case is ‘theme’, and then specify the command. Let’s begin with creating a theme from scratch.

Create Shopify Theme from Scratch

You can use your own code folder to create a Shopify theme; just create a directory to keep your Shopify themes. Once you are satisfied with the installation location, the first command you should learn is:

shopify theme init

Basically that command clones the standard Dawn theme from GitHub and creates the necessary directories for you. This is an excellent way to get started with exploring the Shopify architecture. Let me give you a quick walkthrough of the file structure, and we will focus on:

Shopify Development File Structure

Let’s take a quick look at the folder structure.

assets: where we will keep all of the assets used in the theme, including additional images, CSS, and JS files.

For accessing assets folder use the asset_url to reference files.

{{ 'cart.js' | asset_url }}

config: where we keep configuration files for a theme, as the name implies. We also create a Theme Settings area that can be accessed from the theme editor to store values. This is where we store important variables for theme options.

I prefer to create global variables using settings_schema and define them in settings_data. This way, I can access the stored variables globally. As a tip for beginners, we can think of this as our global context. In React, we use the Context API to store global variables for settings, which is a similar approach. If I want to add custom settings for a theme, I create the variables in this area. For example, I can define variables for the logo color, header name, favicon, custom slider images, and the SEO meta description of specific pages.

For accessing the values for config file we use settings object.

{% if settings.favicon != blank %}
  <link  href="{{ settings.favicon | image_url: width: 32, height: 32 }}" rel="icon" type="image/png">
{% endif %}

layout: Understanding layout is crucial, especially since Shopify uses a section-based template system. I like to think of Shopify templates as independent components. Layout files determine which templates are rendered to the user based on the template’s design. If we examine the theme.liquid file in the layout folder, we will notice the use of the {{ content_for_layout }} tag, which returns content based on the current template.

<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
      {{ content_for_layout }}
</main>

locales: This directory contains translation files that enable easy editing of translated theme files from the theme editor.

sections directory contains our component-based sections, as well as the liquid or JSON files that group them together. It’s also where website owners can add, edit, and remove blocks.

snippets: This directory contains our smallest components, which are also in liquid file format. Examples include SVG icons, blog lists, blog cards, breadcrumbs, and more. We use snippets with the ‘render’ tag.

{% render 'filename' %}

templates: this directory contains the theme’s template files, which allow us to manage each page individually. Examples include product, home page, 404, collection page, collection list, and more. Shopify supports two types of file formats for templates.

JSON

JSON templates used by blueprint for your page. We define our pages section by section easy to add, remove and edit via theme editor. I strongly recommend learning the JSON method for creating pages.

LIQUID

Liquid templates contain HTML and liquid together. And also I called it Vanilla way to create pages in Shopify.

This is a brief explanation of the file structure. I believe it’s important to understand it before learning CLI commands. Let’s continue.

Shopify Theme Commands

Before using these commands, you can create a free Shopify Partner account and a development store to try out Shopify. Once you have a development store, you can use it for your store.

shopify theme pull — storeUrl

This command requires you to log in to your Shopify Partner account in your browser using Shopify Auth. It pulls your theme files from your Shopify store to your local environment.

shopify theme dev

This command runs your theme on your local environment. The good part is that your Shopify store syncs first, and you will see your products and data.

shopify theme check

This command is useful for checking your theme for errors, although sometimes it won’t affect your theme’s running.

shopify theme push

This command pushes all of your theme code to your Shopify store, allowing you to view and make final touches and publish from your admin panel.

shopify theme publish

However, you can also publish your theme directly from the CLI.

shopify auth logout

If you’re working on multiple stores, you’ll need to run this command and log in to the other store.

In general, these commands are enough for my daily development workflow.

Which one you should prefer: Github Connection or Shopify Code Base

Photo by Yancy Min on Unsplash

Use always “Git” in any case

Yes, that’s a tricky question for me. If I only need to make small edits without any functional changes, I prefer using the Shopify code base. However, this doesn’t stop me from using Git and GitHub. But I don’t prefer to use the GitHub connection in such cases because this type of development usually involves a lot of theme customisation from the admin panel.

GitHub Connection

If I need to redesign or build a new theme from scratch, I prefer using the GitHub connection. If the project already has an existing theme and we’re making a redesign based on that theme, I first pull the theme and prepare the project with new packages, libraries, and ignore files. Then, I push it to GitHub and create two branches: dev and main. I connect both branches to the current store and do all the work on the dev branch. After testing and getting approval from the customer, I merge with the main branch and publish it. As a junior developer, this is my preferred approach to the development process for Shopify projects.

When you make changes using your Theme Editor, Shopify Bot commits those changes to your GitHub repository. Before making changes to your local code base and attempting to push, don’t forget to pull any current changes. Additionally, you can consider using a GitHub CI/CD pipeline to automate the process. While I haven’t tried it yet myself, I plan to do so soon.

Conclusion

Of course, the CLI is not limited to the functions that I have mentioned here. This is my hand-on experience as a Junior Developer, how i explore and Shopify Development environment. How I adapt new stack. However, Shopify CLI is a versatile tool that can be used for a wide range of tasks related to Shopify apps, themes, and custom storefronts. Moreover, it can help automate various development tasks. As I gain more experience using it, I’ll share some of the specific use cases I come across. I am planning to write next Tailwind CSS, NPM Libraries, 3rd Party JS libraries and building Landing pages and using headless React apps with Shopify.