Liquid、JavaScriptなどに関する質問
表題の件について、トップページや商品ページなどでカスタマイズ可能なサイドバーを表示したいです。
イメージとしては以下のようなものを想定しています。
snippetsファイルを作ってtheme.liquidにincludeする方法で試してみたんですが、配置がずれてうまく表示できませんでした。
いいアドバイスをいただけたら幸いです。
以上、よろしくお願いします。
解決済! ベストソリューションを見る。
成功
配置がずれてうまく表示できまないというのがどうい状態なのかわかりませんが、TOPページに関しましてはサイドバーをつけるようなHTML構造には出力できないと思いますので、構造での対応は難しいと思われます。
古いブラウザを切り捨てて良い場合は、CSSのグリッドレイアウトを用いれば対応可能かもしれません。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
「グリッドレイアウト」で検索いただければ色々情報が出てきますので、調査されることをお勧めします。
ただしセクションの順序と数の変更で壊れると思われるため柔軟性はなくなると思います。
増減するたびにCSSを手作業で書き直すのがシンプルですが、構造によってはJSを使って表示のたびに書き換えることも検討できるかもしれません(未検証です)。
以上ですが推測で書いていますので間違いがありましたら申し訳ありません。
グリッドレイアウトは指定が複雑なのと、より良い方法を検討する必要もありますので、以下3点をお勧めします。
(※1)Shopify製のテーマであれば60分のサポートを受けられるようですので、活用が検討できると思います。
https://help.shopify.com/ja/manual/online-store/themes/theme-support#part-5ad7f21e8d34326a
成功
配置がずれてうまく表示できまないというのがどうい状態なのかわかりませんが、TOPページに関しましてはサイドバーをつけるようなHTML構造には出力できないと思いますので、構造での対応は難しいと思われます。
古いブラウザを切り捨てて良い場合は、CSSのグリッドレイアウトを用いれば対応可能かもしれません。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
「グリッドレイアウト」で検索いただければ色々情報が出てきますので、調査されることをお勧めします。
ただしセクションの順序と数の変更で壊れると思われるため柔軟性はなくなると思います。
増減するたびにCSSを手作業で書き直すのがシンプルですが、構造によってはJSを使って表示のたびに書き換えることも検討できるかもしれません(未検証です)。
以上ですが推測で書いていますので間違いがありましたら申し訳ありません。
グリッドレイアウトは指定が複雑なのと、より良い方法を検討する必要もありますので、以下3点をお勧めします。
(※1)Shopify製のテーマであれば60分のサポートを受けられるようですので、活用が検討できると思います。
https://help.shopify.com/ja/manual/online-store/themes/theme-support#part-5ad7f21e8d34326a
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025