If you’re looking to set up a Shopify theme development environment using GitHub, this guide will walk you through the essential steps. By the end, you’ll have a development setup where your local environment, live store, and GitHub repository are fully synchronized.

Step 1: Create a GitHub Repository

Start by creating a new GitHub repository. You can do this directly on GitHub or through the command line.

git clone git@github.com:khalifalmahmud0/dummy-shop.git
cd dummy-shop
mkdir -p config layout sections templates && touch config/settings_schema.json layout/theme.liquid sections/header.liquid templates/index.liquid 
.gitignore
code .

This will clone your GitHub repository and open the folder in your preferred code editor (in this case, VSCode).

Step 2: Create the Basic Shopify Theme Structure

Next, you’ll need to set up the basic folder structure for your Shopify theme. Create the following directories and files:

config/settings_schema.json
layout/theme.liquid
sections/header.liquid
templates/index.liquid 
.gitignore

Here’s a breakdown of what these files are for:

config/settings_schema.json : Holds the configuration for your theme’s settings.

[]

layout/theme.liquid : The primary layout file for your Shopify theme.

<!doctype html>
<html lang="en">
  <head>
    {{ content_for_header }}
  </head>
  <body>
    {{ content_for_layout }}
  </body>
</html>

sections/header.liquid : shopify theme dev command mainly not work without this

<h1>Header Section</h1>

templates/index.liquid : The default template for your store’s homepage.

{% section 'header' %}
<h1>Hello Shopify! Allah Is ALmighty</h1>
.gitignore : ignore file folder
.shopify
.history

Step 3: Push to GitHub

Once the folder structure is set up, commit your changes and push them to your GitHub repository:

git add .
git commit -m "feat: initial commit"
git push origin main

Step 4: Log In to Shopify and Load the Theme

Log in to Shopify using the Shopify CLI to authenticate your store:

shopify login

Next, load the theme from your Shopify Partner Admin:

Log in to your Shopify Partner Dashboard.
Select the store you’re working on and load your theme.

Step 5: Create a config.yml File

To connect your local development environment to your Shopify store, you’ll need a config.yml file. Here’s what it should look like:

development:
  password: "<YOUR_ACCESS_PASSWORD>"
  theme_id: "<YOUR_THEME_ID>"
  store: "<YOUR_SHOP_URL>"

Let’s break down each part:

password:
This is the API key for theme access. To get this:
Go to Apps in your Shopify admin. > Install the Theme Access app. > Generate a password using the app.
Note: The password will only be shown once, so keep it safe!
theme_id: You can find this by visiting the theme editor page in Shopify. The theme ID is visible in the URL.
store: This is the store’s domain (e.g., k-halif.myshopify.com).

Step 6: Push the config.yml to GitHub

Once the config.yml file is set up, commit and push the changes:

git pull origin main 
git add .
git commit -m "feat: create config.yml file"
git push origin main

Step 7: Start Theme Development

With everything in place, you can start developing your Shopify theme. Use the following command to watch for changes and synchronize them with your Shopify store:

shopify theme dev & theme watch --allow-live

Conclusion
You’ve now set up a complete Shopify theme development environment with GitHub integration! By following these steps, your local, live, and GitHub environments will stay in sync, making it easier to collaborate and manage your theme’s development process.