FROM CACHE - jp_header
解決済

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

curry313
遊覧客
36 1 6

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

 

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

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

 

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

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

 

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

3 件の受理された解決策

koji_matsumoto
Shopify Partner
31 18 29

成功

@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
Shopify Partner
31 18 29

成功

@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
Shopify Partner
31 18 29

成功

@curry313 様

内容確認いたしました。

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

koji_matsumoto_0-1647574380761.png

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

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

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

元の投稿で解決策を見る

7件の返信7

koji_matsumoto
Shopify Partner
31 18 29

成功

@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
遊覧客
36 1 6

ありがとうございます!

無事に3列、4列表示が出来ました!

 

ちなみに

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

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

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

 

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

 

koji_matsumoto
Shopify Partner
31 18 29

成功

@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
遊覧客
36 1 6

ありがとうございます!

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

 

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

curry313
遊覧客
36 1 6

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

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

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

koji_matsumoto
Shopify Partner
31 18 29

成功

@curry313 様

内容確認いたしました。

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

koji_matsumoto_0-1647574380761.png

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

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

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

curry313
遊覧客
36 1 6

ありがとうございます!

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