Using a GitHub Submodule Workflow

When it comes to Syncify, everything out of the box works perfectly. Syncify allows us to upload to multiple themes (and stores), which allows us to have a development theme and a production theme. The only real issue I have with the workflow is integrating the clients. In my cases, unfortunately my clients would start making changes on a theme they weren't supposed to customize and it could take time and data lose if we aren't checking for these mistakes.

So I needed to come up with a way that allows me to publish a theme that the clients can edit and me to push new code to. After trying many different methods, I'm finally resting on GitHub Submodules. A submodule is virtually a repository inside a repository. It allows me to make changes and push those changes to to GitHub while not pushing my development environment with it. Since we have now a repository with just the the theme files in it, we can take full advantage of Shopify's native GitHub integration for themes.

Tip

If you're new to submodules, check out this blog post to get an understanding of what they are.

Shopify's GitHub integration will use a GitHub repository as a theme source, automatically pulling in changes as they are pushed. Additionally, any client customization will be pushed to the repository creating a single source of truth for both my client and myself. This is all well and good, but can it work with Syncify. Unfortunately not out of the box. So below I'll show you how I have set this up for my project going forward.

Instructions

1. Create a new private repository with a readme.md file.

   The readme.md file is important. The repository must not be empty and we're able to create a readme at repository creation.

2. Add a remote folder to the development environment using the URL you can see in our new repository setup page.

   git submodule add 'your-repo' 'remote-folder'

   Consider giving your remote-folder name something simple like 'remote'.

3. Add a script to build our files to our remote submodule.

   1. Add a new file in the base directory called remote.sh and copy/paste the following gist to it's contents.

      remote.sh

      If you're good at bash scripting, feel free to make some suggestions on what should be added to this script to improve it.

      If you changed the name of your remote folder, you'll need to make the appropriate changes in the script.

   2. Add a remote script into your package.json.

      "remote": "pnpm build; bash remote.sh"

   3. Run a remote build.

      pnpm remote

      Note ensure that your build is production ready with pnpm build first. Consider using a development staging theme.

4. If the remote theme looks correct, commit and push the theme to the remote repository.

   Initially, you'll need to stage and commit all the files for your theme, but this process will because easier to manage with smaller number of file after the first commit.

   You will need to make a commit on your development branch, updating the .gitmodules file. After every push in your submodule, you should commit the changes to your development repository too.

We now have a repository with our production built code on GitHub. You should now connect the repository with Shopify. See Shopify Docs for more details.