Liquid、JavaScriptなどに関する質問
wordpressのstorefrontテーマを使用して作ったショッピングサイトに、but buttonを埋め込んで商品一覧とカテゴリー別の商品ページを作ろうと考えています。
商品数が多いため、スマホ画面でも2商品横並びで表示したいのですが、どうしてもできません。
本来、スタータープランでやりたかったですが、コレクション機能なら横並びできそうでしたのでプラン変更しましたが、PC表示は横並びできてもスマホは無理でした。
コードの知識はありませんが、解決策はありますでしょうか?
@gamama 様
興味があり調査してみました。
おそらくスタータープランでもCSSの調整でモバイル表示でも2カラムにすることはできるのではないかと思いますが、
取り急ぎ、コレクションの購入ボタンをモバイル表示で2カラムにする方法をお伝えします。
購入ボタンのコードの中に下記のような記述はないでしょうか?
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px",
"width": "calc(25% - 20px)"
},
もし、上記があるようでしたら、下記の内容に書き換えてみてください。
"product": {
"styles": {
"product": {
"@media (max-width: 600px)": {
"min-width": "unset",
"max-width": "calc(50% - 20px)"
},
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px",
"width": "calc(25% - 20px)"
},
これで、モバイル表示でも2カラムになるはずです。
下記のサイトに詳しいカスタマイズ方法が記載されていますので、ご覧いただくと良いかもしれません。
https://shopify.github.io/buy-button-js/advanced/
ご参考まで。
(キュー田辺)
ご返信ありがとうございます。
解決策をご教授くださり大変ありがたいのですが、問題の解決は困難だと判断して、無料お試し期間の終了とともにshopifyをやめてしまいました。
その時にこちらの投稿も削除したかったのですが、どうにも削除の仕方がわからなかったので残ったままになっておりました。
ですので、申し訳ありませんが結果を検証することができません。
このたびはお手数をおかけしてしまってすみませんでした。
@gamama 様
左様でしたか。
私の回答が遅かったのでお気になさらないでください。
もし、何かの機会でまたShopifyを触ることあれば、お気軽にご相談ください。
(キュー田辺)
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024