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アカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023Shopifyの管理画面では、商品ごとや配送元のロケーション(倉庫)ごとにカスタム配送料を設定することができます。特に購入金額による送料無料設定は、顧客の購買意欲を高める効果的な手...
By Alex06 Nov 5, 2023