Shopifyテーマファイルの構造

Shopifyのテーマをカスタマイズするためには、テーマファイルの構造を理解する必要があります。

テーマのファイル構成

テーマのファイルは、「テーマ」→現在のテーマ「アクション」→「コードを編集する」を選択すると、ファイル一覧が表示されます。

ディレクトリ構造は以下の通りです。

theme
├Layout
├Templates
├Sections
├Snippets
├Assets
├Config
└Locales

フォルダ内にファイルがあります。

Shopifyのテーマファイルの拡張子は「.liquid」で、ShopifyはLiquidというテンプレート言語を使います。

ShopifyのLiquidについて

Layout

Layoutディレクトリには、テーマの大枠を決めるファイルが格納されています。

theme.liquidには、head、bodyタグ、サイト共通要素であるヘッダー、フッター、ナビゲーション、各ページ個別のレイアウトなどが記述されています。

theme.liquidは、Webサイトのindex.htmlの位置付けだと考えていいでしょう。

Templates

Templatesディレクトリには、各ページのテンプレートLiquidファイルが格納されています。

ファイルを見ると、以下のページがあることが分かります。

• 404ページ
• ブログページ
• ブログ一覧ページ
• カートページ
• 商品一覧ページ（コレクション）
• 会員ページ
• 会員有効化ページ
• 住所一覧ページ
• 会員ログインページ
• 注文履歴ページ
• 会員登録ページ
• パスワードリセットページ
• ギフトカードページ
• TOPページ
• カテゴリ一覧ページ（コレクションリスト）
• 検索結果ページ

Sections

Sectionディレクトリには、各セクションのLiquidファイルが格納されています。

セクションを作成すると、テーマエディタで編集や追加を行うことができます。

たとえば、テーマエディタでヘッダーセクションを表示すると、

• ロゴの画像
• ロゴの幅
• ナビゲーション
• 告知バー

などが表示されます。

これは、section/header.liquidファイル内のschemaタグで定義されています。

Snippets

Snippetsディレクトリには、スニペットのLiquidファイルが格納されています。

スニペットとは、セクションより細かいパーツです。

共通的に処理する関数をスニペットに格納します。

スニペットは、テーマエディタでは編集することはできません。

Assets

Assetsディレクトリには、テーマで利用するCSS、JavaScript、画像、フォントなどが格納されています。

Config

Configディレクトリには、テーマ設定に関するファイルが格納されています。

settings_schema.json

テーマエディタから変更可能な内容を定義

settings_data.json

テーマエディタで設定された値が保存

Locales

Localesディレクトリには、言語ごとの翻訳jsonファイルが格納されています。