Shopifyでテーマをカスタマイズして構築していく上で便利なのは、GitHubとの連携。
GitHubにあるテーマとShopifyを接続することで、バックアップにもなるしGitHubが使えるなら一度トライしてみてください!なくてもアカウント作成すればすぐです!
Shopifyテーマをローカルにインストール
ShopifyのテーマをローカルにインストールするためにVSCodeを利用します。
VSCodeを利用している人は多いと思いますので、今回はVSCodeを利用しての説明です。その他のエディターを利用している人はやり方が異なると思いますので、適時調べてみてください!
VSCodeがかなり使い勝手が良く便利なので、エディターで悩んでいるなら一度VSCodeをお試しあれ!
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のアカウントを持っていない場合は、まずは新規で作成してください。

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

「Repository name」は任意ですので、お好きな名前でどうぞ!なるべくご自身がわかりやすい名前が良いかと思います。
「Public」と「Private」は、いろんな人に公開したい場合は「Public」を、自分のみに限定したい場合は「Private」を選択してください。
URLをコピーしてリモートリポジトリにデータをアップする
上記で作成したリポジトリに接続します。
VSCodeに戻ります。

git remote add origin URL
git push -u origin main
こちらのコマンドを入力することで、リモートリポジトリにプッシュすることができます。
プッシュが完了したら、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先生がいますので、どうしてもうまくいかない場合はこの記事の単語、つまりキーワードを使用して検索してみてください!
それでも無理だ!
そんなあなた!いつでも私にご連絡ください。つまづいている部分を一緒に解決していきましょう!
コメント