はじめに

shopifyをつかったECサイトを構築案件にて、
TOPページ並びに各固定ページにヒーローヘッダーに、それぞれ違う画像を表示させたいと要望がありました。
しかし、既存テーマではこの要件を満たすものがありません。

どのように実装したかのを記録として残します。

課題点

先方はhtml記法ができない
同一テンプレートから作成した場合、他のページも変更が反映される
管理画面上に項目を追加するの方法が容易ではない
今後画像を変更する可能性があり、簡単に行いたい。

ヒーローヘッダー付きテンプレートの作成自体は
TOPページで使用していたセクションがあったため問題はありませんが、
schemaで設定した画像が固定ページで共通になってしましました。

対策

全ページ共通設定になる原因は、schemaの設定データがページ毎ではなくsectionファイル単位での保存となっていることでした。
ページ依存ではなくファイル依存であることから、単純にテンプレートファイルを複製すれば一応は機能します。
よって、sectionファイルとそれを呼び出すtemplateファイルを必要分複製することにしました。

なお、sectionファイルを共通としてtemplateのみ複製した場合でschemaの設定は共通になります。

さいごに

あくまで応急処置的対応です。
ページ数が増えるたびにtemplateとsectionにファイルが増えていく事になり、スマートではない印象です。
TOPページでセクションを使用した時はそれぞれの内容が保存されているので方法はあるのではないかと、確認中です。
簡単に管理画面側へ項目を追加できるといいのですが...