"i only speak liquid" #52: Integrating with GitHub 🤝

Written by Mike (a Storetasker Expert)

Author

Mike Downes
June 12, 2024

Hey everyone!

Bittersweet to say this is my 4th of 4 contributions to the i_only_speak_liquid newsletter! I'm Mike, a freelance web developer and a member of the Storetasker network.

PS: To sponsor our next edit: Submit your info here.

What I’ve been thinking about:

When working with Shopify themes, I've found Git + Github  to be an instrumental tool to manage and control deployment of site changes. Many of you reading this might already know about this, but in case you don't, let's do a quick walkthrough on how you can pull down a Shopify site's code to manage it in a more controlled manner.

1. Download your site’s code

Start by installing the Shopify CLI (Command Line Interface), it's practically a must-have when working with themes. Once it's installed, open a terminal window and navigate to a folder where you'll download the theme files. Here's a simple example.

cd ~/Development/shopify-themes
mkdir my-client-theme && cd my-client-theme

and then download your theme code with...

shopify theme pull --store {store-name}

This will prompt you to login with your browser. Once complete, the terminal output will provide your list of themes, select the one you want to download.

2. Initialize Git

Now that you've got your theme files, lets initialize a new Git repository. This sets up the necessary files and folders for version control.

git init

Make an initial commit to get things rollin'

git add .
git commit -m "Initial commit"

3. Push your theme code to GitHub

Log in to your Github account and create a new repository. Don't worry about initializing it with a README, .gitignore, or license. Take note of the URL for your new repository. Back in the terminal, let's add this repository as a remote repository. 

Remember to replace that link with your new repository URL, as well as the .git extension at the end of it.

Nearly there! Let's push our local code files to the Github repository:

git push -u origin main

4. Connect GitHub to Shopify

You'll need to install the Shopify Github App to complete this final step. This will allow the connection between Shopify and GitHub.

Then in Shopify, navigate again to the Themes section of the Shopify admin. Under the Theme library section, click Add theme > Connect from GitHub. Follow the steps to select your GitHub repository and the "main" branch. Voila!

Final Word

With git integrated into your workflow, you can manage different versions of your site with ease, whether it's creating a theme to QA your code before pushing it to live, or a temporary / seasonal version, you'll have mastery over the changes.

  1. Shopify Liquid VS Code Extension - A very handy VS Code extension for helping you write cleaner and bug-free liquid code

  2. Shopify Section Schema Builder - A simple web-based tool for building the schema portion of a Shopify section

  3. Shopify CLI Docs - Official documentation for the Shopify CLI. It’s one you’ll want to bookmark!

1 app I like:

This one isn’t a Shopify app, but as a freelancer it has become a pivotal application in managing just about anything related to my business. I track projects, expenses, clients, and more through this highly extendable product. I’m sure you’ve heard of it already, consider this my endorsement.

One learning as a freelancer:

Shopify’s ecosystem continues to impress with opportunities to create a development career for yourself, from themes to apps to client consultation and beyond. While we’re all hopefully loving our time as Shopify developers, I think it’s useful to remember that you are also gaining valuable experience as an eCommerce developer. If you can find the time, you should explore other players in the eCommerce space, from Wordpress-based WooCommerce, to open-source alternatives like Medusa.js. Gaining a better understanding of the landscape may inspire you to take your career in a direction you had never considered!