【Shopify】テーマをローカルで開発するための手順｜2023年最新版

悩む人

Shopifyの画面上じゃなくローカルでテーマ開発したい

こんなご要望にお応えします。

実は以前にもローカルでテーマ開発を行うための準備手順を紹介しました。

トマトソースのWEB開発

【Shopify】Theme Kitを使ってローカル開発する方法を解説 | トマトソースのWEB開発 Shopifyのテーマをローカル開発環境で行うための手順を画像付きで解説します。使い慣れたエディターで行う開発はやはりストレスフリーでいいですね。

しかし、Shopifyは日々進化しており、それも古い情報となってしまったため、今回は2023年最新版としてローカルでShopifyのテーマ開発をするための手順を解説していきたいと思います。

トマトソース

以前に比べてかなり楽に開発のセットアップが完了するので、ぜひご参考ください！

本記事は、Shopifyの公式ドキュメントを参考に記事を作成しています。

テーマをローカルで開発するための4ステップ

Shopifyのテーマをローカルで開発するには以下の手順でできます。

以下で解説していきます。

Step1: ストアへのアクセス権を得る

まずはストアのテーマを編集するためのアクセスを取得します。

自身のストアとして開発している場合はこのステップをスキップしても問題ありません。

しかし、すでにクライアントがストアを持っている場合は、テーマ修正のためのアクセス権を付与してもらう必要があります。

トマトソース

その場合、クライアントに自身のShopifyパートナーアカウントをコラボレーターとして追加してもらいましょう。

Step2: Shopify CLIをインストールする

テーマへのアクセス権を取得した後は以下のコマンドでShopify CLIをインストールします。

macOS（Homebrew）の場合

brew tap shopify/shopify
brew install shopify-cli

WindowsかLinux、npmを使う場合

npm install -g @shopify/cli @shopify/theme

上記のコマンドをターミナルで実行するとShopifyCLIがインストールされます。

Step3: ストアのテーマをダウンロードする

Shopify CLIのインストールが終えたら、以下のコマンドを実行してローカルにテーマファイルのコピーをダウンロードします。

shopify theme pull --store {store-name}

{store-name}には、xxxxx.myshopify.comの「xxxxx」の部分を入力してください。

トマトソース

例えばexample.myshopify.comの場合は
shopify theme pull --store exampleとします。

このコマンドの実行前にテーマファイルを格納するためのフォルダーを作成しておきましょう。
そうでないとsectionsやlayoutなどのテーマのフォルダーがコマンドを実行したパスにダウンロードされてしまいます。

👉 Press any key to open the login page on your browser

上記のコマンドを実行すると『👉 Press any key to open the login page on your browser』という表示が出ると思うので、何かしらのキーを押します。

するとブラウザでShopifyパートナーのログイン画面になるので、そのままログインを完了して、ターミナルに戻ります。

テーマファイル用のフォルダーを作成していない場合

テーマファイルを格納するためのフォルダを作成していない場合は以下のような文言が出てくるかと思います。

It doesn’t seem like you’re running this command in a theme directory.
? Are you sure you want to proceed?

これは、

テーマ開発用のフォルダー上でコマンドが実行されてないっぽいけど、そのまま進めて大丈夫？

的な確認をするものなので、よければYesを選択してください。

もしフォルダーを作成し忘れている場合は、Noを選択してフォルダーを作成後にそのフォルダー上に移動して、再度上記のコマンドを実行してください。

ダウンロードするテーマを選択する

上記をYesまたは『shopify theme pull –store {store-name}』のコマンド入力後は、ストアにあるテーマ一覧が表示されるので、ローカルで開発したいテーマを選択します。

するとダウンロードが開始されるので、ダウンロードが完了するまで待ちます。

Step4: ローカルで開発開始

テーマファイルのダウンロードが完了すれば、ローカルでの開発を開始できます。

トマトソース

必要に応じて適宜改修していきましょう。

テーマの変更のプレビューを見る方法

テーマ開発を進め、変更した箇所をブラウザー上で確認したい場合は以下のコマンドを実行すれば確認できます。

shopify theme dev

このコマンドを実行後にGoogle Chromeなどのブラウザでhttp://127.0.0.1:9292にアクセスすれば、開発中のテーマの現状を見ることができます。

テーマの変更を反映する方法

テーマのプレビューを確認し、Shopify上にあるテーマに変更を反映したい場合は以下のコマンドを実行します。

shopify theme push

トマトソース

これで、ローカルでのコード編集がShopify上にあるテーマに反映されます。

既存テーマに反映せず新しくテーマを作成したい場合

ローカルでのファイル修正を既存テーマに反映したくない場合もあるかと思います。

そういった場合は、以下のように「–unpublished」フラグをコマンドに付け加えることで既存テーマとは別に新しくテーマが作成されます。

shopify theme push --unpublished

上記を実行後に、「? Theme name」とターミナルに表示されるので、任意のテーマ名を入力すればOKです。

テーマを公開する方法

テーマの変更を反映した後は、以下のコマンドを実行しテーマを公開変更後のテーマとしてストアに適用できます。

shopify theme publish

上記のコマンドを実行後は、テーマのリストが表示されるので公開したいテーマを選択します。

修正したテーマを公開する場合は、必ず「shopify theme push」でテーマの変更を反映してから上記コマンドを実行してください。

テーマの変更履歴を管理する方法

テーマの変更を管理するには、Githubを使うのがおすすめです。

GitHubとは、ソフトウェア開発のためのプラットフォームで、コードの保存、共有、バージョン管理を行え、コードの変更履歴を追跡ができます。

GitHubを用いれば簡単に変更履歴が辿れるため、万が一バグなどでテーマが正しく動作しなくなった場合でも、正常に動いていたものまで修正を戻すことができて安心です。

GitHubを用いたテーマの管理については以下の記事で解説しているので、導入する際はぜひご覧ください。

トマトソースのWEB開発

【Shopify】GitHubでテーマファイルを管理する方法を解説 | トマトソースのWEB開発 ShopifyのテーマファイルをGitHubで管理する方法を解説していきます。GitHubを使えば編集コードの保存やチームでの開発など様々なメリットがあるので、ぜひマスターしたい…

【Shopify】テーマをローカルで開発するのは超簡単：まとめ

2023年現在では、かなり簡単にローカルでのテーマ開発のセットアップができるようになっています。

今回紹介したやり方であれば、ソフトウェア開発での『開発開始までに無駄に時間と労力を消費する』というあるあるもなさそうでかなり負担が減りますね。

ぜひ、Shopifyテーマ開発にお役立てください。