Shopify Slater local to live development workflow (syncing from live)

Question

I have updated my frontend workflow from the old Shopify Themekit way to a Webpack way. Whilst it's great that I'm using the latest frontend tech I'm struggling with this new workflow.

In my old workflow, I could push changes to the live theme and pull changes from the live theme via Github and Shopify Themekit gem. Nothing was compiled. Whilst this was easier to manage it wasn't great for performance.

Local theme >> Github >> Live theme

The new worflow is (based on Slater Base theme):

Local theme >> Webpack >> Build >> Live theme

I have Github set up but it's not really doing anything as it's not helping to sync between themes but just pushing changes from my local development theme to the repo. Now the src files in my local theme are being compiled and minified by Webpack into a build directory and pushed into the appropriate format on Shopify live theme.

The problems I'm struggling with are:

1. How can I pull down changes from the Live theme? Is this even possible? Shopify apps make changes to the code on the live theme and clients change code/settings etc. I need to pull these down into my local theme to deploy as a whole otherwise themes will be out of sync and just a mess.

2. How do I use Liquid in the .js and .scss files in my src directory? At the moment, I can't add a .liquid extension to the file or at least it doesn't do anything.

Answer 1

Unfortunately, neither Slate nor Slater offer a built-in way to pull files down from Shopify. That said, I've had the same issue you're having where a client edits the code directly in the code editor without telling us then gets mad when we overwrite it.

As far as I know, there is no very elegant solution to this problem, since your CSS and JS only exist in their compiled forms on Shopify.

That said, you can leverage Theme Kit to make it a little easier. I recommend installing Theme Kit globally for this.

First, you'll need to make sure you have a config.yml file in your root directory. Follow these instruction in the Theme Kit docs to set that up.

Note that you can set up multiple environments in the config.yml file, just like you can have multiple .env files when using Slate or Slater. When running Theme Kit commands, they default to the development environment, but you can specify a different environment by adding -e [environment-name] to the end of a command.

Before you continue, make sure that your dist or build directory is up-to-date.

Once you've got your config file set up and you're ready to download the theme files, run:

theme download -d src -e [environment-you-want-to-download-from]

This will download the entire theme into your src directory (specified with the -d flag above).

Make sure you very carefully review the diff before you commit. You'll notice that the compiled assets are now in your assets folder of your src directory, and none of the files in your styles or scripts directories have been updated. Not good, but we'll fix that in the next step so go ahead and commit as long as all of the .liquid file changes look good.

Next, go into your dist or build directory, and open the compiled CSS and JS file(s) from the assets directory. Copy and paste the contents of each into the corresponding file in the assets directory in the src directory. Now you can examine the diff between the compiled file that's been uploaded to Shopify with what you compiled before downloading the theme. Scroll through and add the changes to your uncompiled files in the styles and scripts directories of your src directory. When you're done, delete all the compiled assets that were downloaded.

And there you have it. It's not pretty, it still involves quite a bit of manual work, and it's certainly not how these tools were intended to be used, but it solves this uncommon issue.

As for your second question, you can only have .css.liquid and .js.liquid files in the assets directory, and you need to add them to your layout file like so:

{{ "file-name.css" | asset_url | stylesheet_tag }}

{{ "file-name.js" | asset_url | script_tag }}

Note: Don't include the .liquid extension