Downの特集コレクションの表示商品数の上限を増やすコード

ShopifyのDawnテーマにある「特集コレクション」featured-collection.liquidはデフォルトの状態だと12件、コードを触っても最大50件までしかコレクションのアイテムを表示させることができません。 今回は特集コレクションを応用して、全ての商品を50件以上表示させてみました。

featured-collection.liquidをみると54行目から69行目に以下のコードがあるはずです。

	{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
	  <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider %} slider__slide{% endif %}">
	    {% render 'card-product',
	      card_product: product,
	      media_aspect_ratio: section.settings.image_ratio,
	      show_secondary_image: section.settings.show_secondary_image,
	      show_vendor: section.settings.show_vendor,
	      show_rating: section.settings.show_rating
	    %}
	  </li>
	{%- else -%}
	  {%- for i in (1..4) -%}
	    <li class="grid__item">
	      {% render 'card-product', show_vendor: section.settings.show_vendor %}
	    </li>
	  {%- endfor -%}
	{%- endfor -%}

paginationと変数を追加し、for文を以下のようにカスタマイズします。

        {% assign count = 0 %}
        {% assign products = collections.all.products %}
        {% paginate collections.all.products by section.settings.products_to_show  %}
          {% assign sorted_products = collections.all.products | sort: 'created_at' | reverse %}
          {% for product in sorted_products %}
            {% assign count = count | plus:1 %}
            <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="count-{{ count }} grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
              {% render 'card-product',
                card_product: product,
                media_aspect_ratio: section.settings.image_ratio,
                show_secondary_image: section.settings.show_secondary_image,
                show_vendor: section.settings.show_vendor,
                show_rating: section.settings.show_rating,
                show_quick_add: section.settings.enable_quick_add,
                section_id: section.id
              %}
            </li>
          {%- else -%}
            {%- for i in (1..4) -%}
              <li class="grid__item">
                {% render 'card-product', show_vendor: section.settings.show_vendor %}
              </li>
            {%- endfor -%}
          {%- endfor -%}
        {% endpaginate %}

このようにすると動的にコレクションを設定できなくなりますが、静的ではありますがすべての商品を情報を取得できます。

そしてファイル下部にある以下のschemaを探し、動的に設定するコレクション設定を削除します。

    {
      "type": "collection",
      "id": "collection",
      "label": "t:sections.featured-collection.settings.collection.label"
    },
	

表示数量を200件に設定しstepも2にします。

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

以上で、特集コレクションをカスタマイズして、TOPページで50件以上の商品を新着順で表示させるコードでした。
collectionにハンドル設定できるようにschemeを追加すればクライアントも使いやすいパーツになると思います。