MENU

【Shopify-環境構築】shopifyとGitHubを連携してテーマを接続しよう

Shopifyでテーマをカスタマイズして構築していく上で便利なのは、GitHubとの連携。

GitHubにあるテーマとShopifyを接続することで、バックアップにもなるしGitHubが使えるなら一度トライしてみてください!なくてもアカウント作成すればすぐです!

Shopify CLIの導入については、また別記事で紹介します。今回はShopifyとGitHubを連携させて開発環境を作っていく回です!

目次

Shopifyテーマをローカルにインストール

ShopifyのテーマをローカルにインストールするためにVSCodeを利用します。

VSCodeを利用している人は多いと思いますので、今回はVSCodeを利用しての説明です。その他のエディターを利用している人はやり方が異なると思いますので、適時調べてみてください!

VSCodeがかなり使い勝手が良く便利なので、エディターで悩んでいるなら一度VSCodeをお試しあれ!

あわせて読みたい
Visual Studio Code – コード エディター | Microsoft Azure ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

VSCodeを立ち上げてターミナルを開きデフォルトテーマをインストール

Shopify CLIをインストールしていればShopifyのコマンドが利用できるので、まずは下記コマンドを入力。

shopify theme init

入力すると以下のように確認が出てきます。

?Theme name

これは、ローカルに作成するShopifyのディレクト名を何にするのか聞いていますので、任意のディレクトリ名を入力しましょう!

theme-custom

こんな感じで、任意の名前をつけて決定すると、デフォルトのテーマフォルダがインストールされます。インストール完了するとターミナルの表示がこんな感じになっているはずです。

VSCodeでディレクトリを開く

VSCodeでインストールしたフォルダを開きますが、せっかくなのでターミナルからターミナルから開いてみます。

code cutom-theme

デフォルトテーマをインストールしたディレクトリに移動している状態で、上記のコマンドを入力することでVSCodeで「custom-theme」のフォルダを開くことができます。

現在はローカル上にデータがありますが、これをGitHubを使って管理していきます。

GitHubにデータをアップする

まずはGitHubと連携させる必要があります。

ローカルリポジトリの作成

ローカルリポジトリの作成を行います。

git init

これで初期化が済んだので、コミットとしていきます。

git add .
git commit -m "コメントを記入"

上記の画像のようになったら、コミットまで完了です。

リモートリポジトリの作成

次にデータをリモートリポジトリにアップする必要がありますが、リモートリポジトリがないので作成から始めます。

GitHubのアカウントを持っていない場合は、まずは新規で作成してください。

https://github.co.jp/

GitHubにログインしたら、右上の「」ボタンをクリックして「New repository」をクリックします。

「Repository name」は任意ですので、お好きな名前でどうぞ!なるべくご自身がわかりやすい名前が良いかと思います。

「Public」と「Private」は、いろんな人に公開したい場合は「Public」を、自分のみに限定したい場合は「Private」を選択してください。

URLをコピーしてリモートリポジトリにデータをアップする

上記で作成したリポジトリに接続します。

PublicとPrivateでは接続先が異なるので注意してください。

VSCodeに戻ります。

git remote add origin URL
git push -u origin main

こちらのコマンドを入力することで、リモートリポジトリにプッシュすることができます。

1行目の「URL」の箇所はGitHubからコピーして貼り付けてください。

プッシュが完了したら、GitHubにアップされているか確認しましょう!

Shopifyにテーマをアップロードする

先ほど作成したリポジトリをShopifyにアップロードする作業を行います。ShopifyではテーマをGitHubにおくことができます!

管理画面から「オンラインストア > テーマ」を選択すると、上記の画像が表示されます。この「Dawn」と書いているのが、現在選択されているテーマです。ここに先ほど作成したGitHubのテーマを追加します。

テーマライブラリからGitHubのデータを選択する

「テーマを追加」をクリックすると「GitHubに接続する」という項目がありますので、そちらを選択します。すると、右側にウィンドウが表示されますので、GitHubと連携していない場合は、GitHubにログインします。

Githubにログインした後に、「Repository access」の箇所にShopifyと連携するリポジトリを追加します。

「Only select repositories」の中にある「Select repositories」をクリックして、使用するリポジトリを選択して、「保存」します。

接続するアカウントが表示されているのを確認して、接続したいリポジトリを選択。リポジトリの選択ができたら「接続」を押して接続完了!

うまく接続できていれば上記の画像の枠のようにGitHubのアイコンとリポジトリが表示されているはずです。うまくできなかった場合は、今までの手順を再度試してみましょう!

ShopifyとGitHubの連携まとめ

ここまででGitHubにアップしたテーマを利用してカスタマイズする準備が整いました。難しそうに見えて意外と簡単なのでShopify初心者の方でも、すぐに連携できるかと思います。

もちろん、難しい!と感じる人も中にはいます。今はGoogle先生がいますので、どうしてもうまくいかない場合はこの記事の単語、つまりキーワードを使用して検索してみてください!

それでも無理だ!

そんなあなた!いつでも私にご連絡ください。つまづいている部分を一緒に解決していきましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次
閉じる