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 devcommand 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 yourShopify 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.
Top comments (0)