ファイル構造を紹介します【debutテーマ使用】

こんにちは、個人で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テーマを使用したファイル構造について紹介してきました。
こちらの記事も合わせてご覧いただければと思います!

この記事を書いた人

たかぼー

1993年、東京都生まれ。大学卒業後、メーカーの海外営業を経験し、「日本製のものが1人でも多くの人に使われて欲しい」という思いを形にするためにShopifyを使ったECサイト制作から運用までのサポートをしています。これからECサイト制作を始める人が「楽しく」作ってお客様の売り上げに貢献できるよう、知識のシェアをしているブログです。