FROM CACHE - jp_header

コレクションをスワイプ4列表示させる方法を教えてください。

ma15
訪問者
2 0 0

ショッピファイ初心者です><

以下画像丸枠内のように、

コレクションスワイプのサイズを

モバイルで横4列で表示させたいです。

 

8F0E22B9-2572-41FE-9CF7-FFBF8A162F72.jpeg

 今dawnのデザインを使用してます。

コレクションだと2列が最大で縦幅かなりとってしまうのが気になり、画像のような4列幅に変更するdawnのコード変更方法など教えていただけたら幸いです!

 

よろしくお願い致します。

1件の返信1

Qcoltd
Shopify Partner
1051 429 414

十分に検証ができていませんので、

下記の変更で不具合がありましたら、元にお戻しください。

 

Dawn 7.0.2で確認しました。

 

コード編集画面を開き、

アセット(assets)のbase.cssを編集します。

以下に示す行数はカスタマイズ状況によって異なるかもしれません。

 

 

1164行目付近

  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek .grid__item {
    min-width: unset;
  }

 

 

1181行目付近

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

↓下記のように変更します。

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(25% - var(--grid-mobile-horizontal-spacing));
  }

 

 

もし、タブレットサイズでも、4列にされたい場合は、下記のようにします。

1201行目付近

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing));
  }

 

 

なお、上記のようにしますと、

商品名や金額の文字サイズを調整しないと、

見栄えが悪いかもしれません。

それらが必要でしたらお声がけください。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/