FROM CACHE - jp_header
解決済

Dawnモバイル表示で商品グリットを3列 表示させたい

kazuchan
訪問者
1 0 0

お世話になっております。

Dawnのテーマを使用しております。

モバイルでの商品グリットの列数3列で表示させたいです。(1,2しか選択肢がない)

 

どのようにコード編集しましたら3列になりますでしょうか。

お分かりになられる方がいらっしゃいましたら、よろしくお願いいたします。

 

他の方のQAにてバージョン6.0.1用のコードを使ったところ

反映されなかったので、「Dawnのバージョン7.0.1」用で教えていただけないでしょうか。

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1523 545 685

成功

Kazuchanさま

 

はじめまして、フルバランスの園畑です。

ご質問を確認いたしました。

 

モバイルでもカスタマイズから3列にできたら楽で嬉しいですよね。。

 

カスタマイズから設定できないのであれば、コード修正が必要になります。

dawnの場合、「main-collection-product-grid.liquid」から商品の列数を変更できます。

 

まず、以下id:"columns_mobile"の値に"3"を追加します。

スクリーンショット 0004-11-07 17.48.40.png

これで、カスタマイズ画面より3列の選択肢が表示されます。

スクリーンショット 0004-11-07 17.54.02.png

 

次に以下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>

 

スクリーンショット 0004-11-07 17.53.27.png

 

ご参考になりましたでしょうか。

 

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

 

分からない点があれば、またいつでもご連絡ください。

 

フルバランス 園畑

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

1件の返信1

株式会社フルバランス
Shopify Partner
1523 545 685

成功

Kazuchanさま

 

はじめまして、フルバランスの園畑です。

ご質問を確認いたしました。

 

モバイルでもカスタマイズから3列にできたら楽で嬉しいですよね。。

 

カスタマイズから設定できないのであれば、コード修正が必要になります。

dawnの場合、「main-collection-product-grid.liquid」から商品の列数を変更できます。

 

まず、以下id:"columns_mobile"の値に"3"を追加します。

スクリーンショット 0004-11-07 17.48.40.png

これで、カスタマイズ画面より3列の選択肢が表示されます。

スクリーンショット 0004-11-07 17.54.02.png

 

次に以下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>

 

スクリーンショット 0004-11-07 17.53.27.png

 

ご参考になりましたでしょうか。

 

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

 

分からない点があれば、またいつでもご連絡ください。

 

フルバランス 園畑

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス