【Shopify開発が捗る！】ShopifyCLI開発環境構築の流れをご紹介｜コーディング、Web開発の外注、代行ならコーディングアライブ

Shopify CLIは、ほとんどのShopifyテーマ開発タスクにおいてTheme Kitの代わりになります。
Online Store 2.0テーマで作業している場合は、Shopify CLIを使用することをお勧めします。古いテーマで作業している場合のみ、Shopify CLIの代わりにTheme Kitを使用しましょう。

開発テーマは、開発に使用しているShopifyストアに接続された一時的で未公開のテーマです。そのテーマを開発用のテーマとしてストアに接続すると、そのストアのデータをローカルでテストに使用できます。

Shopify CLIでできること

ローカルで開発テーマを使用して、テーマの変更を安全にプレビュー、テスト、共有
– Shopifyストアにリンクされた開発テーマを作成して使用できるようにし、変更を公開する前にプレビューやテストを行えるようにします。
CSSおよびセクションの変更をホットリロードしたり、テーマをプレビューする際にファイルが変更されたときにページを自動的にリフレッシュ
– ホットリロードをサポートし、CSSやセクションの変更が手動でリフレッシュせずに即座に反映されます。ファイルが変更されたときにページが自動的にリフレッシュされることもあります。
Dawnを出発点として新しいテーマを初期化
– Shopify参照テーマのDawnを基にした新しいテーマを開始できるようにします。これにより、カスタムテーマの構築の堅実な基盤が提供されます。
コマンドラインからテーマをプッシュおよび公開
– テーマの変更を関連するShopifyストアにプッシュし、テーマを公開するコマンドを提供します。これにより、デプロイプロセスが簡素化されます。
ローカルに構築した開発環境を使用して複数のテーマで作業
– 開発環境の概念をサポートし、異なる目的やクライアント用に異なるテーマで作業することができます。
テーマでTheme Checkを実行してエラーを検出
– Theme Checkと統合されており、テーマコードの潜在的な問題やエラーを特定するのに役立つツールです。CLIを使用してTheme Checkを実行することで、コードの品質を維持し、Shopifyのベストプラクティスに準拠できます。

要するに、Shopify CLIは、コマンドラインからShopifyテーマのプレビュー、テスト、デプロイ、および品質の維持に関するツールを提供することで、テーマ開発の効率を向上させています。
Shopifyでは非推奨のSassをテンプレートに統合し、CSSをassetsフォルダにコンパイルすることも可能です。

現在、Shopify CLIはGitのようなバージョン管理を行うことはできませんので、複数の人と協力して作業する際には注意が必要です。プロジェクトをGitで管理することを強くお勧めします。

Shopify CLI環境構築の流れ

CLIのインストール

0-コマンドラインで下記コマンドを入力

macOS

brew tap shopify/shopify

brew install shopify-cli

Windows and Linux

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

CLIを起動する

1-目的のディレクトリに移動しコマンドを実行

shopify theme init

ターミナルでテーマ名を書いて、ディレクトが作成されます。

2-CLIを起動します

作成したshopifyテーマディレクトリの中で(「cd 新テーマディレクトリ」を実行)

shopify theme dev --store {store-name}

※{store} = URLに表示されるストアの名前

例: shopify theme dev --store=mystore

これでCLIを起動すると、ローカル環境でブラウザからストアが見られるようになります。

成功すると、このような表示が出ます。

「Preview your theme」の下にあるurlからブラウザーを開き、確認してみましょう。

ファイルを編集すれば、ブラウザの表示が更新内容に合わせて切り替わります。

ちなみに、ストアのデータ（バックエンド）は全部shopifyのサーバにあります。

3-テーマのアップロード

shopify theme push

ローカルのテーマを公開したくない場合は：

shopify theme push --unpublished

4-テーマを公開する

shopify theme publish

これでテーマがストアに公開されます。

既存のストアに接続する場合

プロジェクト内にテーマフォルダを作成します。

shopify theme dev --store={store}

shopify theme pull

他のストアの開発を行う場合は、現在のストアからログアウトする以下のCLIコマンドを必ず実行しましょう。

shopify auth logout

その後に他のストアにログインしてください

shopify theme dev --store={store}

その他のCLIコマンドについてはこちらをご覧ください。

Shopify

https://shopify.dev/docs/themes/tools/cli/commands

Shopify CLI commands for themes

A reference of commands that you can use with Shopify CLI to build themes.

まとめ

Shopify CLIで開発環境を構築すると、Shopifyサイトの開発が大幅に効率的になります。
ぜひ試してみてください。
Shopify開発に関してお困りごとがございましたら、お気軽にアライブまでご相談ください！

◾︎合わせて読みたいShopify関連記事

コーディングの外注・代行ならコーディングアライブ

https://coding-alive.jp/blog/p1100

フォームからShopifyの「顧客管理」に顧客情報を追加する

Shopifyのお問い合わせフォームは確認画面や自動返信メールが無いなど日本のフォーマットに合わせた機能が充実していないため別サーバでお問い合わせフォームを作成し、Shopifyと連携したいというケースがあるかと思います。例えば価格が決まっていないオーダー商品を受注して商品価格を決定後、決済のみShopifyで行いたい場合。細かいヒアリングを行うお見積もりフォームを作成し、フォームに入力された顧客情報をShopifyの「顧客管理」に追加→Shopifyの「下書き注文」でお見積もり後の商品を作成して請求書メールを送付→Shopifyで決...

コーディングの外注・代行ならコーディングアライブ

https://coding-alive.jp/blog/p1138

Shopifyの商品ページに入力形式のオプションを追加する

Shopifyの商品には、カラーやサイズなど、選択式のオプションを3つまで持たせることができます。しかし、商品の名入れやメッセージカードの文章のようなユーザーに文字入力させるタイプのオプションを実装したいケースもよくあると思います。当記事ではそれを実現する「Line Item Property」という機能をご紹介します。 ◼️合わせて読みたいShopify関連記事Line Item Propertyとは「Line Item Property」は、商品に追加オプションを持たせるための特殊なフィールドです。ルールは至って簡単で、好きなフォーム要素に properties と...

Previous Prev

Back to list

blog