特集コレクションのモバイルでの商品列数を3列に増やす【Rise】

Shopifyのテーマ「Rise」の特集コレクションは、モバイルでは商品は1列または2列で表示できます。さらに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. 最後に「保存」をクリックして完了です。