Shopifyのテーマ開発をローカルで行う方法（Shopify CLIを使う）

# はじめに

初めてShopifyのテーマ開発を行ったので、その手順を記録に残します。
わたしはテーマの編集や更新といった運用保守ではなく、
デザイナーさんが作成したカンプに沿ってオリジナルデザインのテーマを構築しました。

# Shopifyパートナー登録

まずはShopifyにアカウントを作成しましょう。
ショップオーナー用ではなく、開発者用のアカウントがあるので、
**Shopifyパートナーに登録** します。

[https://www.shopify.com/jp/partners](https://www.shopify.com/jp/partners)

登録が終わったら、開発者用の管理画面にログインできます。
ここからマーチャントのストアにログインしたり、開発ストアを作成したりすることができます。

### 開発ストアを作成（ストアの新規作成）

開発ストアは簡単にいくつも作成できるので、試しにやってみるのも良さそうです。
作ったストアは完成後にオーナーへ譲渡することができます。

### 既存ストアがある場合

既存のストアがある場合や、ストアをリニューアルする場合は、マーチャントにアクセス許可をもらいましょう。Shopifyパートナーで作成したアカウントを共有して、コラボレーターアカウントを作成します。

# 開発ツールを導入

ローカルでテーマの構築を行っている場合、サーバーにアップすることなく、ローカル上でプレビューすることができます。

## Shopify CLIをインストール

npmでダウンロードする場合は、以下のコマンドを実行してください：

```
npm install -g @shopify/cli@latest
```

[https://shopify.dev/docs/api/shopify-cli](https://shopify.dev/docs/api/shopify-cli)

## GitHubと連携する

### リポジトリを作成

GitHubにリポジトリを作成し、コマンドラインが表示されているのでそのまま残しておきます。

### テーマをインストール

開発を行うローカルフォルダでターミナルを起動します。
元となるテーマをインストールするため、次のコマンドを実行します：

```
shopify theme init
```

`Name of the new theme:` と聞かれるので、**GitHubに作成したリポジトリと同じ名前** を入力しましょう。

ファイルのダウンロードが行われたら、**cdコマンドで作成したフォルダへ移動** します。

```
cd "my-new-theme"
```

### Gitにプッシュする

ディレクトリを移動したら、**Gitコマンドでファイルをプッシュ** します。
まずは初期化して、ファイルを追加・コミット：

```
git init
git add .
git commit -m "first commit"
git branch -M main
```

次に、リモートリポジトリを設定してプッシュします：

```
git remote set-url origin git@github.com:アカウント名/リポジトリ名
git push -u origin main
```

これでGitHubにプッシュできたらOKです。

## ストアと連携する

コマンドでも連携できますが、複数ストアを管理していてちょっとビビリな私は、管理画面から操作を行いました。

### テーマ画面を表示

ストアにログインし、「販売チャネル」＞「オンラインストア」＞「テーマ」でテーマ画面を開きます。

「テーマを追加」ボタンをクリックし「GitHubから接続」を選択します。

![スクリーンショット 2025-05-25 15.51.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3927903/98a0395b-51d1-4e9d-854e-c28a4dd61080.png)

「GitHubにログインする」ボタンが表示されるので、ShopifyとGitHubを連携します。
アカウントとリポジトリの一覧が出てくるので、選択します。
接続が完了すると画像のようになります。

![スクリーンショット 2025-05-25 15.59.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3927903/f00859bf-edd0-49d9-9762-9e74d933f60a.png)

mainブランチにプッシュしたら更新されるか試してみましょう。
まずはプレビューでストアを表示します。

![スクリーンショット 2025-05-25 16.14.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3927903/24074d4b-c874-4d5e-b31b-d1ba5856a0e8.png)

その後、どこかをコードで編集しGitにプッシュしたあと、編集箇所が反映されていたら問題なく接続されています！

# プレビューしながら開発する

Shopifyコマンドで開発フォルダをローカルのブラウザでプレビューできます：

```
shopify theme dev
```

成功後は、`http://127.0.0.1:9292` にアクセスしてリアルタイムプレビューが可能です。
**ストアへデータを反映する場合は、git push を活用しましょう。**

# GitHubと連携しない

GitHubを使わずに、Shopify CLIでローカル環境のデータをストアへプッシュする方法です。

## ストアと連携する

ストアのURLを確認して、下記のコマンドのテキストを差し替えて実行：

```
shopify theme list --store ストアのURL
```

ログインが必要な場合もあります。画面の指示に従ってください。
成功するとストアのテーマリストが表示されます。

## Shopifyコマンドでプッシュする

Shopify CLIでストアのテーマを更新できます：

```
shopify theme push
```

ストアに存在するテーマのリストが表示されるので、該当のものを選択。
メインテーマとして設定されているテーマは `[live]` と表示されています。

# ストアのカスタマイズ画面を使う

コマンドで簡単に操作できるShopifyですが、慣れないうちは **theme push と theme pull を活用しつつ**、
ストアのカスタマイズ画面も使っていくと良いです。

コードを編集するよりも、カスタマイズ画面から操作した方が簡単なときもあります。

ターミナルで以下を実行すると、カスタマイズ画面で更新した内容がローカルのファイルに反映されます：

```
shopify theme pull
```

# おわりに

これでShopifyの開発環境が整いました！お疲れさまでした。

Shopifyの公式YouTubeにハンズオン動画があります。
これを見ると理解が深まると思います。

[https://www.youtube.com/watch?v=YN8LQPW2DSY](https://www.youtube.com/watch?v=YN8LQPW2DSY)

Shopifyの学びをしっかり定着させるために、
次回はLiquidファイルの書き方を紹介できればと思っています。

この記事が何かのお役に立てれば幸いです！