Modify the /collections page for the Craft theme

Store Design

Topic summary

Goal: Customize the /collections page in Shopify’s Craft theme to avoid showing all collections by default and instead control which collections appear.

Attempts and issues:

  • Official docs and a tutorial to hide the page didn’t apply cleanly to Craft; syntax and structure differ (Liquid section vs. JSON template setup).
  • A provided solution replaced main-list-collections.liquid to render a menu-defined collection list (link_list setting “all_collections”) with sorting and image options. However, the OP found section.settings.all_collections was null because this setting wasn’t present in the list-collections.json template.

Workaround implemented:

  • The OP kept the theme’s default loop over collections and hard-coded an “ignore list” of collection handles to hide specific collections. New collections still appear automatically unless added to the ignore list.

Outcomes:

  • The OP’s approach resolved their needs without major theme changes. Another participant reported the shared solution helped them display a specific menu of collections.

Status and notes:

  • No built-in Craft setting was identified; custom coding or correct section/template configuration is required for menu-driven lists.
  • Code snippets are central to understanding the solution.
Summarized with AI on January 29. AI used: gpt-5.
1

Hi guys, I am using the Craft theme and I can’t seem to modify the default collections list.

What I’ve tried :

I checked out this page talking about how to modify the main-list-collections.liquid page but the syntax is very different for the Craft theme.

https://shopify.dev/themes/architecture/templates/list-collections

I’ve also checked out the following page when it comes to hiding the page all together but despite adding it to the top of the themes.liquid did nothing.

https://www.huratips.com/tech-tips/how-to-hide-collections-all-page-in-shopify.html

I would prefer to have the ability to modify the list myself by adding a new menu option like the guy does in the following video.
https://youtu.be/7-FJZIMHxjc

Alas, my theme doesn’t seem to be comptable with these methods.

Any ideas? It’s odd that this functionality is not already in place. Showing all collections by default seems to troublesome.

Thanks for your help,

Chris

lapinbleu007_0-1661807363865.png
lapinbleu007_0-1661807363865.png1265×716 105 KB

2 Likes
2

@lapinbleu007 Since the theme you are using doesn’t support such functionality it will require to do some custom coding. We can do that for you, for which we will require collaborator access to the backend of your store. If you are willing to do that you can direct message us here and we can fix it for you.

3

Hi @lapinbleu007 ,

As far as I understand, you are trying to create a custom collection list.

You can replace the code inside the main-list-collections.liquid with the code below. Make sure to duplicate your theme prior to doing this.

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}

  # {{ section.settings.title | escape }}
  {%- liquid
    case section.settings.sort
      when 'products_high' or 'products_low'
        assign collections = collections | sort: 'all_products_count'
      when 'date' or 'date_reversed'
        assign collections = collections | sort: 'published_at'
    endcase

    if section.settings.sort == 'products_high' or section.settings.sort == 'date_reversed' or section.settings.sort == 'alphabetical_reversed'
      assign collections = collections | reverse
    endif
  -%}

  
     {% for link in section.settings.all_collections.links %}
    {% assign collection = link.object %}
      - {% render 'card-collection', card_collection: collection, media_aspect_ratio: section.settings.image_ratio, columns: 3 %}
      
    {%- endfor -%}
  

{% schema %}
{
  "name": "t:sections.main-list-collections.name",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.main-list-collections.settings.title.label",
      "default": "Collections"
    },
      {
      "type": "link_list",
      "id": "all_collections",
      "default": "main-menu",
      "label": "t:sections.header.settings.menu.label"
    },
    {
      "type": "select",
      "id": "sort",
      "options": [
        {
          "value": "alphabetical",
          "label": "t:sections.main-list-collections.settings.sort.options__1.label"
        },
        {
          "value": "alphabetical_reversed",
          "label": "t:sections.main-list-collections.settings.sort.options__2.label"
        },
        {
          "value": "date_reversed",
          "label": "t:sections.main-list-collections.settings.sort.options__3.label"
        },
        {
          "value": "date",
          "label": "t:sections.main-list-collections.settings.sort.options__4.label"
        },
        {
          "value": "products_high",
          "label": "t:sections.main-list-collections.settings.sort.options__5.label"
        },
        {
          "value": "products_low",
          "label": "t:sections.main-list-collections.settings.sort.options__6.label"
        }
      ],
      "default": "alphabetical",
      "label": "t:sections.main-list-collections.settings.sort.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-list-collections.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.main-list-collections.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.main-list-collections.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.main-list-collections.settings.image_ratio.label",
      "info": "t:sections.main-list-collections.settings.image_ratio.info"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 3,
      "label": "t:sections.main-list-collections.settings.columns_desktop.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-list-collections.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.main-list-collections.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.main-list-collections.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "2",
      "label": "t:sections.main-list-collections.settings.columns_mobile.label"
    }
  ]
}
{% endschema %}

You can see the full instructions here

4

@lapinbleu007

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

5

Hi, thanks for your help but I found out after debugging, the following code didn’t work for me because the object section.settings.all_collections was null. It did not appear in the list-collections.json file

{% for link in section.settings.all_collections.links %} {% assign collection = link.object %}

In order to resolve my problem, I just hard coded the handles for the collections I don’t to be rendered. This way, any new collections are shown properly and I don’t have to do much. If by chance I happen to add another collection, I’ll just add it to the “ignored” list. This solution also allows me to use the existing functionality of the theme without modifying too much. I hope this can help someone else.

{%- for collection in collections -%}

    
       {% case collection.handle %}     
        {% when "other-catalogs", "our-favorites", "men","bags", "women", "prints", "unisex" %}
            
        {% else %}
           - {% render 'card-collection', card_collection: collection, media_aspect_ratio: section.settings.image_ratio, columns: 3 %}
            

      {% endcase %}
     
    {%- endfor -%}
6

Hi, thanks for your help but I figured out a way to make it work for me. Thanks anyway.

1 Like
7

Thank you for posting this! It solved the issue I was having trying to display a specific menu of collections instead of the entire list my store has.