Shopify

[Shopify] GitHubと統合する方法

この記事で解決できるお悩み
  • ShopifyとGitHub統合の概要を知りたい
  • ShopifyとGitHubを統合する手順を知りたい
  • 既存のテーマでShopifyとGitHubを統合する方法を知りたい

早速「Shopify GitHub integration」について試してみました。

Shopify GitHub 統合についての概要

Shopify GitHub integration」は、2021年6月30日にオンラインで開催された「Shopify Unite 2021」にて発表されました。

ShopifyとGitHub上のリポジトリを接続すると、接続されたShopifyテーマが更新されるたびに、該当ファイルを自動的にpullまたはpushします。

これにより、ブランチへのコミットや、管理画面のコードエディタ(オンラインストア→コードを編集する)や、テーマエディター(オンラインストア→カスタマイズ)で編集・設定されたテーマを簡単に追跡し、最新の状態に保つことができます。

1つのShopifyストアに接続できるGitHubアカウントは1つのみです。

ShopifyをGitHubに統合する方法

ShopifyとGitHubを統合するためには、以下が必要です。

  • テーマの管理権限を持つスタッフアカウント・またはオーナーであること(コラボレーターアカウントでは使用できない)
  • GitHubで管理したいテーマがGitHub上に存在する(ない場合は作成しpushする)
  • GitHubにアプリを追加する権限(ない場合は管理者に依頼)

ここから実際にGitHubに接続してみます。

GitHubにログインする

まずテーマの管理権限を持つアカウントにて、ストアの管理画面に storename.myshopify.com/admin のURLから直接ログインします。

次に、「オンラインストア」→「テーマ」に移動し、以下の「テーマの追加」から「GitHubから接続する」を押します。

すると画面右に以下が表示されるため、「GitHubにログインする」ボタンを押し、GitHubのログイン画面が開いたらまずはログインをします。

GitHubアカウントでShopifyを承認する

GitHubにログイン後、以下の承認画面が開くため、内容を確認して「Authorize Shopify Online Store」ボタンを押します。

GitHubにShopifyアプリをインストールする

Shopifyにアカウントをまだ接続していない場合は、以下の表示になるため、「GitHubで設定を表示する」を押します。

すると、「Shopify Online Store」のGitHubアプリのインストール画面が開くため、接続するリポジトリを選択(全ての場合は「All repositories」)して、「Install」ボタンを押します。

これでアプリがインストールされ、管理画面に戻って画面右に以下の「アカウント」と「リポジトリ」を選択する画面が表示されます。

※なぜか表示されない場合は先程の1つ前の画面になるため「もう一度お試しください」ボタンを押して再度試します。

テーマを接続する画面に進めずに、以下の画面が表示される場合がありますが、一度ログアウトし、パートナーアカウントのストア管理からではなく、storename.myshopify.com/admin のURLから直接ログインすると入れました。(ただこれでも入れない場合があり、今のところ原因不明です)

テーマをGitHubアカウント・リポジトリに接続する

アカウントを選択したら、リポジトリを選択すると、

ブランチが表示されるため、接続したいブランチの右にある「接続」ボタンを押します。これで接続が完了です。

Shopify管理画面で接続されていることを確認する

これでGitHub上のShopifyテーマが以下のようにShopifyに統合されました。

まだ公開はされていないため、公開する際は「公開する」を押します。

ShopifyとGitHubの接続をテストする

ではテーマを更新するとどうなるか見てみます。

Shopifyのテーマエディターから更新してみる

Shopify管理画面のテーマエディター(オンラインストア→カスタマイズ)から、試しに「告知バー」のテキストを変えてみます。

ログを見てみると、

以下のように更新されました。

GitHub上でも変わっていることが確認できます。

Shopifyのコードエディターから更新してみる

次にコードエディター(オンラインストア→アクション→コードを編集する)から、試しにtheme.liquid のbody直下に {{ template }} を追加してみます。

画面左上にテンプレート名が表示されました。

GitHub上でも更新されていました。

Shopify CLIから更新してみる

CLIからも更新してみます。試しにindex.jsonのバナー文言を変えてみます。(通常は管理画面から変えると思いますが例として)

プレビューで確認したら、shopify theme push でプッシュし、GitHubで確認してみるとこちらも正しく更新されていました。

[Shopify] CLIを使ってローカルでテーマを構築する方法 早速「Shopify CLI」を使ってテーマを構築する方法について解説します。 Shopify CLI for テーマ...

複数のストアに同じリポジトリを接続し、片方で更新してみる

2つの別々のストアに、同じレポジトリを接続して、片方から更新してみるとどうなるか。(あまりやらないと思いますが・・・)

これは両方に同期されるため、2つのストアとも同時に更新されました。

既存のテーマをGitHubに統合する

オンラインストア2.0に対応したDawnテーマではなくても、GitHubと統合することは可能です。

ただし、以下のテーマ構造に沿っていることが条件となります。

└── project
    ├── assets
    ├── config
    ├── layout
    ├── locales
    ├── sections
    ├── snippets
    └── templates
        └── customers
[Shopify] 既存テーマをオンラインストア2.0に移行する方法 早速Shopifyの既存テーマをオンラインストア2.0に移行する方法についてまとめます。 Liquidコードを編集する...

GitHubから連携を解除する

GitHubから連携を解除するには、管理画面の「オンラインストア」→「アクション」→「GitHubから連携を解除する」を押します。

すると連携は解除されますが、Shopify上には他の通常のテーマと同じように残ります。

また、完全にGitHubとの接続を解除したい場合は、GitHub上のアカウントメニューから「Settings」→「Applications」の「Installed GitHub Apps」タブからアプリの削除を、「Authorized GitHub Apps」から承認の解除をする必要があります。

以上です!

[Shopify] Dawnテーマの概要と追加できるセクション一覧 早速ShopifyのDawnテーマについて解説していきます。 Shopify Dawnテーマの概要 「Dawn」は、...

ShopifyでのECサイト制作・運用代行を行っております。
以下の構築プラン詳細をご確認のうえ、お気軽にお問い合わせください。

Shopifyの構築について相談する(お見積もり無料)

Shopifyの無料体験をはじめる

ABOUT ME
toru
フリーランスWebディレクター・UI/UXデザイナー。大手Web制作会社10年・フリーランス6年の経験をもとに、Webサイト・ECサイト構築・運用支援を行うかたわら、Web制作スキルを身につけたい方や、フリーランスを目指す方に向けて、自分の経験をもとに役に立つ情報をわかりやすく発信しています。