Liquid、JavaScriptなどに関する質問
お世話になっております。
Dawnのテーマを使用しております。
モバイルでの商品グリットの列数3列で表示させたいです。(1,2しか選択肢がない)
どのようにコード編集しましたら3列になりますでしょうか。
お分かりになられる方がいらっしゃいましたら、よろしくお願いいたします。
他の方のQAにてバージョン6.0.1用のコードを使ったところ
反映されなかったので、「Dawnのバージョン7.0.1」用で教えていただけないでしょうか。
解決済! ベストソリューションを見る。
成功
Kazuchanさま
はじめまして、フルバランスの園畑です。
ご質問を確認いたしました。
モバイルでもカスタマイズから3列にできたら楽で嬉しいですよね。。
カスタマイズから設定できないのであれば、コード修正が必要になります。
dawnの場合、「main-collection-product-grid.liquid」から商品の列数を変更できます。
まず、以下id:"columns_mobile"の値に"3"を追加します。
これで、カスタマイズ画面より3列の選択肢が表示されます。
次に以下cssを追加することで、3列の表示が可能になるかと存じます。
<style>
@media screen and (max-width: 749px) {
.grid--3-col-tablet-down .grid__item {
width: calc(30% - var(--grid-mobile-horizontal-spacing) / 3);
}
}
</style>
ご参考になりましたでしょうか。
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 園畑
成功
Kazuchanさま
はじめまして、フルバランスの園畑です。
ご質問を確認いたしました。
モバイルでもカスタマイズから3列にできたら楽で嬉しいですよね。。
カスタマイズから設定できないのであれば、コード修正が必要になります。
dawnの場合、「main-collection-product-grid.liquid」から商品の列数を変更できます。
まず、以下id:"columns_mobile"の値に"3"を追加します。
これで、カスタマイズ画面より3列の選択肢が表示されます。
次に以下cssを追加することで、3列の表示が可能になるかと存じます。
<style>
@media screen and (max-width: 749px) {
.grid--3-col-tablet-down .grid__item {
width: calc(30% - var(--grid-mobile-horizontal-spacing) / 3);
}
}
</style>
ご参考になりましたでしょうか。
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 園畑
いつも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