ディレクトリ
Shopifyのテーマは、上から順に読み込まれる。
- Layout
- Templates
- Sections
- Blocks (2024.12.11〜)
- Snippets
- Config
- Assets
- Locales
Layout
テーマ全体のレイアウトを定義するもの。
ストア公開後のファイルと、ストア公開前のパスワード設定されたファイルがあります。
<head>タグや、ヘッダー、フッターなどストア全体の共通要素を読み込ませる親ファイルになっています。
Googleアナリティクスの計測タグを埋め込む際や、テーマ全体に対する独自に追加したCSS・JSファイルを読み込む際に記述するのはここになります。
theme.liquid
theme.liquidが全てのベースになっています。これがないとテーマとしてアップロードしてもエラーになります。「content_for_layout」というShopfiyの独自関数で、各ページの内容を動的に呼び出しています。
password.liquid
ストアオープン前のティザーページの役割を担うベースファイル
Templetes
Templetesフォルダ内には、各ページを構成するファイル（TOPページ、商品ページなど）がある
theme.liquidに記述されている「content_for_layout」という独自関数で、各ページのTemplate内容を動的に呼び出している
ファイル名にはルールがある。 例) 商品ページ: product.json or product.liquid のどちらかになる。
各Templeteファイルはsectionの集合体で構成されており、管理画面でsectionを追加すると見た目が変わるのはこのファイルが更新されるためです。
余談
product.json ⇒ カスタマイズ画面のプルダウンメニュー「商品」＞「デフォルトの商品」
新規ファイル追加した場合
product.test.json ⇒ 「商品」＞「test」が追加される
● template ＞ customersフォルダ内のファイルについて
「設定」＞「お客様アカウント」ページで、 【従来】を選んだときのファイルになる
【お客様アカウント（おすすめ）】選ぶと、shopify側のシステム
Sections
テンプレートを構成する各セクションファイルがある。
各セクションファイルとセクショングループを作るファイルがある。
sectionを動的に呼び出す
「sectionを動的に呼び出す」とは、カスタマイズ画面で自由にセクションを追加削除できるようにすること。プリセットで呼び出せるようにすることを「動的に呼び出す」という
たとえば・・・
「main-product.liquid」の {% schema %} 内に以下コードを追加すると・・・
“presets”: [
{
”name” : “商品ABC”
}
]
カスタマイズ画面で「セクション追加」すると、「商品ABC」が選択できるようになっている。
- sectionブロックは、sectionのschemaで定義する
- 通常はtemplatesで読み込みを指定している
Blocks (2024.12.11〜)
セクション内で再利用可能な小さなコンポーネントを格納することができる
ブロックには、3つの種類があります。
- テーマブロック
フォルダー内に独自の Liquid ファイルとして作成され、テーマを使用して複数のセクションで再利用できます。
blocksフォルダ内のファイルで定義されたものは、 sections ＞ custom-section.liquid で呼び出している - セクションブロック
セクションの Liquid ファイル内で作成され、そのセクション内での使用に制限されます。 - アプリブロック
インストールされたアプリを追加できます。
※テーマブロックとセクションブロックは、現在では一緒に使うことはできません。
Snippets
セクション内で利用されるさらに細かいパーツ（アイコンやコードブロック）がある。
- snippetファイルは、sectionよりもさらに小さなパーツについて記述したファイル
- snippetファイルには、静的なパーツ、コードブロックを記述する
- snippetファイルを呼び出す際には、「{% render ‘snippetファイル名’ %}」で呼び出せ
config
setting_schema.json
テーマ全体の設定を決めているファイル。カスタマイズから変更可能な内容を定義している。
setting_data.json
テーマ全体の設定をした内容を記録しているファイル。カスタマイズから変更した値を保存している。
locales
- Localsフォルダ内には、言語ファイルがある。
- 日本語表現が微妙なときなどに編集する
- 日本語がない場合は、ja.jsonとして追加する
ja.json
ページ上の表示（「買い物を続ける」「カートを見る」など）
ja.schema.json
テーマのエディタの編集画面の日本語（背景の色」「テキスト」）
使用される言語
- Liquid
- HTML
- CSS
- JavaScript
- JSON
コメント