●セクションファイルの設定内容、その保存先について
基本的に、セクションの設定というのはそのセクション内でしか使えない設計になっているはずです。
動的レンダリングでセクションZを追加している際、その設定内容（登録した画像やテキスト類）はセクションZを読み込ませているテンプレートファイルに保存されます。
商品詳細ページであり、テーマがDawnなら「product.json」です。
要望は商品詳細ページと、固定ページで共通項目の表示ということですね。
この場合、「product.json」と「page.json」で、セクションZを読み込ませる訳ですが、設定内容はそれぞれのjsonテンプレートファイルに保存されるため、設定内容が共有されることはありません。
特定テンプレートファイルから、別テンプレートファイルの設定の取得も出来ないでしょう。
しかし、テンプレートファイルが静的レンダリング（product.liquidなど）で、これにセクションZを埋め込ませるなら、セクションの設定内容は「設定 > settings_schema.json」に保存されます。
この場合、設定内容の共有が可能です。
※ただし、最新のテーマでは静的レンダリングが主流でなくなっています。
動的レンダリングでありながらも設定内容を共有させるなら、共通のファイルにセクションZを埋め込むしかないです。
即ちtheme.liquidが該当します。
ーー
●A,B,Cに挿入したセクションZのブロックのすべて内容を、固定ページaで取得する方法
これ自体はやり方が複数存在すると思います。例えば以下の様な方法です。
- セクションZに全ての設定を保存させる。
- 商品詳細A用のブロックに画像類登録。BCDも同様。
- このブロック内では、表示させるページを指定する欄を設けておく
- 閲覧ページが商品詳細ページであり、かつハンドル名が一致すれば、設定内容を出力
- 固定ページaでは、A･B･C用の設定のみ出力させる
- 閲覧ページがpages以下であり、固定ページのハンドル名が一致すれば、特定の設定内容を出力
セクションZ内では以下の様な分岐を行います。
{% for block in section.blocks %}
{%- # 登録された全ブロックをループで識別 -%}
{% if template.name == 'product' %}
{%- # 商品詳細ページの時 -%}
{% unless block.setting.product_handle == product.handle %}
{%- # block.setting.product_handleには、表示させたい商品詳細ページのハンドル名が入る -%}
{%- # 出力対象ではない場合、次のループへ -%}
{% continue %}
{% endunless %}
{% elsif page.handle == '固定ページaのハンドル名' %}
{%- # 固定ページaの時 -%}
{% if block.setting.product_handle == '商品詳細Dのハンドル名' %}
{%- # 出力させない商品詳細ハンドル名を記述しておく -%}
{%- # 出力対象ではない場合、次のループへ -%}
{% continue %}
{% endif %}
{% endif %}
{%- # 除外対象ではない場合、以下の処理が走る -%}
・・（画像やテキストを出力）・・
{% endfor %}
{% schema %}のblocks内に、id"product_handle"を用意しておき、その設定を参照させています。
実際どの程度の規模のページに適用させるのか分かりませんが、状況次第ではコードの編集が必要です。
静的レンダリングならば、product.liquidとpage.liquidにセクションZを埋め込ませ、セクションZ側で全ブロックを識別しながら、設定された内容を表示したいページで出力させることが可能です。
動的レンダリングなら、theme.liquidにセクションZを埋め込ませれば、同じように出力可能です。
ただし、出力場所が自由に変更できないですね。
{% sections 'header-group' %}
{% section 'セクションZ' %}← コンテンツ内に記述できない
{{ content_for_layout }}
{% section 'セクションZ' %}← コンテンツ内に記述できない
{% sections 'footer-group' %}
content_for_layoutの上下どちらかしか設置できない弱みがあります。
それで問題ないならいいのですが。
ーー
●動的レンダリングでありながら、jsonテンプレート内どこでも設置する方法
動的レンダリングなら画面のように、任意の順番でセクションの設置が可能です。
このように自由な場所で出力させたい場合、方法は1通りしかないように思います。
jsでのHTMLパースです。
以下二種類のファイルを用意することで、任意の場所に出力可能です。
- セクションZの設定管理用
- theme.liquidに設置する
- jsのオブジェクトを出力させる
- 全ページに同じjsオブジェクトが出力されるため、共通設定のように取得可能
- セクションZのHTMLパース用
- テンプレートファイルから読み込ませる
- 1で出力したjsオブジェクトを、HTMLにパースさせる
既存のファイルを大幅に変更させることになるため、難易度が上がるのが難点です。
SEOの観点からも、HTMLパースさせた要素は認識されない（されにくい）でしょう。
const sectionZObject = [
{%- for block in section.blocks -%}
{
"image": "{{ block.settings.画像 | image_url: width: '640x' }}",
"text": "{{ block.settings.テキスト }}",
"product_handle": "{{ block.settings.表示対象ページ }}",
}{%- unless forloop.last -%},{%- endunless -%}
{%- endfor -%}
];
上記のようにセクションZで記述しておくと、以下のオブジェクトが出力されます。
const sectionZObject = [
{ "image": "//cdn.shopify.com/s/files/1/0000/0000/0000/files/image1.jpg", "text": "Text 1", "product_handle": "商品A" },
{ "image": "//cdn.shopify.com/s/files/1/0000/0000/0000/files/image2.jpg", "text": "Text 2", "product_handle": "商品B" },
{ "image": "//cdn.shopify.com/s/files/1/0000/0000/0000/files/image3.jpg", "text": "Text 3", "product_handle": "商品C" }
.....
];
これをHTMLにパースさせるわけです。