supplyでカスタマイズ可能なサイドバーを表示したい。

[j-lee]

表題の件について、トップページや商品ページなどでカスタマイズ可能なサイドバーを表示したいです。

イメージとしては以下のようなものを想定しています。

snippetsファイルを作ってtheme.liquidにincludeする方法で試してみたんですが、配置がずれてうまく表示できませんでした。

いいアドバイスをいただけたら幸いです。

以上、よろしくお願いします。

[Jizo_Inagaki · Accepted solution]

配置がずれてうまく表示できまないというのがどうい状態なのかわかりませんが、TOPページに関しましてはサイドバーをつけるようなHTML構造には出力できないと思いますので、構造での対応は難しいと思われます。

古いブラウザを切り捨てて良い場合は、CSSのグリッドレイアウトを用いれば対応可能かもしれません。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

「グリッドレイアウト」で検索いただければ色々情報が出てきますので、調査されることをお勧めします。

ただしセクションの順序と数の変更で壊れると思われるため柔軟性はなくなると思います。
増減するたびにCSSを手作業で書き直すのがシンプルですが、構造によってはJSを使って表示のたびに書き換えることも検討できるかもしれません(未検証です)。

以上ですが推測で書いていますので間違いがありましたら申し訳ありません。

グリッドレイアウトは指定が複雑なのと、より良い方法を検討する必要もありますので、以下3点をお勧めします。

• Sopifyのサポートに相談する(※1)
• エキスパートに依頼する
• 何らかの方法でご希望の状態を実現できているテーマが既にあるかもしれないため、テーマを探す

(※1)Shopify製のテーマであれば60分のサポートを受けられるようですので、活用が検討できると思います。

https://help.shopify.com/ja/manual/online-store/themes/theme-support#part-5ad7f21e8d34326a

[j-lee]

Jizo_Inagaki様

アドバイスありがとうございます。

デザインの修正案でサイドメニューを表示する要件がなくなりました。

頂いたアドバイスは今後の開発にて参考にしたいと思います。