プログラミング

Shopifyのテーマ・フォルダ構造をわかりやすく解説!【画像付き】

泣きエンジニア
泣きエンジニア
 Shopifyのテーマの構造がよくわからない。

ゆるいエンジニア
ゆるいエンジニア
英語の情報ばかりだし、英語の動画みてても説明が理解できない・・・

勉強エンジニア
勉強エンジニア
WordPressのテーマ構造に似てるって言われてるけど、いまいち理解できない・・・

さて、Shopifyの学習を初めて、こんな壁に当たりませんでしたか?

おつゆ
おつゆ
お任せください!

今回は、Shopifyのフォルダ構成について解説したいと思います!

この記事をご覧いただくと

・Shopifyのテーマ・フォルダ構造がわかる

・各フォルダの中のliquidファイルについてわかる!

WordPressのテーマと比較することができる!

上記のことが理解できると思います!

実際僕もShopifyを初めて、

・実際にテーマを作成してみた。

・一週目でテーマ構造を理解していなかったからよくわからなかった。

・テーマのフォルダ構造を勉強してから2周目いじってみて理解できた!

という感じでした。

おつゆ
おつゆ
それでは、Shopifyのフォルダ構成についてみていきましょう!!

Shopifyのフォルダ構成について



では、Shopifyのテーマのフォルダ構成をみていきましょう!

まずは大きな構造からみていきますね!

大まかなファイル構成

おつゆ
おつゆ
実際のファイル構造がどうなっているのか見てみましょう。

実際にテーマキットでダウンロードされるファイル構造や

無料テーマの「Debut」のファイル構造を見ていきましょう!

フォルダ(ディレクトリ)とファイル

画像の通り、Shopifyというのは、はじめにこのようなフォルダ分けがされています!

theme

├assets

├config

├layout

├locales

├sections

├snippets

└templates

画像と比較してもらえればわかると思いますが、このようなShopifyの中身はこの様なフォルダの集まりでできているのがわかります。

ちなみ、後ほど解説しますが、ちょこっとこのフォルダの中身をみてみると(今回はtemplatesフォルダを覗いてみる)

この様にtemplatesフォルダの中にたくさんのファイル.liquidがありますね!

細かな.liquidファイルの説明をすると、訳がわからなくなるので、まずは大元のフォルダ構造から一つ一つみていきましょう!

Shopifyのフォルダ構造を細かくみていこう!

おつゆ
おつゆ
ちょっと順番は前後してしまうのですが、一番わかりやすい順番で見ていきますね!

①Layout

まずはLayoutフォルダから!

この中に入っているファイルがtheme.liquidですね!

これが一番大きなファイルです。

簡単にいうとindex.htmlやindex.phpと同じ様なものではないかと思います!

(正確にいうとindex.phpなどよりももっと大きな構造のものです。実際にこの後にindex.liquidが存在するので・・・theme.liquidの説明は難しい・・・)

theme.liquidの中身はこんな感じですね! liquidが用いられていますが、よくみるとheadやbodyタグがあるのがわかると思います。

このtheme.liquidのbodyの中で

header

中身

footer

を表示させていますね。

あと、jQueryなどのCDNとかもここで読み込んでるみたいですね。

おつゆ
おつゆ
とりあえず一番大元のものが入るファイルがlayout!

②templates

次にtemplatesフォルダをみてみましょう!

templatesは簡単にいうと

実際に表示されるページをまとめたフォルダ!

templatesは、layoutの中身にあたるイメージですね。

WordPressでいうところのarchive.phpとか404.phpの様なものだと思います!

各ページのテンプレートが入っている感じですね。

なかを見てみると、indexや404やpageなどが入っています。

実際のサイトと比較してみるとわかりやすいので、比較してみましょう

例えば、このページ、Shopifyのコレクション(商品一覧)のページです。トップページから移動したページですね。

 

このコレクションページの中身の内容は、どこに書いてあるの?というと

templatesの中に入っているcollection.liquidです!

つまり、このコレクションのページはcollection.liquidの中に記述されたコードが表示されているというわけです。

404.liquidは404ページ、collection.liquidは商品一覧の様な形ですね。

まとめると・・・

表示するページがtemplateの中に入っている

おつゆ
おつゆ
templatesはこんな感じです!

対応関係をまとめると、こんな感じだと思います。

index.liquid:トップページ

blog.liquid:ブログの記事一覧ページ

article.liquid:ブログの記事ページ

product.liquid:商品の詳細ページ

collection.liquid:コレクション(個別の商品をまとめたもの)のページ

cart.liquid:カート内の一覧ページ

page.liquid:固定ページ

search.liquid:検索結果のページ

404.liquid:404(ファイルがみつからなかった)ページ

