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

日本語 ディスカッション Shopify テーマ
1

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

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

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

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

2

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

  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);
  }

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

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

ご参考まで。

(キュー田辺)