FROM CACHE - jp_header

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

解決済
j-lee
観光客
6 0 0

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

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

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

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

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

j-lee_0-1624889387721.png

j-lee_1-1624889432210.png

 

 

1 件の受理された解決策

ベストソリューション
Jizo_Inagaki
Shopify Partner
580 238 551

成功

配置がずれてうまく表示できまないというのがどうい状態なのかわかりませんが、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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

2件の返信2
Jizo_Inagaki
Shopify Partner
580 238 551

成功

配置がずれてうまく表示できまないというのがどうい状態なのかわかりませんが、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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
j-lee
観光客
6 0 0

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

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

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