Shopify構築の超基礎知識まとめ①
CMS構築初心者がShopifyについて勉強しました。大切な基礎知識についてまとめてみました。今回は階層についてです。
〜theme内の階層〜
ターミナルで「theme new --password=APIのパスワード --store=〇〇.myshopify.com --name=テーマの名前」と打つと以下の写真の様なディレクトリができると思います。（既存のテーマを編集する場合もこんな感じの階層だと思います。）
順番に、どういったディレクトリなのか紹介します。
1. assets
サイト内で使用する「CSS」「JavaScript」「画像」を格納しています。独自のCSSやJavaScriptファイルを追加したい場合は、このディレクトリに追加して、layoutフォルダのtheme.liquidファイルに<head></head>で読み込ませます。Shopifyのサイト全体のCSSは「theme.scss.liquid」で定義されています。Scssで書かれており、サイトで表示される時はCSSにコンパイルされるようです。また、Scssの拡張子を.scss.liquidにすることで、管理画面上で編集できるようになります。しかし、独自のCSSファイルを追加する場合は、管理画面上で編集する必要はないと思うので、cssファイルの拡張子は.scssか.cssのどちらかで良いかと思います。注意しなければいけないのは、assetsディレクトリの中に「css」や「img」のようなフォルダ名でサブディレクトリを作れないということです。
2. config
Shopifyの設定ファイルを格納しています。ここにはsettings_data.jsonとsettings_schema.jsonという2つのファイルがあります。
settings_data.jsonには、サイトの設定（新規で追加したページやセクションなど）が記述されており、管理画面上で編集できるような仕組みにする場合は、このファイルを編集します。管理画面上で編集できる仕組みにしない場合はこのファイルは特に触りません。
settings_schema.jsonはテーマの全体的な言語や文言を設定するファイルで、独自でオリジナルテーマを開発して公開する場合はこのファイルを編集する必要があります。しかしそれ以外の場合は特に触らないと思います。
これらのファイルは「管理画面で設定を変更してファイルをダウンロードする」もしくは「ファイルをローカルで編集してサイトに反映させる」のどちらかの処理をすると、ファイルの内容が上書きされます。例えば、ローカルで設定ファイルを大幅に編集した状態（サイトには反映していない）で、サイト上の設定ファイルをダウンロードしたら、これまで編集した内容は全部上書きされてしまいます。なので、これらの設定ファイルを扱う際は、上書きに注意しましょう。
3. layout
「サイト」のベースとなるファイルを格納しています。theme.liquidはShopifyのページほぼ全てのベースとなるファイルです。なので、主に<head>や<meta>、サイトの共通ヘッダー、各ページのtemplatesファイルやサイトの共通フッターなどを記述すると良いです。（テーマによって異なる場合があります。）
4. locales
言語に関する設定ファイルを格納しています。サイト上の共通の文言（「購入」や「ありがとうございます。」など...）を編集できます。これらの文言は管理画面上からも編集ができます。先ほどのconfigディレクトリの設定ファイルと同様に、内容を上書きをしてしまう可能性があるので気をつけましょう。
5. sections
sectionsディレクトリには、各セクションのLiquidファイルを格納しています。テンプレートがページの設計とすると、セクションは共通パーツの設計です。例えば、ボタンやSNSアイコンなどが挙げられます。セクションは、theme.liquidや個々のテンプレート内に、Liquidタグで読み込んで利用します。一番の特徴として、セクションで構築した内容はテーマエディタから編集・移動・追加が行えます。クライアントが頻繁に更新する箇所はセクションにまとめておくと便利そうです。セクションは独立したパーツ(なイメージ)なので、セクション内で作成されたliquid変数は、そのセクションの中でしか使えません。また、セクション同士を入れ子構造にはできません。
6. snippets
snipetsディレクトリには、各スニペットのLiquidファイルを格納しています。他のLiquidファイルに読み込める点とパーツ単位の記述をまとめることができる点がセクションと同じです。違いとしては、スニペットで構築したパーツはテーマエディタから編集ができません。セクションとスニペットどちらにファイルを追加するか迷ったときは、クライアントがテーマエディタから更新する箇所であるかを元に判断するのが良さそうです。
7. template
各「ページ」のベースとなるファイルをを格納しています。index.liquidならTOPページ、collection.liquidならカテゴリー一覧ページのベースファイルになります。これらのファイルは、layout/theme.liquidの{{ content_for_layout }}で呼び出されます。こんな感じです↓。
8. config.yml
使用しているテーマの情報が記載されています。テーマidやパスワード・ストア名などです。基本的にこのファイルを触ることはほぼ無いと思います。
大きな枠順にすると、layout ＞ template ＞sections or snippetsという感じですね。ページの設定→assets、言語の設定→locales、Shopifyの設定→config、テーマの情報(wiki的な感じ)→config.ymlといった感じでしょうか。
次回は、オブジェクトやタグ、フィルター・スキーマらへんについてまとめたいと思います。
この記事が気に入ったらサポートをしてみませんか？