How to create a product list on a custom collection page?

Technical Q&A
1

Hi everyone, I am trying to create a page that lists all the products in a collection. It seems like a simple thing to do but I wasn’t able to get it working with anything I did. I tried going through the docs and the default Shopify templates to get it working but to no avail.

Any help would be appreciated, thanks!

2

Hey, @DevBijan !

When you create a manual collection or an automated collection in the Products > Collections area in your admin, a page is automatically created where the customers can access and browse all the products in the collection. You can see and preview the page by clicking View at the top of the collection page within the admin, as illustrated by the screenshot from a test store below.

To make the page visible on your website, you’ll need to add it to your menu by linking the collection to a menu item. You can do this by following the steps below.

  1. In your Shopify admin, go to Online Store > Navigation.
  2. Click the title of the menu where you would like the collection to appear.
  3. Click Add menu item to create a menu item where you can link your collection.
  4. On the right sidebar, enter the name of the collection.
  5. Click the box under Link and select Collections.
  6. Click the collection you would like to link.
  7. Click Add.
  8. Click Save menu.

Besides adding it to your menu, you can also add the collection to a section on your homepage to make it accessible. The exact steps vary per theme, but they are similar. Using the Debut theme as an example, you can follow the steps below to add a collection to a section on your homepage.

  1. In your Shopify admin, go to Online Store > Themes.
  2. Click Customize beside Debut or any theme you’re working on.
  3. On the left sidebar, click Add section.
  4. You can select Featured collection or Collection list to add the collection.
  5. On the right sidebar, click Select collection.
  6. Click the collection you want to link, click Select.
  7. Click Save.

While we’re on the topic of collections, make sure you optimize them so they have the ability to boost your sales. It may not seem like it but how you set up collections can significantly help your business in the long run. When collections are easily accessible and have the elements that can push customers to purchase your products, they can raise the number of sales in your store. To know how you can configure your collections to your advantage, feel free to read this article that shares best practices on setting up collections to drive traffic and boost your store’s credibility.

3

Hi Summer, I appreciate the help however this isn’t exactly what I’m looking for. My client is selling in-person classes and what I’m trying to do is make the class a ‘product’ with a Class Date metafield then have a page where I list these classes in order by date.

I figured the way to do this was to add them all to a collection and render them out on a new page in order of their class date. The default collection page created doesn’t have that option (as far as I see) so I am trying to create it myself.

I was going for something like this where ‘class_date’ is the metafield and ‘all_classes’ is the name of the collection

{% for product in collection.all_classes%}
    {{product.title}}
    {{class_date}}
{% endfor %}

Or is there a way where I can access products or a collection with javascript and liquid?

Thank you!

4

Small update:

I am currently using the ‘main-collection-product-grid.liquid’ file in Dawn to develop until I can make a custom page. I was able to display my class dates using the metafield, however the formatting is off.

{{ product.metafields.my_fields.class_date }} gives the format 2021-10-20T01:00:00Z

When I try and add the formating {{ product.metafields.my_fields.class_date | date: “%a %b %e %T %Y” }}nothing actually changes. None of the formatting code does anything in any way I configure it. Am I writing the code wrong or is it something else?

Thanks!