Shopifyのディレクトリ構造について

この記事では、Shopifyのディレクトリ構造について説明します。

全体のディレクトリ構造

Shopifyは7つのフォルダから構成されています。

この7つのフォルダは
・ページの外観を大まかに構成
・ページの装飾・設定・翻訳
の2つの役割に大きく分けられます。

レイアウト・テンプレート・セクション・スニペットのページ構成の関係は図にすると次のようになります。

レイアウト(Layout)

レイアウトは、全てのページで共通するHTMLタグを記述するためのものです。
html・meta・bodyなどのHTMLタグが記述されているファイルが格納されています。
レイアウトには、
・password.liquid
・theme.liquid
の2つのファイルが格納されています。

password.liquidは、パスワードを設定した場合に表示されるページを編集するためのものです。
このページのことですね！

password.liquidは基本的に編集することはありません。
ストアを公開すると不要になりますからね！

theme.liquidは、headタグ内のCSS・JSファイルの読み込みや、ヘッダー・メイン・フッターなどの共通セクションのタグを設置しています。
とは言え、ヘッダーやフッターのセクションはbodyタグ内の

{% section 'header' %}

{% section 'footer' %}

で読み込んでいるだけです。なので、直接編集したい場合はセクションを編集する必要がありますね！

ちなみにページのmain部分の表示は、bodyタグ内の

{{content_for_layout}}

でテンプレートファイルが読み込まれます。

テンプレート(Templates)

テンプレートは、各ページごとの枠組みを作成するためのものです。
テンプレートには、20個のファイルが格納されています。

それぞれのファイルは、レイアウトのmain部分で読み込まれます。

ファイル名で、どのファイルがどのページに該当するか想像しやすいですね！
例えば、index.jsonはホームページ、product.jsonは商品ページとなります。

セクション(Sections)

セクションは、テンプレートを構成するパーツのようなものです。
レイアウトとテンプレートで読み込まれます。
かなりのファイル数で、その数49個あります。
※多すぎるので、図での紹介は省きます。

テーマエディタで「セクションを追加」とあるように、セクションはノーコードで編集可能です。
ファイル名で、どのファイルがどのセクションに該当するか想像しやすいですね！
例えば、rich-text.liquidは「リッチテキスト」になります。

さらにセクション自体を自分で新しく作ることもできます。
テーマエディタでの編集の幅を広げることも可能です。

スニペット(Snippets)

スニペットは、各ページ内で使用する細かい部品のLiquidファイルが入っています。
例えば、icon-facebook.liquidはfacebookアイコンのSVGを指します。
レイアウト、テンプレート、セクション、スニペットどのファイルからも呼び出して利用することができます。

セクションはテーマエディタでノーコード編集できると説明しましたが、スニペットはそれが編集できません。
なので、スニペットを編集するには、直接コード編集が必要となります。

スニペットを使用するときは、

{% render 'ファイル名' %}

と記述します。

※{% include 'ファイル名' %}で呼び出すこともあるそうですが、現在非推奨となっているようです。

設定(Config)

設定は、テーマエディタで設定した内容や、その内容を新しく定義したりします。

設定には、
・settings_data.json
・settings_schema.json
の2つのファイルが格納されています。

settings_data.jsonは、テーマエディタで設定されたデータが保存されています。

settings_data.jsonのコードから編集も可能です。

settings_schema.jsonはテーマエディタから変更可能な内容を定義します。
なので、テーマエディタで変更可能な設定項目を追加したいときにコード編集します。

アセット(Assets)

アセットは、テーマで使用するCSSやJavaScrip、画像などのファイルを格納しています。

例えば、base.cssはレイアウトで読み込まれています。

base.cssファイルを読み込みたいときは、

{{ 'base.css' | asset_url | stylesheet_tag }}

と記述して呼び出します。

注意として、アセット内にフォルダを作成(サブディレクトリ)することができません。
なので、「新しいアセットを追加する」から直接アセットの配下にファイルを追加する形になります。

ロケール(Locales)

ロケールには、翻訳jsonファイルが格納されています。
デフォルトで多言語対応できているのは凄いですね！

ページで表示される日本語は、ja.jsonで編集可能です。
同じ編集は、管理画面でも可能です。
テーマ→アクション→言語を編集を選択します。

両方から編集するとバッティングする可能性があるので、基本的には管理画面で編集する方が良さそうですね！

終わり

以上となります。フォルダ構造が明確になると、どこを編集するればよいか明確になりますね！