Hi, thanks for reaching me. My website is www.shapesofwisdom.com
I have another issue with list-collections pages. When I add collections, they appear in a single column, one collection avobe another. I solved this adding a little piece of code at the end of theme.scss.liquid, one time for each of the pages , to change the number of rows in any specific list-collections page.
This is the code I use to fix rows:
#collection-name .main-content {
max-width: 1270px;
margin: 0px auto;
padding: 0px 20px;
margin-top: 60px;
margin-bottom: auto;
}
#collection-name .main-content .grid-uniform {
display: flex;
flex-wrap: wrap;
margin-left: -30px;
}
#collection-name .main-content .grid-uniform .grid__item {
max-width: 33.33%;
flex: 0 0 33.33%;
}
@media only screen and (max-width: 1024.5px) {
#collection-name .main-content .grid-uniform {
margin-left: -15px;
}
#collection-name .main-content .grid-uniform .grid__item {
max-width: 50%;
flex: 0 0 50%;
}
}
This below is my list-collections template.
{%- assign collection_count = 0 -%}
{%- assign emptyState = true -%}
{% comment %}
Count how many collections we have to show
{% endcomment %}
{%- if section.settings.display_type == ‘all’ -%}
{%- case section.settings.sort -%}
{%- when ‘products_high’ or ‘products_low’ -%}
{%- assign list_collections = collections | sort: ‘all_products_count’ -%}
{%- when ‘date’ or ‘date_reversed’ -%}
{%- assign list_collections = collections | sort: ‘published_at’ -%}
{%- else -%}
{%- assign list_collections = collections -%}
{%- endcase -%}
{% for link in linklists.all-collections.links %}
{% assign collection = link.object %}
{%- unless collection.handle == ‘frontpage’ -%}
{%- assign collection_count = collection_count | plus: 4 -%}
{%- endunless -%}
{%- endfor -%}
{%- else -%}
{%- assign collection_count = section.blocks.size -%}
{%- endif -%}
{%- if collection_count > 0 -%}
{%- assign emptyState = false -%}
{%- endif -%}
{{ 'collections.general.catalog_title' | t }}
{%- if section.settings.display_type == ‘all’ -%}
{%- assign limit = section.settings.collection_per_page -%}
{% paginate collections by limit %}
{%- if section.settings.sort == ‘products_low’ or section.settings.sort == ‘date’ or section.settings.sort == ‘alphabetical’ -%}
{%- for collection in list_collections -%}
{%- if collection_handle == ‘frontpage’ -%}
{%- continue -%}
{%- endif -%}
{%- render ‘collection-grid-item’ with collection as collection, grid_item_width: grid_item_width -%}
{%- endfor -%}
{%- else -%}
{%- for collection in list_collections reversed -%}
{%- if collection_handle == ‘frontpage’ -%}
{%- continue -%}
{%- endif -%}
{%- render ‘collection-grid-item’ with collection as collection, grid_item_width: grid_item_width -%}
{%- endfor -%}
{%- endif -%}
{%- render “pagination” with paginate as paginate -%}
{%- endpaginate -%}
{%- else -%}
{%- for block in section.blocks -%}
{%- capture current -%}{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}
{%- assign collection = collections[block.settings.collection] -%}
{%- render 'collection-grid-item' with collection as collection, block: block, current: current -%}
{%- endfor -%}
{%- endif -%}
{% schema %}
{
“name”: “Collections list page”,
“class”: “list-collections-section”,
“settings”: [
{
“type”: “paragraph”,
“content”: “All of your collections are listed by default. To customize your list, choose ‘Selected’ and add collections.”
},
{
“type”: “radio”,
“id”: “display_type”,
“label”: “Select collections to show”,
“default”: “all”,
“options”: [
{
“value”: “all”,
“label”: “All”
},
{
“value”: “selected”,
“label”: “Selected”
}
]
},
{
“type”: “select”,
“id”: “sort”,
“label”: “Sort collections by:”,
“info”: “Sorting only applies when ‘All’ is selected”,
“default”: “alphabetical”,
“options”: [
{
“value”: “products_high”,
“label”: “Product count, high to low”
},
{
“value”: “products_low”,
“label”: “Product count, low to high”
},
{
“value”: “alphabetical”,
“label”: “Alphabetically, A-Z”
},
{
“value”: “alphabetical_reversed”,
“label”: “Alphabetically, Z-A”
},
{
“value”: “date”,
“label”: “Date, old to new”
},
{
“value”: “date_reversed”,
“label”: “Date, new to old”
}
]
},
{
“type”: “select”,
“id”: “section_height”,
“label”: “Collection height”,
“default”: “medium”,
“options”: [
{
“label”: “Extra Small”,
“value”: “xsmall”
},
{
“label”: “Small”,
“value”: “small”
},
{
“label”: “Medium”,
“value”: “medium”
},
{
“label”: “Large”,
“value”: “large”
},
{
“label”: “Extra Large”,
“value”: “xlarge”
}
]
},
{
“type”: “range”,
“id”: “collection_per_page”,
“label”: “Collection per page”,
“min”: 3,
“max”: 100,
“step”: 1,
“default”: 12,
“info”: “This settings only work, when select collections to show ‘All’ option”
}
],
“blocks”: [
{
“type”: “collection”,
“name”: “Collection”,
“settings”: [
{
“label”: “Collection”,
“id”: “collection”,
“type”: “collection”
}
]
}
]
}
{% endschema %}
Hope everything is clear. Thank you very much for your help.