Shopifyのテーマ「Rise」の特集コレクションは、モバイルでは商品は1列または2列で表示できます。さらに3列表示を追加する方法を解説します。
「セクション」フォルダ内のfeatured-collection.liquidファイルを選択し、ページ下部に以下を追記します。
変更前：
{
"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列を選べるようになりました。
最後に「アセット」フォルダ内のbase.cssファイルに3列の場合の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);
}