サムネイル

Shopify ストアを GitHub と連携させる方法を徹底解説!

目次

はじめに

皆さんは Shopify ストアと GitHub を連携させていますか?今回の記事では、Shopify ストアと GitHub を連携させる方法を徹底解説します。ストアと GitHub を連携して複数のストアのデータをバージョン管理できるようにしましょう。

早速、連携させる方法を解説していきます。

Shopify ストアを GitHub に連携する方法

Shopify ストアを GitHub に連携する手順は以下のとおりです。

  1. GitHub 上にリポジトリを作成
  2. ストアのテーマファイルをダウンロード
  3. テーマファイルを GitHub に Push
  4. Shopify ストアと GitHub を接続
  5. 接続の確認

まずは、GitHub 上にリポジトリを作成していきましょう。

GitHub 上にリポジトリを作成

Shopify ストアのデータを保存するためのリポジトリを作成していきます。まずは、GitHub にログインしましょう。ログインしたら、画面右側のメニューの「Your repositories」を選択します。

「Your repositories」を選択

画面右側の「New」よりリポジトリの作成ができます。

リポジトリの作成

「Repository name」や「Description」を入力しましょう。また、リポジトリを公開したくない場合は「Private」を選択するようにしましょう。

リポジトリの設定

画面を下にスクロールして、「Create repository」をクリックします。

「Create repository」をクリック

「Repositories」に新しく作成したリポジトリが追加されています。

新しく作成したリポジトリが追加

これで、リポジトリの作成ができました。次は、ストアのテーマファイルをダウンロードする方法を解説します。

ストアのテーマファイルをダウンロード

ストアのテーマファイルをダウンロードするには、管理画面の「オンラインストア」>「テーマ」を選択します。

管理画面からテーマを選択

ダウンロードしたいテーマの「・・・」をクリックするとメニューが表示されるので、「テーマファイルをダウンロード」をクリックしましょう。

「テーマファイルをダウンロード」をクリック

Shopify に登録したメールアドレス宛にテーマファイルのデータが送信されます。「メールを送信する」をクリックします。

「メールを送信する」をクリック

Shopify から届いたメールの「テーマのエクスポート」をクリックすることで、テーマファイルがダウンロードできます。

テーマファイルをダウンロード

無事にファイルをダウンロードすることができました。

ファイルをダウンロード

次は、ダウンロードしたテーマファイルを GitHub に Push しましょう。

テーマファイルを GitHub に Push

お使いのエディタでダウンロードしたテーマファイル開き、作成したリポジトリに Push しましょう。

ダウンロードしたテーマファイル開く

これで、作成したリポジトリにテーマファイルを Push できました。

作成したリポジトリにテーマファイルをPush

次は、Shopify ストアと GitHub を接続する方法を解説していきます。

Shopify ストアと GitHub を接続

Shopify ストアと GitHub を連携するには、管理画面の「オンラインストア」>「テーマ」の「テーマを追加」をクリックします。

「テーマを追加」をクリック

「GitHub から接続する」を選択します。

「GitHub から接続する」を選択

Shopify ストアから GitHub にログインすると、リポジトリが選択できるので、テーマファイルを Push したリポジトリを選択しましょう。

リポジトリを選択

リポジトリを選択後、「ブランチ」を選択して「接続」をクリックすることで、Shopify ストアと GitHub の接続ができます。

Shopify ストアと GitHub の接続

完了すると、「テーマライブラリー」に GitHub のアイコンが表示されます。これで、Shopify ストアと GitHub の接続ができました。

GitHub の接続を確認

次は、正常に接続されているか確認しましょう。

接続の確認

Shopify ストアと GitHub が正しく接続されているか確認しましょう。接続されたテーマの「・・・」をクリックして、「コードを編集」を選択します。

「コードを編集」を選択

テストとして、コードに編集を加えてみましょう。今回は「新しいテンプレートを追加」します。変更を加えたら忘れずに「完了」を押して、画面右上より「保存」しましょう。

コードの編集を保存する

リポジトリを確認してみると、「templates」に変更があり、変更された時間が「now」となっていることが確認できます。

リポジトリを確認

これで、Shopify ストアが正常に GitHub に接続されていることが確認できました。

終わりに

今回の記事では、Shopify ストアと GitHub を連携させる方法を解説しました。Shopify ストアと GitHub を連携することで、複数のバージョンを管理したりバックアップを取って復元できたりとテーマの管理が容易になります。積極的に GitHub と連携して、ストアに変更を加えていくようにしましょう。

こちらの記事では Shopify ストアを GitHub と連携させて、テーマを編集する方法をより詳しく解説しています。
Shopify で作られているサイトを見分ける方法 3 選を徹底解説!

おすすめ Shopify アプリ

シンプルブログ記事カスタマイズ|お手軽ブログテンプレートのアイコン

シンプルブログ記事カスタマイズ|お手軽ブログテンプレート

シンプルなブログ記事カスタマイズアプリ。ストアにブログ記事カスタマイズ機能を簡単に実現できます。

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリのアイコン

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリ

シンプルなお知らせセクションアプリ。ストアにお知らせセクションを簡単に挿入できます。

シンプルブログ記事目次|自動見出し一覧挿入のアイコン

シンプルブログ記事目次|自動見出し一覧挿入

シンプルなブログ目次生成アプリ。ストアにブログ目次を簡単に表示できます。

シンプルスライドショー|お手軽画像スライダーのアイコン

シンプルスライドショー|お手軽画像スライダー

シンプルなスライドショーアプリ。ストアにスライドショーを簡単に表示できます。

シンプル流れるロゴ|流れるロゴリスト挿入アプリのアイコン

シンプル流れるロゴ|流れるロゴリスト挿入アプリ

シンプルな流れるロゴリストアプリ。ストアに流れるロゴリストを簡単に表示できます。

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事