こんにちは、荒木です。最近Shopifyのカスタマイズをはじめまして、公式ドキュメントだけではよくわからないところの紹介です。
Theme kitで開発環境を構築したけど次にどうすればいいのかわからないときに、自分が最初にもうちょっとわかりやすく書いておいてほしかった以下のことを説明していきます。
- URLとliquidファイルとの関係がわかりづらい
- Shopifyの管理画面でpage/collectionのテンプレートを選択するときには現在のテーマに反映してからじゃないと選べない
- schemaタグのblocksは階層構造をとれない
- assetsディレクトリにサブディレクトリを作成できない
URLとliquidファイルとの関係がわかりづらい
Shopifyのカスタマイズを始めようとするときに、カスタマイズしようとしているテーマの現状を確認して編集することだと思います。
liquidファイルを表示させるには、ブラウザ上でアクセスする必要がありますが、そのパスが公式ドキュメントだけだと分かりづらかったので、Debutテンプレートを例にその中でも特に困ったもの解説していきたいと思います。
customersディレクトリ
お客様のアカウント管理関係のページ用のliquidファイルが入っています。[Shop URL]/customers/loginとかのファイルとディレクトリ名の関係でパスが設定されていると思いきや、[Shop URL]/account/loginと、accountパスが始めに付きます。
そして、アカウント関係のページを表示するためには、管理画面の左下の設定から行けるチェックアウト画面[Shop URL]/admin/settings/checkoutの「顧客アカウント」で設定をしないといけません。
テーマテンプレート関係
page.liquidとpage.*.liquidファイル
これらのページは、管理画面のページ設定で使われます。ページを追加するときにそのページの基本的なデザインを設定した「テーマテンプレート」として選択できます。
page.liquidは「デフォルトのページ」として選択オプションで表示され、page..liquidは「」の部分が選択オプション名として選択できるようになります。例えば、「page.about.liquid」だと、選択肢に「about」として追加されていることがわかると思います。
ページ自体のアクセスのためのパスは、「ウェブサイトのSEOを編集する」でそれぞれのページように設定できるようになっています。
collection.liquidとcollection.*.liquidファイル
page.liquidファイル等と同じ使い方ですが、使える場所が異なります。管理画面の商品管理/コレクションの追加編集メニューでコレクションのテーマテンプレートとして選択できます。
blog.liquidとarticle.liquidファイル
これらもpage.liquidファイル等と同じ使い方です。もちろん、blog..liquidやarticle..liquidを作ることができます。
blogはブログ管理ページで、articleはブログ記事管理ページでそれぞれテーマテンプレートとして選択できます。
Shopifyの管理画面でpage/collectionのテンプレートを選択するときには現在のテーマに反映してからじゃないと選べない
Shopifyではテーマを複数保存しておくことができます。開発しているときは、本番用が「現在のテーマ」として設定されていて、開発用の同じテーマを別名で保存しておくと思います。
開発用テーマに基本的に変更を加え、theme kitのコマンドツールで、watchやdeployでコードを更新していくのが一般的な流れかと思います。
しかし、先程説明したテーマテンプレートに関わるpage/collection/blog/articleファイルは、選択肢として使えるようにするには、開発用のテーマではなく「現在のテーマ」に指定されているテーマに更新しなければいけません。
Shopifyのテーマを複数持てますが、開発環境自体がわかれているわけじゃないので管理画面はどのテーマからも共通です。ですから、ページの追加等は「現在のテーマ」に影響を及ぼさないと反映されないのは考えるとわかります。
本番に影響が直接影響させてしまうので誰もが怖いので、だからこそ、選択オプションで選ぶようになっているんですね。
schemaタグのblocksは階層構造をとれない
Sectionとして使うliquidファイルには{% schema %}タグ内に設定用のJSONが定義できます。
後から画像や、ちょっとした文章の変更をできるようになるのでとてもうれしい機能なのです。その中でもblocksキーは個数を増やしたり減らしたりをあとから設定できるデータ構造を持てますが、階層構造がもてません。
たとえば、ショップリストを作りたいと思います。そのショップリストは、エリアごとに大きくわけて、エリアの中に店舗を設定していくことはよくあると思います。
このとき、データがエリアのリストと、エリアの中に店舗のリストが含まれた階層構造になっています。これぐらいの設定ができないのはちょっと悲しいですね。。
assetsディレクトリにサブディレクトリを作成できない
assetsディレクトリ内にはjs/css/画像ファイルを保存しておくと、liquidファイルからasset_url等のfilterを使って利用できます。
ただ、それらのファイルは一つのオンラインショップを作成しようとすると多くのファイルが必要になります。多くなれば一階層のassetsディレクトリでは管理が大変です。
一般的なサイトの開発ではcssファイルはassets/cssに、jsファイルはassets/jsといったサブディレクトリを作って管理したくなるものです。
Shopifyでは、assetsディレクトリの配下にサブディレクトリを作成しても、テーマの更新でエラーがでることは無いですが、コード上の呼び出し時にはファイルがみつからないというエラーとなっていまします。
ファイルの配信に利用しているCDNサービスがサブディレクトリの作成に対応していないようなので、当分は直らないかもしれないですが、いつか対応してくれることを願うばかりです。
まとめ
いかがでしたでしょうか、これらの情報はだいたいコミュニティサイト(English)で見つけたものです、日本語ページもあるのですが情報量が少ないようなので見つからないかもしれないです。
なので、ちょっとでも参考になり、Shopifyのカスタマイズは日本語情報が少ないからと躊躇されているかたの後押しになれれば幸いです。