ShopifyとGithubを連携させる方法

Shopify

ShopifyとGithubを連携させる方法について紹介致します。
本記事はこんな方におすすめです。

  • Shopifyテーマを本格的に開発していきたい人
  • Githubでテーマを管理する際に、Shopifyと連携する方法について知りたい人

公式ドキュメント

Shopify CLIを使ってローカル環境を作るがまだな方は以下を参考下さい。

Shopify CLIを使ってローカル環境でテーマを扱えるようにする方法
Shopify CLIを使ってローカル環境でテーマを扱えるようにする方法について紹介致します。Shopify Online Store 2.0のテーマをローカルで扱えるようにしたい、Shopifyテーマを本格的に開発していきたい人におすすめの記事です。つまずきそうなポイントについても解説しています。

1.before start

  • テーマ構築をする上でdevelopment storeを使用したい場合、shopify partnersアカウントを作成してログインし、development storeを作成しておくこと。
  • Gituhubブランチのフォルダ構成はデフォルトShopifyテーマの folder structure と一致させておくこと。

2.Githubリポジトリの作成とテーマのアップロード

Githubアカウント持っていること前提。
またローカルマシンにGitがインストール済みであること。(git commandが使える)

リポジトリ作成自体はここでは省略。

Gituhubの基本的な使い方については以下の記事にて解説しています。

【初心者向け】GitHubの基本的な使い方からPRの作り方について解説
GitHubの基本的な使い方について紹介致します。GitHubを使うことでソースコードのバージョン管理を簡単に行うことができます。またPR(Pull Request)の作り方からmerge(マージ)する方法や、よく使うGitコマンドについても紹介いたします。

またShopify CLIのインストールの設定も終わっていること。

Githubへテーマのアップデート

Shopifyテーマ管理用のリポジトリを作成したら、ローカル環境にてshopifyテーマのディレクトリへ移動します。

git init で初期化

git init

git-init


git add -A でindexへ全て追加

git add -A

git commit でローカルリポジトリへ追加

git commit -m "first commit"


デフォルトブランチmasterからmainに変更

git branch -M main

ローカルとリモートの紐づけ

git remote origin https://github.com/xxxxx/xxxxxx.git

git-branch-git-remote


リモート側にプッシュ

git push -u origin main

git-push


Github側

github-main

ShopifyのテーマフォルダがGithub側に表示されればOKです。

 

3.ShopifyとGithubの連携

shopify-github

管理画面にて、オンラインストアの「テーマ」内にあるテーマライブラリーから「テーマを追加」をクリックし、「Githubから接続する」を選択。

shopify-github2

右側に表示される「Githubにログインする」をクリック。

shopify-github3

Githubアカウントを入力して「Sign in」をクリック。

shopify-github4

認証後、「Authorize Shopify Online Store」を押下できるようになったら、クリック。

shopify-github5

「アカウントを追加」を押下。

shopify-github6

アカウントを選択。

shopify-github7

「Only select repositories」を選択して、「Select repositories」から連携するGithubのリポジトリを選択します。

shopify-github8

対象のリポジトリを選択。

shopify-github9

ブランチを選択して「接続」をクリック。

shopify-github11

選択したリポジトリが、テーマライブラリーに表示されればOKです。
「アクション」から「公開」を選択します。

shopify-github12

確認用のモーダルが表示されるので、「公開」をクリック。

shopify-github13

現在のテーマのところに連携したGithubリポジトリのテーマが表示されれば設定完了です。