📁

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

2021/09/18に公開約3,000字

この記事について

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

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

Shopify アプリのご紹介

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

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

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

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

セクション

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

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

Liquid セクション

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

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

変数スコープ

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

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

セクションのレンダリング

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

セクションの静的なレンダリング

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

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

layout/theme.liquid
{% section 'header' %}

Shopify アプリのご紹介

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

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

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

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

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