Rise：モバイルでの列数を3列にする方法について

[M1sa]

初めまして。

無料版テーマの「Rise」を使用中なのですが、モバイルでの商品列数が1 or 2列しかありません。

このモバイルにおける列数を3列にしたく、調べていたところ

他のテーマの方でも同様の質問をされている方がいました。

そちらではCSSのコードで変えることができるとのことで、そちらのコードをコピーして使用してみましたが、

テーマが違うためか反映されませんでした。

Riseにおける3列にする方法、もしくはCSSコードなどございましたら教えていただけると幸いです。

[株式会社ナレッジサービス · Accepted solution]

「特集コレクション」での表示に限定して回答します。

3列固定でよければ、以下のコードをカスタムCSSに記載します。

@media screen and (max-width: 749px) {
  .grid--2-col-tablet-down .grid__item {
    width: calc(33% - var(--grid-mobile-horizontal-spacing) / 2);
  }
}

1〜3列をカスタマイズ画面で選択できるようにするには、以下の手順をお試しください。

なお、コードを編集するので意図せず表記が崩れる等のエラーが発生する場合があります。事前にバックアップを取るなどのリスク対策が必要です。

1.管理画面にログインし、[オンラインストア] > [テーマ] に移動します。

2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

3. 「セクション」フォルダ内のfeatured-collection.liquidファイルを選択します。

4. ページ下部に以下を追記します。

変更前：

    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.featured-collection.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
        }
      ]
    },

変更後：

    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.featured-collection.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
        },
        {
          "value": "3",
          "label": "3列"
        }
      ]
    },

これでカスタマイズ画面で1〜3列を選べるようになりました。

5. 最後に3列の場合のCSSを追記します。「アセット」フォルダ内のbase.cssファイルを選択し、以下のコードを追記します。

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

6. 最後に「保存」をクリックして完了です。

[M1sa]

ありがとうございました！

無事に3列にすることができました！m(_ _)m