📁

【Shopify.dev和訳】Themes/Architecture/Sections/Overview

2021/09/18に公開

この記事について

この記事は、Themes/Architecture/Sections/Overviewの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

セクションは、マーチャントがカスタマイズできるコンテンツの再利用可能なモジュールをホストするために使用されます。

セクションファイルは、テーマの sections ディレクトリに置かれます。

セクションは、他の Liquid テーマファイルと同じように、グローバルオブジェクト、タグ、フィルターにアクセスできるほか、以下のセクション固有のオブジェクトにもアクセスできます。

また、セクションは以下の Liquid タグにも対応しており、セクション特有のものとなっています。

グローバルオブジェクトは別として、セクションの外で作られた変数はセクション内ではアクセスできません。

セクションとブロックオブジェクト、そしてセクション内で作成された変数は、それぞれのセクションの外では利用できません。唯一の例外は、関連するセクションの中でレンダリングされるスニペットの中で、セクションやブロックオブジェクトを参照する場合です。

セクションのレンダリングは、以下のいずれかの方法で行うことができます。

Liquid のセクションタグを使って、セクションを静的にレンダリングすることができます。

例えば、テーマのヘッダーコンテンツを含む/sections/header.liquidファイルがある場合、そのセクションをtheme.liquidに含めることで、そのレイアウトを使用するすべてのページでヘッダーがレンダリングされるようになります。

layout/theme.liquid

{% section 'header' %}

ログインするとコメントできます