FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

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

COLA-KUN
Shopify Partner
20 0 4

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

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

宜しくお願い致します。

1件の返信1

mrtc
Shopify Partner
47 20 27

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

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

自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。