Shopifyのテーマのトップページをカスタマイズしたい{{ content_for_index }}とは

templatesフォルダにあるindex.liquidに以下のコードがあります。

{{ content_for_index }}

トップページは管理画面からドラッグアンドドロップでセクションを追加できるようになっています。

そのため、テンプレートファイルではカスタイズできません。
問題はこのコードはどこを探せばこのコードの中身を見ることができるのでしょうか。

Shopifyのフォーラムに上がっていました。

cotent_for_indexについて

これはShopifyテーマの予約オブジェクトのようなもので定義はテーマの中には存在しません。
詳細は以下をご覧ください。
https://shopify.dev/docs/themes/liquid/reference/objects#content_for_index
上記にあるように、この実体は、settings_scheme.jsonで定義され、実際にindexに表示されているのものはsectionの塊になるので（Shopifyはセククションのドラッグアンドドロップで自由にレイアウト変更できるので）、index は通常何もコードがないのがほとんどです。
テーマの構造の詳細をお知りになりたい場合は、上記の親ページを参照されると良いと思います。
https://shopify.dev/docs/themes/files

トップページをカスタマイズするには「settings_scheme.json」をいじる必要がありそうです。

動的セクションと静的セクションの違い

静的セクションとは
テンプレートファイルの中にセクションをコードで読み込む記述をする方法でセクションのコンテンツを読み込む方法です。

例えばヘッダーセクションを読み込む場合です。

{% section 'header' %}

セクションであるヘッダーを読み込むコードです。

動的セクションとは
管理画面からドラッグアンドドロップで編集できるセクションのことです。これは「settings_scheme.json」にスキーマとして登録されています。
トップページを編集するには、「settings_scheme.json」を編集する必要がありそうです。

動的セクションは、カスタマイズ画面に25個表示することができます。
schemaにプリセットが記述されたセクションは、自動的にcontent_for_indexに追加されます。

セクションスキーマタグの活用

セクションファイルにはHTMLとLiquidの記述のあとに、{% schema %}タグで定義されたschema（スキーマ）が記述されています。

スキーマはコメントタグのように、スキーマのコードは実行されません。

schemaがShopifyの核となる部分で、schemaを定義することで
管理画面からユーザーが操作できる部分を作成することができます。

セクションファイルのschemaタグ内で以下のプロパティを定義することができます。

name
class
tag
settings
blocks
max_blocks
presets
default
locales

詳しくは@eijiSaitoさんの記事がとても参考になります！

【Shopify】LiquidのSection概要まとめ - Qiita

スキーマを設定する

Web業界で働く方を少しだけ手助けするメディアさんが参考になります！

【Shopify】Content Schemaを理解して、管理画面からサイトをカスタマイズできるようにする - #08

「settings_schema.json」と「セクションファイル」にスキーマを追加することができます。

SettingsSettings

スキーマの設定がハードルが高い場合の対処法

動的セクションを使わず、静的セクションを追加して、自分の好きなデザインを実現することはどうでしょうか。

自分が表示したい内容をテンプレートファイルに記述し、
index.liquidの中にテンプレートファイルを読み込むことで、
自分の好きなデザインを実現することができるのではと思います。

オンラインストア2.0

オンラインストア2.0では、ほとんど全てのページでドラッグアンドドロップでセクションを追加できる動的セクションが使えるようになりました。
これまではトップページだけに使用できた機能がどのページでも使えるようになったので管理画面から設定できるコンテンツが増えるのでオンラインショップを柔軟に対応することが可能になります。

オンラインストア2.0についてはこちらの記事でまとめています。