商品コレクションのモバイル表示における列数を増やしたい

[curry313]

DAWNテーマを使用しています

トップ画面での特集コレクション、

およびコレクションページでの商品表示ですが、

現在モバイルでの表示方法が横２列に固定されているかと思います。

これを変更し、３列、もしくは４列に調整する方法はありませんでしょうか。

コード編集はあまり詳しくなく、指定箇所を指定通りにそのまま編集することがある程度です。

[koji_matsumoto · Accepted solution]

@curry313 様

オンラインストア→テーマ→アクション→コード編集→Sections→featured-collection.liquidを編集することで可能です。

作業としては2点となります。

①29行目こちらのコードを

    <ul id="Slider-{{ section.id }}" 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{% 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">

 変更後として下記に変更。

    <ul id="Slider-{{ section.id }}" class="grid grid--{{ section.settings.products_rows}}-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-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">

そして、

②101行目のコードのあとに、

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

下記コードを追加してください。

    {
      "type": "range",
      "id": "products_rows",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 2,
      "label": "モバイル表示列"
    },

こちらで、添付3枚目のように編集画面で感覚的に調整ができるようになるかと思います。

参考になれば幸いです。

[koji_matsumoto · Accepted solution]

@curry313 様

オンラインストア→テーマ→アクション→コード編集→Sections→main-collection-product-grid.liquid

にて、前回と同じ要領で実装すれば可能です。

37行目　

grid grid--2-col negative-margin product-grid

下記に変更

 grid grid--{{ section.settings.products_rows}}-col negative-margin product-grid

77行目

      "type": "range",
      "id": "products_per_page",
      "min": 8,
      "max": 24,
      "step": 4,
      "default": 16,
      "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
    },

のあとに、

    {
      "type": "range",
      "id": "products_rows",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 2,
      "label": "モバイル表示列"
    },

を追加で可能です。

ベンダーのフォントサイズ、商品タイトルのフォントサイズを編集する方法

テーマ設定のタイポグラフィから見出しと本文の調整は可能です。

こちらも画像添付しておきます。

細かい部分の修正となるとコード調整が必要になるので別の内容となってくる可能性が高いですね。

また別途、掲示板に質問としてアップいただければ回答集まるかと思います！

（私もわかりそうな内容であればそちらの質問からお戻ししますね）

ご参考になりますと幸いです。

[koji_matsumoto · Accepted solution]

@curry313 様

オンラインストア→テーマ→アクション→コード編集→Sections→featured-collection.liquidを編集することで可能です。

作業としては2点となります。

①29行目こちらのコードを

    <ul id="Slider-{{ section.id }}" 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{% 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">

 変更後として下記に変更。

    <ul id="Slider-{{ section.id }}" class="grid grid--{{ section.settings.products_rows}}-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-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">

そして、

②101行目のコードのあとに、

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

下記コードを追加してください。

    {
      "type": "range",
      "id": "products_rows",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 2,
      "label": "モバイル表示列"
    },

こちらで、添付3枚目のように編集画面で感覚的に調整ができるようになるかと思います。

参考になれば幸いです。

[curry313]

ありがとうございます！

無事に３列、４列表示が出来ました！

ちなみに

トップページに表示される特集コレクションには反映されたのですが

コレクションページには反映されませんでした。

こちらは難しいでしょうか。

またベンダーのフォントサイズ、商品タイトルのフォントサイズを編集する方法もご教授いただけると幸いです

[koji_matsumoto · Accepted solution]

@curry313 様

オンラインストア→テーマ→アクション→コード編集→Sections→main-collection-product-grid.liquid

にて、前回と同じ要領で実装すれば可能です。

37行目　

grid grid--2-col negative-margin product-grid

下記に変更

 grid grid--{{ section.settings.products_rows}}-col negative-margin product-grid

77行目

      "type": "range",
      "id": "products_per_page",
      "min": 8,
      "max": 24,
      "step": 4,
      "default": 16,
      "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
    },

のあとに、

    {
      "type": "range",
      "id": "products_rows",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 2,
      "label": "モバイル表示列"
    },

を追加で可能です。

ベンダーのフォントサイズ、商品タイトルのフォントサイズを編集する方法

テーマ設定のタイポグラフィから見出しと本文の調整は可能です。

こちらも画像添付しておきます。

細かい部分の修正となるとコード調整が必要になるので別の内容となってくる可能性が高いですね。

また別途、掲示板に質問としてアップいただければ回答集まるかと思います！

（私もわかりそうな内容であればそちらの質問からお戻ししますね）

ご参考になりますと幸いです。

[curry313]

ありがとうございます！

こちらも無事に解決しました！

フォントサイズの方は別件で質問させていただきます！

[curry313]

こちらで教えていただいた３列表示なのですが、

商品画像が全て若干長方形にクロップされてしまうのですが、

解決策はありませんでしょうか？

[koji_matsumoto · Accepted solution]

@curry313 様

内容確認いたしました。

具体的な事象が把握しきれていない分、半分想像も含めてのご回答となり恐縮ですが、

こちらの左カラム内にある、画像比を正方形に選択することで、正方形表示となるかと思いますが、こちらでご回答となっておりますでしょうか？

もし事象が違うようででしたら、サイトURLやキャプチャいただけると詳細確認できるかと思います。

ご参考になれば幸いです。

[curry313]

ありがとうございます！

仰る通りの設定で無事に解決しました！初歩的なミスにも関わらず丁寧に回答いただきありがとうございます！！