Shopifyでテーマをカスタマイズして構築していく上で便利なのは、GitHubとの連携。
GitHubにあるテーマとShopifyを接続することで、バックアップにもなるしGitHubが使えるなら一度トライしてみてください!なくてもアカウント作成すればすぐです!
Shopifyテーマをローカルにインストール
ShopifyのテーマをローカルにインストールするためにVSCodeを利用します。
VSCodeを利用している人は多いと思いますので、今回はVSCodeを利用しての説明です。その他のエディターを利用している人はやり方が異なると思いますので、適時調べてみてください!
VSCodeがかなり使い勝手が良く便利なので、エディターで悩んでいるなら一度VSCodeをお試しあれ!
VSCodeを立ち上げてターミナルを開きデフォルトテーマをインストール
Shopify CLIをインストールしていればShopifyのコマンドが利用できるので、まずは下記コマンドを入力。
shopify theme init
入力すると以下のように確認が出てきます。
?Theme name
これは、ローカルに作成するShopifyのディレクト名を何にするのか聞いていますので、任意のディレクトリ名を入力しましょう!
theme-custom
こんな感じで、任意の名前をつけて決定すると、デフォルトのテーマフォルダがインストールされます。インストール完了するとターミナルの表示がこんな感じになっているはずです。
![](https://mono-code.com/wp/wp-content/uploads/2022/03/B7B45E76-A12C-4510-A5A2-931C6A491362-1024x111.png)
VSCodeでディレクトリを開く
VSCodeでインストールしたフォルダを開きますが、せっかくなのでターミナルからターミナルから開いてみます。
code cutom-theme
デフォルトテーマをインストールしたディレクトリに移動している状態で、上記のコマンドを入力することでVSCodeで「custom-theme」のフォルダを開くことができます。
現在はローカル上にデータがありますが、これをGitHubを使って管理していきます。
GitHubにデータをアップする
まずはGitHubと連携させる必要があります。
ローカルリポジトリの作成
ローカルリポジトリの作成を行います。
git init
これで初期化が済んだので、コミットとしていきます。
git add .
git commit -m "コメントを記入"
![](https://mono-code.com/wp/wp-content/uploads/2022/03/スクリーンショット-2022-03-08-22.03.59-1024x398.png)
上記の画像のようになったら、コミットまで完了です。
リモートリポジトリの作成
次にデータをリモートリポジトリにアップする必要がありますが、リモートリポジトリがないので作成から始めます。
GitHubのアカウントを持っていない場合は、まずは新規で作成してください。
![](https://mono-code.com/wp/wp-content/uploads/2022/03/EC5718B1-F981-42E2-A04A-B7161B512416-1024x521.png)
GitHubにログインしたら、右上の「+」ボタンをクリックして「New repository」をクリックします。
![](https://mono-code.com/wp/wp-content/uploads/2022/03/スクリーンショット-2022-03-08-22.20.44-1024x604.png)
「Repository name」は任意ですので、お好きな名前でどうぞ!なるべくご自身がわかりやすい名前が良いかと思います。
「Public」と「Private」は、いろんな人に公開したい場合は「Public」を、自分のみに限定したい場合は「Private」を選択してください。
URLをコピーしてリモートリポジトリにデータをアップする
上記で作成したリポジトリに接続します。
VSCodeに戻ります。
![](https://mono-code.com/wp/wp-content/uploads/2022/03/40E0D1D0-67EA-4B94-AC10-5DBD03C75D31-1024x217.png)
git remote add origin URL
git push -u origin main
こちらのコマンドを入力することで、リモートリポジトリにプッシュすることができます。
プッシュが完了したら、GitHubにアップされているか確認しましょう!
Shopifyにテーマをアップロードする
先ほど作成したリポジトリをShopifyにアップロードする作業を行います。ShopifyではテーマをGitHubにおくことができます!
![](https://mono-code.com/wp/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-12.09.26-1024x393.png)
管理画面から「オンラインストア > テーマ」を選択すると、上記の画像が表示されます。この「Dawn」と書いているのが、現在選択されているテーマです。ここに先ほど作成したGitHubのテーマを追加します。
テーマライブラリからGitHubのデータを選択する
![](https://mono-code.com/wp/wp-content/uploads/2022/03/11A1E3F1-DF16-4AE0-B032-D8D256EA25BB-1024x295.png)
「テーマを追加」をクリックすると「GitHubに接続する」という項目がありますので、そちらを選択します。すると、右側にウィンドウが表示されますので、GitHubと連携していない場合は、GitHubにログインします。
![](https://mono-code.com/wp/wp-content/uploads/2022/03/B01CB20C-2977-4387-A4EC-1541C8F1DF40-1024x394.png)
Githubにログインした後に、「Repository access」の箇所にShopifyと連携するリポジトリを追加します。
「Only select repositories」の中にある「Select repositories」をクリックして、使用するリポジトリを選択して、「保存」します。
![](https://mono-code.com/wp/wp-content/uploads/2022/03/1725470D-62A5-41BE-9CCD-B592646977D1-1024x395.png)
接続するアカウントが表示されているのを確認して、接続したいリポジトリを選択。リポジトリの選択ができたら「接続」を押して接続完了!
![](https://mono-code.com/wp/wp-content/uploads/2022/03/shopify-environment-01-1024x327.png)
うまく接続できていれば上記の画像の枠のようにGitHubのアイコンとリポジトリが表示されているはずです。うまくできなかった場合は、今までの手順を再度試してみましょう!
ShopifyとGitHubの連携まとめ
ここまででGitHubにアップしたテーマを利用してカスタマイズする準備が整いました。難しそうに見えて意外と簡単なのでShopify初心者の方でも、すぐに連携できるかと思います。
もちろん、難しい!と感じる人も中にはいます。今はGoogle先生がいますので、どうしてもうまくいかない場合はこの記事の単語、つまりキーワードを使用して検索してみてください!
それでも無理だ!
そんなあなた!いつでも私にご連絡ください。つまづいている部分を一緒に解決していきましょう!
コメント