こんにちは、個人でShopifyを使ったサイト制作をしておりますたかぼー(@taka_forward)です。
この記事ではテーマ開発をしていく上で必要な知識である、テーマのファイル構造について、Shopifyのプリインストールテーマである「debut」を使って紹介していきます。
ローカル環境構築ができました！これからShopifyのテーマを触っていくんですが、どれをどう触ればいいのかわかりません…
この記事をよめば、どのページがどのファイルに対応しているかわかります！
<こんな人におすすめ>
① ローカル環境構築が終わり、これからテーマを触っていく人
② Shopifyの日本語情報が欲しい人
目次
Shopifyテーマのディレクトリ構造について
Shopifyの基本テーマ「Debut」を開いてみると、このようになってます。
ここで、
- assets
- config
- layout
- locales
- sections
- sippets
- templates – customersディレクトリあり
と分かれていることがわかります。ファイル数は合計100を超えていますが、ディレクトリに分けられているので、エディターで開いても、ファイルの多さは気にならないです（100超えてたのを今数えて初めて知りました…）
ディレクトリ内のファイルについて
次に、個別ファイルについて見ていきましょう。
assets
CSS(SCSS)ファイル・Javascriptファイル・画像ファイルが格納（前2点はliquid形式）されています。
レイアウト調整を行う際はtheme.scss.liquidファイルにアクセスして編集を行います。
config
settings_data.jsonとsettings_schema.jsonファイルが格納されています。
お客さんが「テキストをいれるボックスを作って欲しい」とか、「好きな画像をページ上に表示させたい」といった場合に各sectionのliquidファイルに{% schema %}{% endschema %}で記載した設定内容が、settings_data.jsonに反映されていきます。
↑schemaをかくと、このようにお客さん側で変更ができるようになります。
※settings_data.jsonの値は更新されていくので、開発サイドでは値を書き換えないようにしていきましょう。
layout
ほぼ全ページで適用になる「theme.liquid」ファイルが格納されています。
theme.liquidはサイトの大枠にあたり、headタグなどが入ってます。このファイルに、header, footerなどのセクションや各ページのテンプレートを読み込んで各ページを表示させます。
※ほぼ全ページと書いたのはDebutテーマだと他にpasssword.liquidとgift_card.liquidが格納されており、パスワードページとギフトカードのページは別のレイアウトが採用されているからです。
locales
言語を変更した時に表示されるサイト上の文言が言語別に格納されています。
日本語の場合、ja.jsonです。
sections
セクションが格納されています。（例：ヘッダー・フッター・商品一覧ページレイアウト）
お客さん側で値や画像を変更をしたいもの（schemaを使用するもの）、スニペットよりも相対的に大きなデータが入ってます。
※スニペットだとschemaが反映されないので、お客さん側で変更可能にする場合はセクションに書きます。また、セクションでは他のセクションの呼び出しができません。
snippets
セクションよりも細かな部品を入れておくものです。
スニペットはセクションや他のスニペットでも呼び出しが行えるので、1度登録すれば何度でも使えます。
※例：パンくずリスト・ページネーション ・SNSシェアボタン
templates
各ページの大枠を決めるテンプレートを格納しているファイルになります。
各ページとテンプレートの対応は以下の通りです、
| ページ名 | テンプレートファイル名 |
| 404ページ | 404.liquid |
| ブログ一覧ページ | blog.liquid |
| ブログ個別ページ | article.liquid |
| カテゴリーページ （Shopifyではカテゴリーのことをコレクションと呼んでいます） | collection.liquid |
| カテゴリー一覧ページ | list_collection.liquid |
| カートページ | cart.liquid |
| ギフトカードページ | gift_card.liquid |
| トップページ | index.liquid |
| パスワードページ | password.liquid |
| お問い合わせページ | page.contact.liquid |
| その他ページ（例：ABOUTページ） | page.liquid |
| 商品ページ | product.liquid |
| 検索ページ | search.liquid |
サイトにログイン機能をつける場合は、customersフォルダにある下記ファイルも参照する必要があります。
| ページ名 | テンプレートファイル名 |
| アカウントページ | customers/account.liquid |
| アカウント有効化ページ （パスワードを2度入力することで有効になります） | customers/activate_account.liquid |
| ログインページ | customers/login.liquid |
| 注文確認ページ （ログインすると、注文状況の確認ができます） | customers/order.liquid |
| アカウント登録ページ | customers/register.liquid |
| パスワードのリセットページ | customers/reset_password.liquid |
テンプレートでは丸々sectionを読み込んでいる場合もあります。
このテンプレートは自分で新規で設定できるので、例えば、「お客さんの声」を載せるページを作成したい場合は、page.voice.liquidファイルをテンプレートに入れれば作れます。
その他
ページを見ていくと、
{% section ‘password-header’ %} (意味：section内のpassword-headerを表示させてます)
{% include ‘breadcrumb’ %}(意味：snippet内のbreadcrumbを表示させてます)
等の表示が出てくると思いますが、「それぞれ別ファイルを参照して表示させています」ということなので’’で書かれたファイルを探してみてください。
最後に
ここまでDebutテーマを使用したファイル構造について紹介してきました。
こちらの記事も合わせてご覧いただければと思います！
