こんにちはデザインチームオカベです。
前回からECプラットフォーム「Shopify」のテーマカスタマイズについて勉強を始めましたが、色々触ってみて理解できたところをまとめたいと思います。
Shopifyテーマ「Debut」の構成
Shopifyにはあらかじめ「Debut」というテーマが用意されています。
WordPressのように0からテーマを作るのでも良いですか（可能であれば）、ノンエンジニアが触ってみた感想としては、このテーマを元にカスタマイズをした方が色々都合が良さそう（0から作るとShopify特有機能の補完が面倒）だと感じました。
ということで今後はDebutのカスタマイズを基準にまとめますが、まずはテーマの全体像を把握するところから始めたいと思います。
それでは「コード編集」の編集画面に移ります。
すると画面左側に「Layout」〜「Locales」といったフォルダアイコンが並んでいるかと思います。さらにアイコンをクリックして展開されるファイル（〇〇〇.liquid）、こちらがDebutテーマの構成ファイル達です。
Shopifyではこの「liquidファイル」を編集してカスタマイズしていきます。
しかしこのままだと、何が何だかよくわからないと思うのでそれぞれのファイルの関係性をイメージしたものがこちら。
構成ファイルの役割イメージ
まず全体の基礎となるファイルはLayoutの「theme.liquid」になります。ここでページ全体の共通設定（基本構造やSEOなど）を管理しています。
そして「Templates」の中のファイルは各ページのレイアウト。
「Sections」「Snippets」では、header、footerを始め記事一覧のレイアウトなど、部分的にレイアウトをパーツ化したファイルが入っています。
パーツ化されたファイルは好きな場所で読み込めるので、共通のレイアウトが多いデザインの場合は、Sectionsでパーツ化し使いまわせるようにしておくと便利かと思います。
特にパーツ化する必要がなければ直接「Templates」に構造を記述しても問題ありません。
最後に「Assets」は、CSSやJSなどレイアウトとは関係ないファイルをまとめています。ファイルは外からアップロードすることも、Shopifyから直接作成することもできます。アップロードできる拡張子も画像ファイルやフォントファイルなど、割と何でも取り込めました。
ファイル構成リスト
もう少し詳しく解説すると以下のような感じです。
全てを触ったわけではないので、把握できている範囲で。
| Layout | theme.liquid | metaやscriptなどhead情報の設定や、ページ全体で共有する構造などを記述 |
|---|---|---|
| Templates | index.liquid | トップページのレイアウト |
| blog.liquid | 記事一覧ページのレイアウト（実際にはblog-template.liquidを読み込み） | |
| article.liquid | 記事ページのレイアウト | |
| cart.liquid | カートページのレイアウト（実際にはcart-template.liquidを読み込み） | |
| collection.liquid | 商品一覧ページのレイアウト（実際にはcollection-templat.liquidを読み込み） | |
| product.liquid | 商品詳細ページのレイアウト | |
| customers/◯◯◯◯.liquid | 会員ページに関するレイアウト | |
| page.liquid | 固定ページの基本レイアウト | |
| page.contact.liquid | お問い合わせページのレイアウト | |
| Sections | header.liquid | ヘッダーのレイアウトパーツ |
| footer.liquid | フッターのレイアウトパーツ | |
| article-template.liquid | 記事のレイアウトパーツ | |
| article-template.liquid | 記事一覧のレイアウトパーツ | |
| cart-template.liquid | カートに入れた商品一覧のレイアウトパーツ | |
| collection-template.liquid |
商品一覧のレイアウトパーツ |
Templatesの使い方
基本的にはすでに用意されている各liquidファイルをカスタマイズしていけば良いのですが、特定のページでレイアウトを変えたい！といった時はが出てくると思うので、そういった時は新しくTemplateファイルを用意するといいと思います。
「Assets」に限らず「Templates」も編集ファイルを増やすことができますが、templatesの場合はどのページに属するか予め選択します。
そして固定ページの編集画面で、利用したいテンプレートを選択・設定します。
Sectionsの使い方
「Sections」のファイルは「Templates」とは違い、特定のページに属さないのでトップページでもどこでも好きな場所で呼び出せます。
今は省略しますが、以下のような書き方です。
{% section 'sectionのファイル名' %}
自分がShopifyのカスタマイズをするにあたり最初に苦労したのが、ファイルの関係性だったので、これから始める人の役に立てれば良いです。
