Hi,
Now my collection list page has 10 collections listed but they are all 1 collection per 1 row (tabletop view). I want to be able to force these to have 3 or 4 collection per 1 row. But so it wont mess up mobile view.
Tried to read some post about the same issues but could not figure out how to edit my code to make it work.
Can some one help me on this.
Below is my code (page.list-collections.liquid) :
{{ page.title }}
{% capture uses_minimal_framework %}{% include ‘product-loop’ %}{% endcapture %}
{% if uses_minimal_framework contains ‘Liquid error’ %}
{% assign uses_minimal_framework = false %}
{% assign grid_item_width = ‘large–one-quarter large-up–one-quarter medium–one-third medium-up–one-third small–one-half large–col-3 medium–col-4 small–col-6’ %}
{% else %}
{% assign uses_minimal_framework = true %}
{% assign grid_item_width = ‘span3’ %}
{% endif %}
{% assign image_size = ‘large’ %}
{% if linklists[page.handle].links.size > 0 %}
{% assign number_of_links = 0 %}
{% for link in linklists[page.handle].links %}
{% if link.type == ‘collection_link’ %}
{% comment %}
If we have a collection link.
{% endcomment %}
{% assign collection = link.object %}
{% assign number_of_links = number_of_links | plus: 1 %}
{% if uses_minimal_framework %}
{% cycle ‘clear-item’: ‘’, ‘’, ‘’, ‘
{% endif %}
{% elsif link.type == ‘page_link’ %}
{% comment %}
If we have a page link.
{% endcomment %}
{% assign number_of_links = number_of_links | plus: 1 %}
{% assign linked_page = link.object %}
{% assign have_image = false %}
{% comment %}
Does the page contain an image? If so, let’s use it.
{% endcomment %}
{% if linked_page.content contains ‘<img’ %}
{% assign have_image = true %}
{% assign src=linked_page.content | split: ‘src="’ %}
{% assign src=src[1] | split: ‘"’ | first %}
{% capture image_suffix %}_{{ image_size }}.{% endcapture %}
{% assign src=src | replace: ‘_small.’, image_suffix | replace: ‘_compact.’, image_suffix | replace: ‘_medium.’, image_suffix | replace: ‘_large.’, image_suffix | replace: ‘_grande.’, image_suffix %}
{% comment %}
If the page contains no image, and that page features collections, let’s grab the image of the first
collection on it.
{% endcomment %}
{% elsif linklists[linked_page.handle].links.size > 0 and linklists[linked_page.handle].links.first.type == ‘collection_link’ %}
{% assign have_image = true %}
{% assign collection = linklists[linked_page.handle].links.first.object %}
{% if collection.image %}
{% assign src=collection | img_url: image_size %}
{% else %}
{% assign src=collection.products.first | img_url: image_size %}
{% endif %}
{% endif %}
{% if uses_minimal_framework contains ‘Liquid error’ %}
{% assign uses_minimal_framework = false %}
{% assign grid_item_width = ‘large–one-quarter large-up–one-quarter medium–one-third medium-up–one-third small–one-half large–col-3 medium–col-4 small–col-6’ %}
{% else %}
{% assign uses_minimal_framework = true %}
{% assign grid_item_width = ‘span3’ %}
{% endif %}
{% if uses_minimal_framework %}
{% cycle ‘clear-item’: ‘’, ‘’, ‘’, ‘
{% endif %}
{% endif %}
{% endfor %}
{% if number_of_links == 0 %}
There are no links of type Collection in your {{ page.title }} link list. Go ahead and edit your link list to use links that point to collections.
{% endif %}
{% else %}
You do not have a link list with a handle set to {{ page.handle }}, or you do and it's empty. Go ahead and create a link list called {{ page.title }} on your Navigation page and populate that link list with links that point to collections, to see collections listed here. Make sure the link list also has a handle set to {{ page.handle }}.
{% endif %}
kbd { background-color: #FBFBE4; padding: 1px 4px; border-radius: 3px; } { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax (300px, 1fr)); }