yasuoka こんにちは鈴木祐登です。
今回はshopifyのテーマのディレクトリ構造を解説していこうかなと思います。
shopifyのテーマをコードからいじろうと思ってテーマディレクトリを見てみるとファイルが多すぎてどこをいじれば良いのかわからないという人も多いのではないでしょうか？
今回はshopifyのテーマ開発をする上で絶対に抑えておかないといけないディレクトリ構造に関して説明していきます。
テーマディレクトリに存在するファイルの種類
shopifyのテーマディレクトリをみると下記のようなディレクトリとファイルが存在することがわかります。
shopifyではそれぞれのディレクトリやファイルにどんな情報を格納するのかが決まっています。
一つ一つ見ていきましょう。
assetsディレクトリ
ここにはcssファイル,javascriptファイル,画像ファイル,フォントなどが入っています。
後で解説するasset_urlフィルタでassetsディレクトリに格納されている要素にアクセスして呼び出すことができます。
HTMLタグつきで出力する
{{ '画像名.png' | asset_url | img_tag }}
{{ 'CSS名.css' | asset_url | stylesheet_tag }}
{{ 'JavaScript名.js' | asset_url | script_tag }}
URLのみ出力 する
{{ '画像名.png' | asset_url }}
{{ 'CSS名.css' | asset_url }}
{{ 'JavaScript名.js' | asset_url }}
configディレクトリ
configディレクトリにはテーマの設定情報が格納されています。
基本的にはconfigディレクトリには
- settings_schema.json
- settings_data.json
上記の2つのファイルが存在します。
それぞれに格納される情報は下記のように決まっています。
settings_schema.json: テーマエディタから変更可能な内容を定義
settings_data.json: テーマエディタで設定された値が格納
layoutディレクトリ
layoutディレクトリにはshopifyストアのページほぼ全てで適用されるテンプレートファイルのtheme.liqudが入ってます。
shopifyのストアページはほぼ全てこのtheme.liquidにページごとの固有のパーツを埋め込むことで出来上がっています。
localesディレクトリ
localesディレクトリには言語変更時の翻訳ルールが格納されています。
自分でテーマを作成した場合、en.default.jsonが存在していますが、日本語の場合、ja.jsonを自分で作成して記述していくことになります。
これは管理画面からも追加することができます。
sectionsディレクトリ
sectionsディレクトリにはセクションと呼ばれる各ページのパーツが格納されています。
sectionsディレクトリは自分でテーマファイルを作った場合は最初から存在していないので、自分で作る必要があります。
セクションではschemaというものを記述することで入れ込むテキストや画像をshopify管理画面から編集することができます。
ここにあるsectionファイルは後で解説するsectionタグで他のliquidファイルから読み込むことができます。
{% section 'sectionsのファイル名' %}
snippetsディレクトリ
snippetsディレクトリにはsectionファイルや他のliquidファイルから呼び出せるスニペットというパーツが格納されています。
スニペットではセクションと違い、入れ込むテキストや画像をshopify管理画面から編集することができないです。セクションよりも小さい単位のパーツがスニペットとして作られるイメージです。
ここにあるsnippetsファイルは後で解説するrenderタグで他のliquidファイルから呼び出すことができます。
{% render 'snippetsのファイル名' %}
templatesディレクトリ
各ページの大枠を決めるテンプレートファイルが格納されています。
各ファイルには以下の内容が格納されています。
404.liquid : 404ページ article.liquid : ブログ記事個別ページ blog.liquid : ブログ記事一覧ページ cart.liquid : カート内アイテム一覧ページ collection.liquid : 商品一覧ページ customers/account.liquid : アカウント詳細ページ customers/activate_account.liquid : アカウント有効化ページ customers/addresses.liquid : アカウントの住所ページ customers/login.liquid : アカウントのログインページ customers/order.liquid : アカウントの注文詳細ページ customers/register.liquid : アカウントの新規登録ページ customers/reset_password.liquid : アカウントのパスワード再発行ページ gift_card.liquid : ギフトカードページ index.liquid : トップページ list-collections.liquid : 商品カテゴリ一覧ページ page.liquid : 固定ページ product.liquid : 商品詳細ページ search.liquid : 検索結果ページ
それのぞれのファイルに関しては下記で詳しく解説しています。
参考文献
英語の公式ドキュメント(テーマのディレクトリ構造)
