テーマ「Dawn」でマルチカラムのボタンを3つ横並びにさせたい

[togu3331]

DAWNテーマにて、商品ページを作成しているのですが

商品のカテゴリーごとにアイコンを作りたく、そちらの代用をマルチカラムのボタンで各カテゴリ（コレクション）に飛ばせたいと思っています。

モバイルで表示する際にボタンを３つ横並びで表示させたいのですが、そちらは可能なのでしょうか。

どうぞよろしくお願い致します。

[Qcoltd]

前提が推測になってしまうのですが、下記の前提で回答いたします。

1. オンラインストア > テーマ > カスタマイズ で、商品ページにおいて、マルチカラムの「モバイルでの列数」を3列に設定したい。
2. 「モバイルでスワイプを有効にする」はOFF。
3. できるだけコードカスタマイズをしない。

3の要件だけ満たすのが難しいのですが、下記のようにコードカスタマイズすることで可能です。

(Dawn 6.0.2のコードで説明いたしますので、細部が質問者様のコードと異なる可能性があります。)

sections/multicolumn.liquid: 288行目付近

      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.multicolumn.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.multicolumn.settings.columns_mobile.options__2.label"
        }

こちらを下記に変更。

      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.multicolumn.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.multicolumn.settings.columns_mobile.options__2.label"
        },
        {
          "value": "3",
          "label": "3列"
        }

assets/base.css: 1150行目付近

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }

 こちらを下記に変更。

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }

  .grid--3-col-tablet-down .grid__item {
    width: calc(33% - var(--grid-mobile-horizontal-spacing) / 2);
  }

assets/base.css: 1191行目付近

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

 こちらを下記に変更。

  .grid--3-col-tablet-down .grid__item {
    width: calc(33% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

動作確認を十分にしていませんので、うまくいかない点があるかもしれません。

その場合はお知らせください。

ご参考まで。

(キュー田辺)