Shopify ストアを GitHub と連携させる方法を徹底解説！
目次
はじめに
皆さんは Shopify ストアと GitHub を連携させていますか？今回の記事では、Shopify ストアと GitHub を連携させる方法を徹底解説します。ストアと GitHub を連携して複数のストアのデータをバージョン管理できるようにしましょう。
早速、連携させる方法を解説していきます。
Shopify ストアを GitHub に連携する方法
Shopify ストアを GitHub に連携する手順は以下のとおりです。
- GitHub 上にリポジトリを作成
- ストアのテーマファイルをダウンロード
- テーマファイルを GitHub に Push
- Shopify ストアと GitHub を接続
- 接続の確認
まずは、GitHub 上にリポジトリを作成していきましょう。
GitHub 上にリポジトリを作成
Shopify ストアのデータを保存するためのリポジトリを作成していきます。まずは、GitHub にログインしましょう。ログインしたら、画面右側のメニューの「Your repositories」を選択します。
画面右側の「New」よりリポジトリの作成ができます。
「Repository name」や「Description」を入力しましょう。また、リポジトリを公開したくない場合は「Private」を選択するようにしましょう。
画面を下にスクロールして、「Create repository」をクリックします。
「Repositories」に新しく作成したリポジトリが追加されています。
これで、リポジトリの作成ができました。次は、ストアのテーマファイルをダウンロードする方法を解説します。
ストアのテーマファイルをダウンロード
ストアのテーマファイルをダウンロードするには、管理画面の「オンラインストア」>「テーマ」を選択します。
ダウンロードしたいテーマの「･･･」をクリックするとメニューが表示されるので、「テーマファイルをダウンロード」をクリックしましょう。
Shopify に登録したメールアドレス宛にテーマファイルのデータが送信されます。「メールを送信する」をクリックします。
Shopify から届いたメールの「テーマのエクスポート」をクリックすることで、テーマファイルがダウンロードできます。
無事にファイルをダウンロードすることができました。
次は、ダウンロードしたテーマファイルを GitHub に Push しましょう。
テーマファイルを GitHub に Push
お使いのエディタでダウンロードしたテーマファイル開き、作成したリポジトリに Push しましょう。
これで、作成したリポジトリにテーマファイルを Push できました。
次は、Shopify ストアと GitHub を接続する方法を解説していきます。
Shopify ストアと GitHub を接続
Shopify ストアと GitHub を連携するには、管理画面の「オンラインストア」>「テーマ」の「テーマを追加」をクリックします。
「GitHub から接続する」を選択します。
Shopify ストアから GitHub にログインすると、リポジトリが選択できるので、テーマファイルを Push したリポジトリを選択しましょう。
リポジトリを選択後、「ブランチ」を選択して「接続」をクリックすることで、Shopify ストアと GitHub の接続ができます。
完了すると、「テーマライブラリー」に GitHub のアイコンが表示されます。これで、Shopify ストアと GitHub の接続ができました。
次は、正常に接続されているか確認しましょう。
接続の確認
Shopify ストアと GitHub が正しく接続されているか確認しましょう。接続されたテーマの「･･･」をクリックして、「コードを編集」を選択します。
テストとして、コードに編集を加えてみましょう。今回は「新しいテンプレートを追加」します。変更を加えたら忘れずに「完了」を押して、画面右上より「保存」しましょう。
リポジトリを確認してみると、「templates」に変更があり、変更された時間が「now」となっていることが確認できます。
これで、Shopify ストアが正常に GitHub に接続されていることが確認できました。
終わりに
今回の記事では、Shopify ストアと GitHub を連携させる方法を解説しました。Shopify ストアと GitHub を連携することで、複数のバージョンを管理したりバックアップを取って復元できたりとテーマの管理が容易になります。積極的に GitHub と連携して、ストアに変更を加えていくようにしましょう。
こちらの記事では Shopify ストアを GitHub と連携させて、テーマを編集する方法をより詳しく解説しています。
Shopify で作られているサイトを見分ける方法 3 選を徹底解説！
.png?w=400){kind=icon}
