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

**URL:** <https://community.shopify.com/t/topic/64518>\
**Category:** Shopify テーマ\
**Created:** [September 9, 2021, 1:28am UTC](https://community.shopify.com/t/topic/64518 "2021-09-09T01:28:43Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

課題: Dawnテーマの特集コレクションで横並びが4枚に限定されており、5枚または6枚表示へ拡張したい要望。依頼者は初心者のため、具体的手順が提示された。

提案された解決策（コード編集）:
- featured-collection.liquid（特集コレクションのセクション）で設定スキーマのproducts_to_showのstepを2→1に変更。Dawnは偶数のみ許容の仕様のため、奇数（5）対応の下準備。
- 同ファイル内、商品リストの<ul>クラスに条件分岐を追記し、5枚時はgrid--5-col-desktop、6枚時はgrid--6-col-desktopを付与。
- base.css（テーマのスタイル）に対応するスタイルを追加：.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)で指定。
- カスタマイザーで「表示する最大の商品」を5または6に設定して保存。

注意点: 提示者は十分な検証を行っていないため、不具合があれば報告を依頼。

現状: 具体的実装手順が共有された段階で、成功報告や最終解決の確認は未了。

<div class="post-metadata">

**Author:** ![COLA-KUN](https://avatars.discourse-cdn.com/v4/letter/c/57b2e6/32.png) [@COLA-KUN](https://community.shopify.com/u/COLA-KUN)\
**Post date:** [September 9, 2021, 1:28am UTC](https://community.shopify.com/t/topic/64518/1 "2021-09-09T01:28:43Z")

</div>

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

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

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![mrtc](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mrtc/32/109726_2.png) [@mrtc](https://community.shopify.com/u/mrtc)\
**Post date:** [September 10, 2021, 8:19am UTC](https://community.shopify.com/t/topic/64518/2 "2021-09-10T08:19:19Z")

</div>

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」の商品リストを囲む

タグに、5点と6点を適用した場合の分岐クラスを追記します。

次にに「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に設定して保存すれば完了です。

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