Shopifyのテンプレートを理解しよう【初心者開発者向け】

悩んでいる人

WordPressだけじゃなくてShopifyも触っていきたい

悩んでいる人

Shopifyで開発しているけどファイルの中身がよくわからない

今回は、初めてShopifyを触る人が必ずつまずくファイル構造について解説していきます。

本記事を執筆する私は、現在Shopify開発企業でフロントエンドエンジニアとして働いており実務でもShopifyを触っています。

僕も初めて触った時はなかなか理解が追いつかずに苦労をした(今もしている)ので、助けになれば幸いです。

21年2月に入社して1ヶ月ほどShopifyを触っただけなので理解が浅いところもありますのでご了承ください。

この記事を書いている人

プログラミングを学習開始して、1年後にShopify Experts企業に入社。愛知県の田舎からフルリモートで働いています。(21年2月入社予定)
Twitter( https://twitter.com/oka_jumboworld )

スポンサーリンク

目次

今回のゴール

Shopifyをローカル環境で開発を進めていく際に、必ず理解をしておかないといけないのがテンプレート階層です。

多くの開発者は、有料・無料のテーマをダウンロードしてカスタマイズして開発していくと思うのですが、ダウンロードしたファイルには見慣れないフォルダが存在します。

そのディレクトリとディレクトリ内に格納されているファイルの理解をすることを本記事のゴールとします。

今回の記事では、ローカルで開発するための解説をしておりません。
テンプレート階層の理解のための記事となっています。

Shopifyのテンプレート階層について

debutをダウンロードしたときのフォルダの中身

今回は、Shopifyで無料で使えるテーマdebutを用いてディレクトリ構造について説明をしていきます。

・assets・・・CSSやJSファイル
・config・・・jsonファイル(設定系)
・config.yml・・・テーマの情報
・layout・・・レイアウト用のファイル
・locales・・・翻訳の設定ファイル
・templates・・・各ページのテンプレートファイル
・sections・・・各ページののセクション用のファイル
・snippets・・・sectionsよりも小さなコンポーネント用のファイル

このような構成でファイルができております。

assetsディレクトリ

cssファイルやjsファイルが格納されております。

こちらのファイルをtheme.liquidpassword.liquidなどのlayoutに格納されているファイルで読み込んでいます。

<link rel="preload" href="{{ 'theme.css' | asset_url }}" as="style">

まずは、theme.cssの一番最後の行に追加して反映されるのか確認してみます。

.store-availability-list__phone {
margin-bottom: 0;
}
/* ↓下記を追記 */
body{
background-color: chocolate;
}

そして、コマンドtheme openしてブラウザで確認してみます。

反映されていますね。

このように、aseetsディレクトリにはcssやjsファイルが格納さておりlayoutから読み込まれてブラウザに表示されております。

余談…

開発をしていく際に、theme.cssを触るのはあまりよろしくない気がするので別でstyle.cssを作成して反映されるのか確認してみましょう。

theme.cssのheadタグ内に{{ 'style.css' | asset_url | stylesheet_tag }}を記述します。

style.cssには先ほど同様にこちらのコードを記述。※詳細度の問題で!importantをつけています。

body{
  background-color: chocolate !important;
}

では、ブラウザで確認してみます。

オカ

この辺りは、わかりやすいですね!
見慣れないコードの書き方があったりしますが、
やっていることは静的サイトやWordPressでの開発
と同じです。

configディレクトリ

settings_data.jsonsettings_schema.jsonファイルが格納されております。
Shopifyの管理画面から行うテーマのカスタマイズに関連しています。

settings_schema.jsonは、テーマエディタから変更可能な値を定義しているといった感じです。

こちらあまり僕も実務では触ったことがなく理解が浅いのですが、テーマエディタのテーマ設定の部分のカスタマイズができる理解でおります。

■参考資料
https://shopify.dev/docs/themes/settings

また、settings_data.jsonにはテーマエディタで設定された値が保存されます。
管理画面で入力した内容が、settings_data.jsonの中に書き込まれているといった状態ですね。

config.yml

テーマのIDやパスワードが入っているファイルです。

複数の環境の情報を入れることができます。実務でも本番環境と、開発環境の情報をいれてあれやこれやした記憶があります。

オカ

入社して2,3日目にこの辺りを触ったんですが、全く理解できていなかったですね。

■参考資料
https://shopify.dev/tools/theme-kit/configuration-reference#config-file

layoutディレクトリ

layoutにはレイアウトの大枠を定義するファイルが入っています。

theme.liqudしか触ったことがないのですが、cssやjsの読み込みなどはここで行われています。

下記のようなことが記述されており、meta情報や読み込みが行われているが分かるかと思います。

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="{{ settings.color_button }}">

  <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
  <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
  <link rel="preconnect" href="https://monorail-edge.shopifysvc.com">

  {%- assign header_font = settings.type_header_font -%}
  {%- assign base_font = settings.type_base_font -%}
  {%- assign base_font_bolder = base_font | font_modify: 'weight', 'bolder' -%}
  {%- assign base_font_bold = base_font | font_modify: 'weight', 'bold' -%}
  {%- assign base_font_italic = base_font | font_modify: 'style', 'italic' -%}
  {%- assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic' -%}

  <link rel="preload" href="{{ 'theme.css' | asset_url }}" as="style">
  {{ 'style.css' | asset_url | stylesheet_tag }}
  <link rel="preload" as="font" href="{{ header_font | font_url }}" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="{{ base_font | font_url }}" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="{{ base_font_bold | font_url }}" type="font/woff2" crossorigin>
  <link rel="preload" href="{{ 'theme.js' | asset_url }}" as="script">
  <link rel="preload" href="{{ 'lazysizes.js' | asset_url }}" as="script">

___省略___

  {{ content_for_header }}
</head>

<body class="template-{{ request.page_type | handle }}">

___省略___

</body>
</html>

localesディレクトリ

翻訳ファイルがjson形式が格納されております。無料テーマdebutには34ファイル入っていました。(日本語や、英語など)

■参考資料
https://shopify.dev/tutorials/develop-theme-localization-manage-locale-files

templatesディレクトリ

templatesディレクトリには多くのliquidファイルが格納されていますね。

各ページのテンプレートファイルが入っているディレクトリという認識で問題ないです。

一部テーマエディタで確認できる

404.liquid→404ページ
article.liquid→ブログ個別ページ
blog.liquid→ブログ一覧ページ
cart.liquid→カートのページ
collections.liquid→各コレクションページ
collections.list.liquid→各コレクションページ(画像がグリッドで並んでいる)
gift_card.liquid→ギフトカード
index.liquid→トップページ
list-collections.liquid →???(どこなのかよくわからない…。)
page.contact.liquid→お問い合わせ
page.liquid→個別ページ
password.liquid→パスワードページ
product.liquid→商品詳細ページ
search.liquid→検索ページ

■公式ドキュメント
https://shopify.dev/docs/themes/theme-templates/

sectionsディレクトリ

ファイルが多すぎる。

sectionsディレクトリの役割として、共通セクションを作るファイルという認識でいいかなと思います。

特徴としては、テーマエディタから編集可能なファイルだということでしょうか。

編集を可能にしているのが、schemaタグというものですがこちらについては長くなりそうなので別記事にてまとめます。

■公式ドキュメント
https://shopify.dev/docs/themes/sections

sectionで作成されたファイルは{% section 'header' %}と記述することで呼び出しが可能です。
今回は、header.liquidを呼び出しています。

注意点ですが、sectionsフォルダ内でsections内のファイルを呼び出すことはできないので理解しておきましょう。

snippetsディレクトリ

一部です。

snippetsディレクトリ内のファイルは、sections内ファイルよりもより小さな部品を定義しています。

パンくずや、ページネーションなどの小さな部品が格納されています。

snippets内で作成されたファイルは{% include 'product-price' %}と記述することで呼び出しが可能です。
今回は、product-price.liquidを呼び出しています。

{% include ' hogehoge ' %} vs {% render ' hogehoge' %}について

開発をしていると、includeやrenderで呼び出されていることを発見しました。
renderの方が良いみたいな感じだけど、いまいち理解できていない。

■英語であれやこれや話してます。
https://github.com/Shopify/starter-theme/issues/168

■includeについて

インクルードタグはレンダータグと似たような働きをしますが、スニペット内のコードが親テンプレート内の変数にアクセスして上書きできるようにします。インクルードタグは、変数を扱う方法がパフォーマンスを低下させ、テーマコードの読み込みとメンテナンスの両方を難しくするため、非推奨とされています。

https://shopify.dev/docs/themes/liquid/reference/tags/deprecated-tags#include

■renderについて

スニペットがレンダリングされると、その中のコードは、スニペットの親テンプレート内の変数タグを使用して割り当てられた変数に自動的にアクセスすることができません。同様に、スニペット内で割り当てられた変数は、スニペット外のコードからはアクセスできません。このカプセル化により、パフォーマンスが向上し、テーマコードの理解とメンテナンスが容易になります。

https://shopify.dev/docs/themes/liquid/reference/tags/theme-tags#render

まとめ

ざっくりとしたShopifyのテンプレート構造について理解ができましたね。

僕も、実際なんとなくの理解していたところをまとめていくなかでかなり理解が深まりました。

一部、まだ理解が追いついていない箇所もあるので引き続き学習していって記事も更新していきますね。

あと、これからShopifyを学習していく人はこちらの動画をオススメしておきます。

Udemyでセール時に1500円ほどで購入可能です。

Build a Shopify Theme From Scratch

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次
閉じる