さて、では実際にtemplateフォルダの中のcollection.liquidをみてみると

泣きエンジニア
泣きエンジニア
あれれ、、、collection.liquidの中身、全然記述されてないじゃん・・・

って感じですよね。

実はこれ、各テンプレート.liquidの中身は様々な別のファイルで構成されているのです!(今回はシンプルな例を使用しています。)

そして、その別のファイルってなに!?というのが、次に説明するSectionsです!

③section(個人的に一番大事だと感じている)

 

おつゆ
おつゆ
次はsectionsフォルダです!

ここには、各テンプレートで使用する共通パーツがはいっています!

動画で見た方が早いので、実際にご覧ください!

  1. セクション説明動画


ちょっとわかりづらいかもしれませんが、テーマ「Debut」トップページのカスタマイズ画面です。

このトップページは、セクションがブロックの様に重なって成り立っています

Shopifyの凄いところは、このセクションを自作で作ることができ、しかもセクションのブロックを自由に入れ替えることができるんです!

簡単にいうと、

セクションというのは機能のついたブロックや積み木といったイメージ

で良いと思います!

おつゆ
おつゆ
自由に入れ替えて、作り替える感じですね!

そんなブロックが、sectionの中のたくさん詰まっています。

例えば、こちらをご覧ください!

これはtemplatesフォロダの中のトップページの表示のliquidですね!

この中の記述は、

{% section ‘homepage-carousel’ %}

{% section ‘product-category-banners’ %}

{% section ‘homepage-products’ %}

{% section ‘newsletter’ %}

と、4つのセクションからできていますよね?

では、トップページのカスタマイズ画面をみてみましょう!

左側のカスタマイズ画面をご覧ください!

4つのセクションでできているんです!!!

ホームページスライダー  → {% section ‘homepage-carousel’ %}

プロダクトバナー → {% section ‘product-category-banners’ %}

ホームページ商品 → {% section ‘homepage-products’ %}

News Letter  → {% section ‘newsletter’ %}

対応関係はこんな感じです!

しかもカスタマイズも自由自在!すごいですよねShopify!

④snippets

snippetsはsectionsと同じ様なものですが、イメージとしてはセクションよりもさらに小さな共通パーツというイメージです。

セクションとの大きな違いは、「Shopifyの管理画面からカスタマイズができない」というところでしょうか。

Shopifyの公式にはこんな感じの会話がされてました

凄い簡単に和訳すると

泣きエンジニア
泣きエンジニア
セクションとスニペットの違いがわからんから、教えてください!

ゆるいエンジニア
ゆるいエンジニア

はいはい!

セクションはクライアントのカスタマイズのためのものだと認識しています!

セクションを設定して、後で変更できるようするのがセクションです〜!

詳しくはこれみてくれー

https://www.shopify.com/partners/blog/the-beginner-s-guide-to-building-shopify-themes-with-sections

って感じです!

ちなみ、snippetsは

{% include ‘〇〇’ %}

で、読み込むことができます〜!

⑤assets

これはおなじみかと思います

cssやjsが入ってるフォルダです!

⑥config

こちらも少しセクションに似ているのですが、こちらはテーマ全体に関することがまとめられています。

settings_schema.json

settings_data.json

ここはいじってみてのイメージですが、

settings_schema.json →  実際のエディタでカスタマイズできるものを定義(schemaの定義)

settings_data.json →  実際にカスタマイズで選択された値が入る

という感じかと思います。

詳しくわかったらここは追記します。

詳しい方・偉い方、もし間違っていたら教えてください〜泣

⑦locales

これは、言語ごとの翻訳のファイルが入っています!

英語やドイツ語、フランス語などが入っています。

おつゆ
おつゆ
さて、大元のフォルダ構成はこんなところです。

画像でまとめると、こんな感じですかね!?

この辺りのイメージがつけば、良いと思います!

テーマ構造についての勉強方法や資料まとめ

YouTubeでの解説

軽い説明はこちらのyoutubeのテーマの部分で解説してくれています!

 

実際にUdemy講座をやってみる。

結局実際に作ってみることをオススメします!

テンプレートやセクションの基礎理解ならこちら!

実際にテーマを作成してみるのがこちら!

まとめ

個人的な意見としては、templatessectionsをよくいじることになるのかなぁっと思っています!

今回は詳しく記述しませんでしたが、sectionsの中でよく使うschemaがShopify最大の魅力じゃないかなっと思っています!!

また、Shopify記事、かければかきます!

露崎 義矢(つゆざき よしや)

Blog: https://otsuyublog.com/

Twitter:https://twitter.com/photo_prog_free

Instagram: https://www.instagram.com/otsuyu_photo/?hl=ja

おつゆ
おつゆ
ご覧いただき、ありがとうございました!い!おつゆでした!!