Hello, I am new to Shopify theme development (and web development as a whole). I have been working in WebStorm with Shopify CLI to create a theme from scratch. I want to know if there is a way to make automatic updates to the live theme (the store) as I work on it locally.
Essentially, what I want to do is run “shopify theme push --live” but with the previewing functionality of “shopify theme dev”, meaning all changes I make are automatically visible but with the view that a person using the theme would have (inside the theme editor), rather than just a webpage.
Is there any way to do this?
@JahvonteOakley,
Yes, you can achieve something close to this workflow using Shopify CLI but there is no any built in commands. You can use nodemon or github.
I’m not sure if this is answering your question, but if you’re tracking your code changes (surely you are) with Github, you can connect your Github account to your store and use your ‘production’ or ‘main’ branch as your live theme. Then, every time you push changes to that branch it will automatically update the theme. This is useful for Staging/Testing themes as well if you or someone else wants to QA changes before sending them live!
I was trying to work with nodemon but I don’t know how to handle prompts. “shopify theme push --live” elicits a prompts asking if you to confirm the action I believe. Do you know how to respond to that prompt with nodemon?
I was using git for a little bit but you still have to manually push changes with that option. I want something that is automatic. See, as far as the view goes, that’s all good. I can use theme dev and see what I am doing. But when it comes to doing things like adding a section with an image that the shop owner can change, I need to be able to see their view inside the theme editor. And I can do that, but only if I push the theme manually. That’s super tedious though especially as a beginner not knowing what I’m doing. The constantly typing in prompts and jumping back and forth to see if that last change to my code worked gets annoying real quick.
@JahvonteOakley ,
Here’s a complete workflow using nodemon to automatically push changes to your theme:
1.) Install nodemon Globally → npm install -g nodemon
2.) Create a nodemon.json Configuration File
Inside your Shopify theme project folder, create a file named nodemon.json and add the following configuration:
{
“watch”: [“./”],
“ext”: “liquid,css,scss,js,json”,
“ignore”: [“node_modules”, “.git”, “README.md”],
“exec”: “shopify theme push --live”
}
3.) Start Watching for Changes with this command → nodemon
Let me know if you need any further assistance. I’d be happy to help!