Shopifyのテンプレート構造について理解しよう

私達ARCHETYPでは、Shopifyの知識・技術UPのために定期的にShopif勉強会を行なっています。
今回は、4月6日に行なった勉強会の内容について共有していこうと思います。

前回のおさらいはこちら（Shopifyのメタフィールドについて理解を深めよう）

Shopifyのテーマファイルの構造

Shopifyのテーマファイルは、以下の順で呼び出されている
１、全ページ共通で呼び出すtheme.liquidファイルが呼び出される
２、各ページのテンプレートになる、templatesフォルダ内にあるテンプレートファイルが呼び出される
３、各ページに、カスタム機能が必要であれば、sectionsフォルダから対象のファイルが呼び出される
４、各ページに、カスタムはしないが使い回すようなものがあれば、snippetsフォルダからファイルが呼び出される
5、セクションファイルやスニペットファイルは、テンプレートファイル内だけでなく、theme.liquid内にも呼び出せる
※ OS.2.0から、テンプレートファイルは、json形式になったので、スニペットはセクションファイルかテーマファイルに書き込むことになる。

テーマのカスタム機能を組み込むsectionファイル

Shopifyの一番の特徴？
管理画面からできるテーマのカスタマイズ

テーマのカスタム機能はsectionファイルにスキーマを設定して作る

・追加できるスキーマ（カスタム項目は24種類）
基本的な入力設定 ７種類
チェックボックス、数字のインプット、ラジオボタン、レンジ、セレクター、一行のテキスト、textarea

特殊な入力設定 17種類
記事、ブログ、コレクション、色、グラデーションカラー、フォント、html、画像、ナビ、liquid、ページ、製品、製品リスト、リッチテキスト、url、video_url
（セクションファイルであれば、ブロックというコンテンツを複数追加できる機能も実装できる）
https://shopify.dev/themes/architecture/settings/input-settings#standard-attributes

デフォルトで存在するページ

・TOP
・商品類（コレクション一覧、商品一覧、商品詳細、カート）
・アカウント類（新規登録、ログイン、パスワードリセット、アカウント有効化、アドレス帳、注文履歴詳細）
・ブログ（記事一覧、記事詳細）
・その他（お問い合わせ、検索結果、４０４、パスワード）
・Shopifyのデフォルト機能で法務関連ページは作成できる

上記以外のページは開発が必要になってきます。

開発が必要なページ（例）
・ブランド紹介（ほぼ必須）
・FAQ、ご利用ガイド
・法務関連ページ
・任意の項目でお問い合わせ
・お気に入り、閲覧履歴
・退会画面

カスタムできないページが存在する？

Shopifyのカート画面から先のページは、原則カスタムができないので注意が必要
カート画面から先のページをカスタムしたい場合は
１、Shopify Plusに契約をしcheckout.liquidのカスタム申請をする
(カスタムできる内容は限られている）
２、OS.2.0から使えるようになった、チェックアウト画面をカスタムできるアプリを使ってカスタムする
(https://www.shopify.jp/blog/unite-2021）

まとめ

・theme.liquidを土台に、templates ＞ sections,snippets が読み込まれている
・sectionsファイルがカスタムできて、種類は24種類をベースにロジックを組んで開発することになる
・開発が必要になってくるページは、デフォルトの17種類以外のページでオリジナルデザインのページは開発が必要になってくる
・チェックアウトページは、Shopify Plus プランから変更出来るが、出来ることは限られている（アプリを使うと変更が可能になる）

次回の勉強会は…
各ページやセクションの開発にかかる工数出しをしてみようと思っています！

あと…

ARCHETYPでは、一緒に働く仲間を募集してます。
少しでも気になった方は、こちらから気軽に応募してみてください！！！
応募待ってます！！