初めてShopifyテーマ開発をするときに読みたい情報まとめ

ネットショップをつくれるサービスShopifyのテーマ開発を開始するのに必要な情報をまとめてみました。公式ドキュメントが充実していますが、散らばっている印象があるので、このようなまとめが役に立つのではないかと思っています。前提として知ってほしいことは、テンプレート言語はliquid、開発ツールはthemekitを使うということです。

リンク集

まずは基本的なliquidのドキュメントです。開発の際はチートシートを起点にすると便利かなと思いました。検索もできるのでやりたいことを調べて、もう少し情報がほしかったら詳細なドキュメントへのリンクが書いてあるので確認しにいくとよいでしょう。

つぎに必要になったら個別で読むと良さそうな情報です。上記のドキュメントに書いてない情報がブログに書いてあったりします。ブログは過去記事をつぶさにチェックしていないのでほかにも便利な記事があるかも。

公式のコミュニティやディスカッションはこちらです。

実際に開発する時に使用するTheme Kitはこのドキュメントがあれば十分でしょう。

ここからは簡単な導入と解説です。

テーマ開発前にShopify パートナープログラムを確認しよう

Shopifyテーマ開発を始める際にはまず「Shopify パートナープログラム」をみてみると良いと思います。パートナーアカウントを作れば、無料で数の制限なく開発ストアを開設できますし、条件を満たすとマーチャントとのレベニューシェアを受け取れたりもするようです。

ヘルプ:Shopify パートナー

もし開設済みストアの中の人としてテーマ開発をするならば、パートナーアカウントはなくても開発ができます。外の人として開発する場合はパートナーアカウントが必要です。

中の人がパートナーアカウントから自分のストアにテーマの所有権を移行することはできないみたいです。アクセスできるならログインしてやってよという当たり前といえば当たり前のことかと思いました。

ストアにおけるテーマの概念

ストアのテーマ設定画面では現在設定中のライブなテーマとそうでないテーマが並びます。ショップの中の人の場合、themekitのdevelopment環境にライブでないテーマを設定してwatchすれば、公開されているテーマに影響を与えることなく開発ができます。

また、WordPressテーマを開発したことがある人ならこの表が便利かもしれません。ブログとECは違いますが、似たような概念があります。

Shopify WordPress
拡張機能 アプリ プラグイン
管理画面内のカスタマイズ セクション カスタマイザー
カスタムフィールド メタフィールド カスタムフィールド

テーマ開発をはじめる

テーマ開発にはShopify専用の開発ツールがほぼ必須になるでしょう。Slateは2020年1月でサポートを終了しています。これから始める人はTheme Kitを利用しましょう。

  1. Shopify Theme Kitを入れます
  2. theme new するか theme get します
  3. theme watch をしてShopifyにコードを同期して、プレビューします
  4. theme deploy でデプロイします

ちなみに流行りのヘッドレスというやつで、Shopifyをバックエンドとして商品管理に専念してもらい、フロントをNext.jsやGatsbyなどでつくることもできるようです。

この記事を書いた人

村田 智
デザイナー
詳しくみる→