Shopifyカスタムテーマ構築の第一歩
2023年7月24日
haino
こんにちは。クリエーターの灰野です。ECプラットフォームとしてシェアを拡大し続けている「Shopify」をご存知でしょうか？Shopifyは、カナダ発のベンチャー企業ですが、近年日本でも人気が高まっており、ECサイトのプラットフォームとして採用されるケースが増えています。
つい先日、ブリヂストンサイクル株式会社様の子ども用自転車月額定額レンタルサービス「エシクル」の制作に携わらせいただきましたが、今回のこのプロジェクトも当初からShopifyを利用することが前提として進められ、弊社はそのカスタムテーマ構築を担当させていただくことになりました。※今回のプロジェクトではデザインは他社様が担当されました。
ブリヂストンサイクル子ども用自転車月額定額レンタルサービス「エシクル」
https://ethicle.bscycle.co.jp/
Shopifyのテーマ構築は通常のhtmlではなく「Liquid」と呼ばれるテンプレート言語が使用されます。このLiquidですが、通常のhtmlの中に「schema（スキーマ）」と呼ばれるjsonオブジェクトが組み込まれたユニークなファイル形式で、Shopifyのカスタムストアを構築するための大変優れたテンプレート言語です。Shopifyの管理画面は、htmlに関する専門知識を持たれないマーチャント様のスタッフの方でも手軽にサイトを更新できるので、今後人気はさらに加速するのではないかと感じています。
Shopifyのテーマ特有の構造や仕様を理解するまでは、多少戸惑うものの、慣れると大変効率のよいテンプレート言語だと気付かされます。ここ1年程度で、だいぶ日本語の情報も増えたように思いますが、進化が大変早くエンジニアの方のブログ等を見つけても、既に情報が古くなっているということもよくあります。とはいえ、まずはShopifyのテーマ特有の構造やLiquidの仕様を理解して、世界的に人気を集めているShopifyでECサイトを構築してみましょう！
1. 始めの第一歩
まずどこから始めたら良いのかということで少々戸惑うかもしれません。始めの一歩として重要なポイントは、ストアを構築するエンジニアは通常のShopifyのストア・アカウントではなく、パートナー・アカウントを作成する必要があるという点です。開発のためにマーチャントが登録すべきストア・アカウントで登録してしまうと、無料期間が14日間で終了してしまい、構築方法をしっかり学ぶ間もなくストアの課金が発生してしまいます。意外なことに、このことを解説している情報が少ないため、うっかりするとストアの課金をしながらストア構築を学ぶ羽目になります。注意しましょう！
パートナーカウントは、以下のURLから作成します。
https://www.shopify.com/jp/partners
パートナーカウントを作成したら、パートナー・ダッシュボードの「ストア管理」メニューから「ストアを追加」で開発ストアを作成します。この開発ストアは公開しない限り、ずっと無料で開発／テストすることが可能です。まずはテーマの基本が学べる公式テーマ「Dawn」を色々いじってみて、Shopifyのストアでどんなことができるのか確認してみましょう。
2. 開発に使うShopify CLIのインストール
Shopifyのストアの基本や更新方法、商品追加の方法等を学んだら、いよいよ開発環境を整えます。開発は「Shopify CLI」というツールを行なって行うのが一般的です。自分の開発環境はMacのため以下はMacでのインストール方法です。Macの場合は「Homebrew」を使ってインストールできます。
brew install shopify-cli
これでインストールが完了です。ちなみに、shopify-cliはRubyでできており、古いmacOSの場合など、必要な条件を満たしてないとうまくインストールできないことがあります。もしうまくいかない場合は、最新のmacOSにアップグレードするか、必要な環境を手動で整えてからインストールしてください。※インストール方法に関する詳細はこの記事では省かせていただきます。
インストールが完了したら、テーマを置くローカルパスに移動して以下のコマンドを実行します。
shopify theme init hogehoge
「hogehoge」の部分は、テーマ名となりますが、お好みのものに変更してから実行してください。すると基本テーマであるDawnがインストールされます。
3. テーマ構造
テーマは7つのディレクトリで構成されており、以下のようになっています。
- assets … cssやJavaScript、画像ファイルなどが格納されています。
- config … テーマの基本設定が記述されたjsonファイルが格納されています。
- layout … テーマのベーステンプレートである「theme.liquid」などが格納されています。
- locales … テーマの言語設定が格納されています。
- sections … テーマ内で使用するセクション・パーツが格納されています。
- snippets … section内で使用するスニペットと呼ばれるコンポーネント・ファイルが格納されています。
- templates … 各テンプレートで使用するjson設定ファイルが格納されています。
オリジナルのテーマを構成するcssやJavaScript、画像パーツはすべて「assets」に格納することになります。また通常、自分で組んだliquidファイルは「sections」に保存します。sectionから繰り返し呼ばれるようなliquidコンポーネントは「snippets」に格納しておきます。主に使用するディレクトリは以上の3つで、それ以外は必要に応じてカスタマイズしますが、jsonファイルはエディターで改変することはほとんどなく、Shopify上のテーマ・カスタマイズ画面から行うことになります。なお、上記以外のディレクトリを追加したり、サブディレクトリを追加することはできません。また通常のhtmlファイルを置くこともできません。
サブディレクトリを置くことができないため「assets」ディレクトリ内はカオスになりがちですが、開発テーマやファイルの種類ごとに対応した接頭辞をつけることで多少整理整頓することができます。
4. liquidファイルの構造
liquidファイル内は概ね以下のようになっています。まずファイル上部ですが、外部スタイルを呼んだり、また直に宣言したりします。次いでhtmlが続くことになりますが、適宜「Tags」や「Objects」が挿入されます。またObjects内では「Filters」が適用される場合もあります。そして、ファイル下部にて「schema」と呼ばれるjson構造が続きます。このschemaで設定された設定は、Shopify管理画面のカスタマイズ機能で使用されます。
まず、上記のサンプル画面にある「Tag」ですが、「{% %}」で囲まれており、if や for など条件式やループ式を設定することができ、必ず終了タグで閉じる必要があります。上記の場合はif文なので、終了タグは「endif」で閉じています。
「Objects」は「{{ }}」で囲まれており、Shopifyで使用する様々なデータを引っ張ってきて挿入したい時に使用します。例えば、管理画面の「コンテンツ > ファイル」でアップされた画像ファイルを挿入したり、「assets」に格納してある画像ファイルを参照したりするような時に使用します。上記のサンプルではカスタマイズ画面でアップロードされた画像ファイルが差し込まれるようになっています。
「Filters」は「Objects」で挿入されたデータを加工する場合に使用します。上記ではカスタマイズ画面で入力されたテキストをエスケープしてaltとして使用しています。他にも数値を金額表示にしたり、最初のアルファベットを大文字にしたりなど、様々なFiltersがあらかじめ用意されています。
5. ローカル環境でテーマを開発する
先ほど解説したshopify-cliを使うとローカル環境でストアを構築することができます。開発はプログラマー標準ツールと言っていいvscodeがお勧めです。開発はブラウザでプレビューしながら進めることができます。以下のコマンドを使うとストアのプレビューをブラウザで表示することができます。
shopify theme dev --store hogehoge.myshopify.com
「dev」コマンドの後の「–store」はオプションで、「hogehoge.myshopify.com」のような開発中のストアのURLを入力します。このURLはShopifyの管理画面内に記載されています。なお、このオプションはログインに相当する行為のため、一度使うとセッションが切れるまでは「–store」なしのコマンドのみで使えます。
6. Shopify側にテーマを適用する
開発がある程度進んだら、ローカル環境のデータをShopify側に適用してみましょう。アップロード（push）するには以下のコマンドを使用します。
shopify theme push
また、Shopify側のカスタマイズ画面で設定したデータ（json）をローカルにも適用したい場合は、以下のコマンドを使用します。
shopify theme pull
これでローカル環境で構築したテーマを適用したり、Shopify側のストアと同期したりできます。
7. 専門知識を持たれないマーチャント様がストアを公開できるのか？
Shopifyはコードを書かなくてもマーチャント様が気に入ったテーマやアプリを組み合わせて、ECストアを手軽に構築できるというメリットがあるので、もちろんコードを書かなくてもストアを構築・公開・運営することが可能です。
ただ、テーマの中には必ずしも気に入ったテーマがあるとは限りませんし、デザインは気に入っていても、必要な機能が実装されていなかったりなど、どうしてもコードを書かないと、必要な機能を実現できないというケースもよくあることです。
そのような場合は、ぜひストア構築で実績のある弊社にぜひご相談ください。記事内でご紹介した自転車のレンタルサービスのようなフルカスタムのストアから、ちょっとしたカスタマイズを実装したりなど、多様なニーズにお応えすることができます。
ぜひお気軽にご相談ください！