1. TOP
  2. Shopify
  3. 【Shopify】無料テーマのディレクトリ構造の解説 - #02
詳しくはこちら
Shopify
 | 

【Shopify】無料テーマのディレクトリ構造の解説 - #02

前回の記事では、Shopifyの開発環境をローカルに構築する手順を紹介しました。

今回は、ローカルにダウンロードしたテーマの各ディレクトリやファイルの役割を紹介していきます。

 

■バックナンバー

目次

はじめに

前提として、本サイトで紹介する内容は無料テーマをベースとしています。

有料テーマをお使いの方はお気をつけください。

 

テーマをダウンロードした際のディレクトリの中身は以下の通りです。

  • assets/
  • config/
  • layout/
  • locales/
  • sections/
  • snippets/
  • templates/
  • config.yml

これからひとつひとつ解説していきます。

ディレクトリの解説

assets/

このディレクトリには、サイト内で使用する「CSS」「JavaScript」「画像」を格納します。

独自のCSSやJavaScriptファイルを追加したい場合は、このディレクトリに追加して、<head>などで読み込ませます。

 

Shopifyのサイト全体のCSSは「theme.scss.liquid」で定義されています。

Scssで書かれており、サイトで表示される時はCSSにコンパイルされるようです。

 

また、Scssの拡張子を.scss.liquidにすることで、管理画面上で編集できるようになります。

しかし、独自のCSSファイルを追加する場合は、管理画面上で編集する必要はないと思うので、cssファイルの拡張子は.scssか.cssのどちらかで良いと思います。

 

注意点
assetsディレクトリの中に「css」や「img」のようなフォルダ名でサブディレクトリを作って、その中のファイルを読み込ませることは不可能です。

なので、サブディレクトリは作らず、全てのファイルを同階層に置きましょう。

サブディレクトリを作ったほうがファイルを管理しやすいのですが、どうやらShopifyの仕様的にそれはダメなようです...。

（ファイル名の接頭字に「img-」を付けるなどして、少しでもサブディレクトリっぽくするしかなさそうです）

 

これに関してstackoverflowで質問している方もいました。

https://stackoverflow.com/questions/46127999/shopify-use-subdirectory-in-asset-folder/46225424#46225424

この質問に対する回答も「Shopifyの仕様的に無理」とのことです...。

config

Shopifyの設定ファイルのディレクトリです。

このディレクトリには2つのファイルがあります。

  • settings_data.json
  • settings_schema.json

 

サイトの設定（新規で追加したページやセクションなど）がsettings_data.jsonに記述されています。

管理画面上で編集できるような仕組みにする場合、このファイルを編集します。

逆に、管理画面上で編集できる仕組みにしない場合はこのファイルは特に触りません。

 

settings_schema.jsonはテーマの全体的な言語や文言を設定するファイルです。

独自でオリジナルテーマを開発して公開する場合はこのファイルを編集する必要がありますが、それ以外の場合は特に触らないと思います。

 

注意点
これらのファイルは「管理画面で設定を変更してファイルをダウンロードする」もしくは「ファイルをローカルで編集してサイトに反映させる」のどちらかの処理をすると、ファイルの内容が上書きされます。

例えば、ローカルで設定ファイルを大幅に編集した状態（サイトには反映していない）で、サイト上の設定ファイルをダウンロードしたら、これまで編集した内容は全部上書きされてしまいます。

なので、これらの設定ファイルを扱う際は、上書きに注意しましょう。

layout

「サイト」のベースとなるファイルをこのディレクトリに格納します。

theme.liquidはShopifyのページほぼ全てのベースとなるファイルです。

主に以下のコードが書かれています。

  • <head>
  • <meta>
  • サイトの共通ヘッダー
  • 各ページのtemplatesファイル（後ほど解説します）
  • サイトの共通フッター

※テーマによって異なる場合があります

templates

「ページ」のベースとなるファイルをこのディレクトリに格納します。

index.liquidならTOPページ、collection.liquidならカテゴリー一覧ページのベースファイルになります。

これらののファイルは、layout/theme.liquidの{{ content_for_layout }}で呼び出されます。

sections と snippets

「sections」と「snippets」はサイト上で使用する「パーツ」のファイルになります。

ここで指す「パーツ」とは、「商品の一覧」「ボタン」「パンくず」「ヘッダー」などです。

 

基本的に、Shopifyのサイトは「sections」と「snippets」を組み合わせて作られています。

「sections」と「snippets」は明確に違いがあり、その違いは以下の通りです。

 

Sections Snippets
管理画面での編集*1 ○ ×
呼び出し方*2 {% sections 'ファイル名' %} {% render 'ファイル名' %}
呼び出し可能ファイル ・Layout：○
・Templates：○
・Sections：×
・Snippets：×		 ・Layout：○
・Templates：○
・Sections：○
・Snippets：○
ファイル名の先頭をアンダーバー（_）にする × ○

*1：管理画面での編集とは、管理画面上でファイルの中身の画像やテキストを編集できる機能のことです
*2：呼び出し時のファイル名に拡張子は不要です

 

assetsディレクトリと同様に、サブディレクトリを作って、その中のファイルを読み込ませようとするとエラーになります。

 

無料テーマでは、大きいパーツ（ファーストビュー、お問い合わせフォームなど）はSections、小さいパーツ（ボタン、アイコン、パンくずなど）はSnippetsで作られるパターンが多い印象です。

Snippetsの注意点

snippetsファイルは{% render 'ファイル名' %}で呼び出せますが、{% include 'ファイル名' %}で呼び出すこともできます。

無料テーマでもincludeで呼び出している場合もあります。

 

しかし、2020年7月現在、includeの使用は非推奨となっています。

参考：公式ドキュメント - include解説ページ

 

includeを使うと、呼び出し元のページの変数が参照できてしまうため、コードの保守性や読み取りやすさ、パフォーマンスが低下するのが非推奨の理由とのことです。

 

なので、「Snippets」の呼び出しはrenderを使うようにしましょう。

呼び出し時に変数をセットする
{% render 'ファイル名', hoge: 'piyo' %}のようにSnippets呼び出し時に変数をセットすることができて、その変数を呼び出し先で利用できます。
renderを関数と例えるなら、hogeが引数になるイメージです。
これにより、Snipetsの再利用性が高まります。
詳しくは今後の記事で解説するので、今は「こんなことができるんだ」程度の理解で大丈夫です。

locales

言語に関する設定ファイルです。

サイト上の共通の文言（「購入」や「ありがとうございます。」など...）を編集できます。

 

これらの文言は管理画面上からも編集ができます。

 

先ほどのconfigディレクトリの設定ファイルと同様に、内容を上書きをしてしまう可能性があるので気をつけましょう。

config.yml

使用しているテーマの情報が記載されています。

基本的にこのファイルを触ることは無いと思います。

まとめ

今回は無料テーマのディレクトリ構造を解説しました。

各ディレクトリの中にサブディレクトリを作れないのは地味に不便ですね...。

 

ディレクトリやファイルがたくさんありましたが、開発時に触るのは「Templates」「Sections」「Snippets」がほとんどです。

 

次回は、Shopifyの仕様や用語などを紹介しようと思います。

 

■バックナンバー

関連記事