minimalテーマのコレクションリストについて

camellia1
観光客
4 0 1

テーマ「minimal 」を使用しています。
トップページのセクション「コレクションリスト」ですが、1行あたりのコレクション数を8にしたいです。また、その行数を10程度に増やしたいです。どなたか助けてください。

 

 

I am using the theme "minimal". In the section "Collection list" on the top page, I want to set the number per line to 8. I also want to have 10 rows. Please help someone.

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1077 248 421

通常、無料テーマはセクションに対応しているので、テーマ>カスタマイズ>コレクションに進むと、商品数や行数をGUI上で変えれるかと思います。

Technical Partner Manager, Japan
0 件の「いいね!」
camellia1
観光客
4 0 1

ありがとうございます。
minimalのテーマでは、該当のセクションは

一行に5個まで、そして行数は変えられないのです。

 

なので困っております。。

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1077 248 421

TOPに表示される、featured collectionであれば、変更できました。

 

1.  section/featured-collection.liquidをコード編集で開く

2. "id": "num_per_row" と、 "id": "num_rows", の "max":  の値を希望するものに変える(ここが1行の表示数と最大行数の設定を実現している箇所です)。

3. 保存して、テーマのカスタマイズでセクションにいき、featured collectionを表示すると、添付のようにスライドバーで8と10が選べるようになるので設定して保存します。

Screen Shot 2020-05-25 at 8.55.02 PM.png

ただし、これだけだと逆に何も表示されなくなってしまいます。理由は以下のように、Minimalは、表示数で場合分けしてスタイルを変更しているので、元々ある数値以外は条件になくて、表示処理自体実行されなくなります。

{% case products_per_row %}
    {% when 3 %}
      {% assign grid_item_width = 'medium--one-third post-large--one-third' %}
      {%- assign product_width = 410 -%}
    {% when 4 %}
      {% assign grid_item_width = 'medium-down--one-half post-large--one-quarter' %}
      {%- assign product_width = 335 -%}
    {% when 5 %}
      {% assign grid_item_width = 'medium-down--one-half post-large--one-fifth' %}
      {%- assign product_width = 335 -%}
   
  {% endcase %}

ですので、とりあえずその他としてelseを追加してみます。

{% case products_per_row %}
    {% when 3 %}
      {% assign grid_item_width = 'medium--one-third post-large--one-third' %}
      {%- assign product_width = 410 -%}
    {% when 4 %}
      {% assign grid_item_width = 'medium-down--one-half post-large--one-quarter' %}
      {%- assign product_width = 335 -%}
    {% when 5 %}
      {% assign grid_item_width = 'medium-down--one-half post-large--one-fifth' %}
      {%- assign product_width = 335 -%}
    {% else %}
      {% assign grid_item_width = 'medium-down--one-half post-large--one-tenth' %}
      {%- assign product_width = 100 -%}
  {% endcase %}

結果として、添付のように1行に元々設定可能な数以上表示されました。
Screen Shot 2020-05-25 at 8.57.25 PM.png


ただし、テーマのコードを見る限り、Minimalは、表示数がデザインに深く影響する設計のようですので、現状の最大値に意味があると思います。

ご希望の数を表示したい場合は、素直にその数を対応している別のテーマを使われた方が無難だと思います。

 

 

Technical Partner Manager, Japan
0 件の「いいね!」
camellia1
観光客
4 0 1

ご丁寧にありがとうございます!!!
確かに影響が怖いので、他のテーマを探してみます。

でも非常に助かりました!

感謝いたします!