Serving and Deploying Shopify Themes with Shopify CLI

Serving and Previewing Your Theme Locally

The first step in any development loop is to see your work. In the world of Shopify themes, this is handled by the shopify theme dev command. This command is the equivalent of npm run dev in a Next.js or React project. It bundles your local files, connects to your store's data, and serves everything up on a local server with hot-reloading enabled.

Here's what happens when you run it:

1. It authenticates with the store you last connected to.
2. It uploads your local theme to your store as a special, temporary development theme. This theme is hidden from your theme library and only accessible to you.
3. It starts a local server and provides you with URLs to preview your work.

In your terminal, navigate to your theme's root directory (e.g., my-shopify-theme) and run the following command:

shopify theme dev

Note: In older tutorials, you might see shopify theme serve. The command was renamed to dev to better align with modern web development conventions, but serve still works as an alias.

After running the command, your terminal will display something like this:

You get three important links:

• Local Preview URL (usually http://127.0.0.1:9292): Open this in Chrome. You'll see your theme running with your development store's actual products, collections, and data.
• Theme Editor Link: This takes you to the Shopify Theme Customizer for your temporary development theme.
• Shareable Preview Link: A temporary link you can send to others to get feedback.

To see this entire process in action, the official ShopifyDevs channel has an excellent walkthrough.

The Magic of Hot Reloading

The biggest advantage of local development is the immediate feedback loop. With shopify theme dev running, any change you save to your local Liquid or CSS files will be injected into the browser automatically, without a full page reload. This is the Hot Module Replacement (HMR) you're used to from React/Next.js.

Let's see just how fast it is. The following video gives a great side-by-side demonstration of making a change in VS Code and seeing it appear instantly.

Now, try it yourself!

1. With shopify theme dev running, open your project in VS Code.
2. Navigate to sections/announcement-bar.liquid.
3. Find a line of text (for example, the default "Welcome to our store") and change it to something else.
4. Save the file and watch your browser. The change should appear instantly.

A Critical Workflow "Gotcha": The Ephemeral Development Theme

Your curiosity, which we've established is a key part of your learning style, might be asking: "If I use the theme editor link for my dev theme and change a setting, like the announcement bar's color, what happens?"

This is a fantastic question and points to a crucial concept.

When you use the Theme Customizer on a development theme, those changes are not saved back to your local files. The development theme is temporary. If you stop the dev server and restart it, any settings you changed in the UI will be lost. Your local files (.json files in the templates and config directories) are the single source of truth during development.

This video explains this "gotcha" perfectly. Understanding this will save you a lot of confusion.

The takeaway: use shopify theme dev for coding and instant previews. If you need to test changes made in the Theme Customizer, you must first push your theme.

Pushing Your Changes to Shopify

Once you're happy with your local changes, it's time to "deploy" them. The shopify theme push command uploads your local theme files to a permanent theme in your store's theme library, overwriting its contents.

This is the final step in making your changes stick.

To see this in action, watch the next clip from the official ShopifyDevs video.

The push command has some very useful flags:

• shopify theme push --unpublished: This creates a brand new, unpublished theme in your library instead of overwriting an existing one. It will prompt you for a name. This is great for pushing up the first version of a project.
• shopify theme push --live: This pushes your changes to the store's currently published, live theme. Use with caution!
• shopify theme push --theme [THEME_ID]: You can specify the exact ID of the theme you want to push to, which is useful for scripts and automation.

Your Complete Theme Development Workflow

Let's tie everything together. Here is the standard, battle-tested workflow for Shopify theme development, which will feel very familiar to you.

The cycle is:

1. Pull: shopify theme pull to get the latest version of an existing theme.
2. Develop: shopify theme dev to start the local server and make code changes with hot-reloading.
3. Push: shopify theme push to deploy your local changes to a permanent theme on your store.

Integrating with Git, this becomes:

1. git pull (to get the latest from your repo)
2. shopify theme dev (to code and preview)
3. git add ., git commit, git push (to save your work to version control)
4. shopify theme push (to deploy to Shopify for review or to go live)

Conclusion

You have now mastered the complete local development loop for Shopify themes. This workflow is the foundation for all professional theme development and is a crucial skill for your freelance career.

Here are the key takeaways:

• shopify theme dev is your go-to for an iterative development process, providing a hot-reloading server connected to your store's data.
• The development theme created by dev is temporary; any changes made to its settings in the UI will not be saved. Your local code is the source of truth.
• shopify theme push is the command to deploy your local changes to a permanent theme in your Shopify admin, making them ready for review or publishing.

With this workflow established, you are fully equipped to start building. In our next lesson, we will dive into the templates directory and build a custom product template from scratch to display product details, images, and variants. You'll be applying today's CLI commands to see your creation come to life.