View multiple shopify collections in a list.

shopify
スポンサーリンク
language

shopify does not have the ability to list any collection.
However, it is possible to list a collection by using the existing features.

It might be a little tricky, but

  • Register the collection you want to list in the menu.
  • Get the menu in the template and display the collection.

This is the procedure for displaying a collection in a list.

スポンサーリンク

Add the collection you want to display in the list to the menu.

First, add the collections you want to display in the list to the list.

Click the “Add Menu” button in the image below to create a menu.

In the menu

  • Register a collection
  • Register a handle name

Keep a copy of the handle name as it will be used when you create the next page.

Create a page to display the collection list

Create a page where you want to display the list of collections.
For content, enter the handle name of the menu you just created and save it.

The menu will be retrieved by using this handle name as a key in the template, and the collections registered in the menu will be displayed.

Display the collection list.

Add the code to display the list of collections in the liquid.
You can also get the products registered in the collection.

{% comment %} Get the handle name of the menu registered in the page. {% endcomment %}
{%- assign menu_handle = page.content | default: page.title | strip_html | handle -%}
{% comment %} Get menu from handle name. {% endcomment %}
{%- assign menu = linklists[menu_handle] -%}

{%- for link in menu.links -%}
    {%- unless link.type == 'collection_link' -%}
        {%- continue -%}
    {%- endunless -%}

    <div>
        {{ link.title }}
        {%- for product in link.object.products -%}
            {%- include 'product-item', product: product -%}
        {%- endfor -%}

        <a href="{{ link.url }}" class="flex justify-center flex-wrap content-center bg-yellow-400 hover:bg-yellow-300">
            <div class="text-white text-lg">
                View more
            </div>
        </a>
    </div>
{%- endfor -%}

summary

In this article, we will show you how to display a collection as a list using the

  • Register the collection you want to display as a list in the menu.
  • Get the menu in the template and display the collection

In this article, we introduced the following procedure.

In shopify, the ability to list any collection is possible by making full use of the existing functions to list collections.

タイトルとURLをコピーしました