表示画像の枚数をコード編集したい。

[COLA-KUN]

テーマはDawnで特集コレクションを表示した時に横列は画像が4枚しか表示されません。これを5枚か6枚に増やしたいのですが、手こずっておりご教示頂きたいです。

shopify経験浅い為、具体的に頂けますと幸いです。

宜しくお願い致します。

[mrtc]

Shopifyの経験が浅いとのことでスキルによっては難しいかもしれませんが、以下のソースの太字部分を編集・追記でイメージ通りに実装できるかと思います。

Dawnの特集コレクションは「表示する最大の商品」が偶数しか設定できない仕様なので、まずは「featured-collection.liquid」のセクション設定を2から1へ編集します。

{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 12,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.products_to_show.label"
},

同じく「featured-collection.liquid」の商品リストを囲む<ul>タグに、5点と6点を適用した場合の分岐クラスを追記します。

<ul class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% elsif products_to_display == 5 %} grid--2-col-tablet grid--5-col-desktop{% elsif products_to_display == 6 %} grid--2-col-tablet grid--6-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">

次にに「base.css」を開いて「.grid--4-col-desktop .grid__item」を検索し、先程定義した5点と6点用のスタイルを追記します。

@media screen and (min-width: 990px) {
.grid--6-col-desktop .grid__item {
width: calc(100% / 6 - 1rem * 3 / 4);
}

.grid--5-col-desktop .grid__item {
width: calc(20% - 1rem * 3 / 4);
}

.grid--4-col-desktop .grid__item {
width: calc(25% - 1rem * 3 / 4);
}

.grid--3-col-desktop .grid__item {
width: calc(33.33% - 1rem * 2 / 3);
}

.grid--2-col-desktop .grid__item {
width: calc(50% - 1rem / 2);
}
}

最後にカスタマイザーの「特集コレクション」のセクション設定にて「表示する最大の商品」を5や6に設定して保存すれば完了です。

しっかり検証していないので、エラーや不具合があれば改めてご連絡下さい。