how to separately display products by vendor in shopify liquid?

Question

I'm having an issue with Shopify products in collection page. I want to display products separately in collection pages. I have one collection [all products] and it have more than 200 products. All products have vendor like Red, Green, Yellow and so on. It have more than 10 vendors. If I do manually it work but not expected.

{% paginate collection.products by 50 %}
    {% for product in collection.products %}
        {% assign vendor = product.vendor | downcase | replace: ' ', '_' %}
        {% if vendor == 'green' %}
            <h2>Green</h2>
            {% include 'product-card' %}
        {% elsif vendor == 'red' %}
            <h2>Red</h2>
            {% include 'product-card' %}
        {% elsif vendor == 'yellow' %}
            <h2>Yellow</h2>
            {% include 'product-card' %}
        {% endif %}
    {% endfor %}
{% endpaginate %}

I don't want to set if condition set manually because I don't know how many vendors I have. Vendor H2 tag showing twice because inside of forloop.

How I wanted if vendor is green then show all green vendor products and title shouldn't be twice. Help will be appreciated.

I want like below example of Image

Note: Unable to showing live example because it's in Shopify also Store password protected.

Do you want to show all the 200+ products on a single page or do you want to filter product by vendor based on customer selection and use standard Shopify pagination? — Vladimir
I said I have 200+ products. I don't want to show more than 50 products on page I will add pagination. My issue is I can't filter product by vendor. it shouldn't be customer selection. Example added in question description. — Rahul
How are you going to paginate products bearing in mind they are grouped by vendors as per your screen? — Vladimir
My goal is 50 products per page but product should be separated by vendor. Like above images. Can I show 200+ products without pagination and achieve my goal? — Rahul

Vladimir Vladimir · Accepted Answer · 2020-06-16T12:08:28

Here's how you can display up to 50 products per vendor (no pagination):

{%- for vendor in collection.all_vendors -%}
    <h2>{{ vendor }}</h2>
    {%- assign products = collection.products | where: "vendor", vendor | limit: 1 -%}
    {%- for product in products -%}
        {%- include "product-card" -%}
    {%- endfor -%}
{%- endfor -%}

how to separately display products by vendor in shopify liquid?

1 Answers