List-collections.liquid - Revision history

Shawn: /* Display a product image if a collection image does not exist */

2021-03-16T21:42:49Z

Display a product image if a collection image does not exist

Shawn: /* Display a product image if a collection image does not exist */

2021-03-16T21:42:24Z

Display a product image if a collection image does not exist

Shawn: /* Re-ordering the collections */

2021-03-16T21:42:00Z

Re-ordering the collections

Shawn at 21:40, 16 March 2021

2021-03-16T21:40:11Z

Shawn at 21:39, 16 March 2021

2021-03-16T21:39:40Z

Shawn: Created page with "The list-collections.liquid template is used to render a page where all of the collections in the store are listed. This template can be accessed by going to the /collecti..."

2021-03-16T21:37:36Z

Created page with "The list-collections.liquid template is used to render a page where all of the collections in the store are listed. This template can be accessed by going to the /collecti..."

New page

The list-collections.liquid template is used to render a page where all of the [[collections]] in the store are listed. This template can be accessed by going to the /collections URL of the store.

==Re-ordering the collections==
When you loop through the collections array, the collections will be output in alphabetical order by default.
<pre>
{% for collection in collections %}

{% endfor %}
</pre>
There may be instances where you want to re-order the collections listed or pick and choose which collections to display. In such cases, you can load the collections from a menu instead.

==Display a product image if a collection image does not exist==
If a collection does not have a collection image, it is a good practice to show a product image instead. The example below is an if statement that loads the featured image of the first product in the collection if the collection does not have its own collection image.

<pre>
{% for collection in collections %}
{% if collection.image %}
<img src="{{ collection | img_url: '450x450' }}" alt="{{ collection.image.alt }}" />
{% else %}
<img src="{{ collection.products.first | img_url: '450x450' }}" alt="{{ collection.title | escape }}" />
{% endif %}
{% endfor %}
</pre>

@@ Line 10: / Line 10: @@
 There may be instances where you want to re-order the collections listed or pick and choose which collections to display. In such cases, you can load the collections from a menu instead.  This is a theme dependent tweak, so may not be supported by all themes.
-. Create a menu called "Collections"
+# Create a menu called "Collections"
-. Add the collections you would like to feature and re-order your menu as needed
+# Add the collections you would like to feature to the menu, and re-order your menu as needed
 ==Display a product image if a collection image does not exist==

@@ Line 17: / Line 17: @@
 <pre>
-{% for collection in collections %}
+{% for collection in shop.collections %}
    {% if collection.image %}
      <img src="{{ collection | img_url: '450x450' }}" alt="{{ collection.image.alt }}" />

@@ Line 18: / Line 18: @@
 <pre>
 {% for collection in collections %}
-      {% if collection.image %}
+  {% if collection.image %}
-        <img src="{{ collection | img_url: '450x450' }}" alt="{{ collection.image.alt }}" />
+    <img src="{{ collection | img_url: '450x450' }}" alt="{{ collection.image.alt }}" />
-      {% else %}
+  {% else %}
-        <img src="{{ collection.products.first | img_url: '450x450' }}" alt="{{ collection.title | escape  }}" />
+    <img src="{{ collection.products.first | img_url: '450x450' }}" alt="{{ collection.title | escape  }}" />
-      {% endif %}
+  {% endif %}
 {% endfor %}
 </pre>

@@ Line 4: / Line 4: @@
 When you loop through the collections array, the collections will be output in alphabetical order by default.
 <pre>
-{% for collection in collections %}
+{% for collection in shop.collections %}
-    <!-- Collection information here -->
+  <!-- Collection information here -->
 {% endfor %}
 </pre>