Shopify テーマ、Liquid、ロゴ、その他の類似トピック
テーマはDawnで特集コレクションを表示した時に横列は画像が4枚しか表示されません。これを5枚か6枚に増やしたいのですが、手こずっておりご教示頂きたいです。
shopify経験浅い為、具体的に頂けますと幸いです。
宜しくお願い致します。
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に設定して保存すれば完了です。
しっかり検証していないので、エラーや不具合があれば改めてご連絡下さい。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024