How to build pages show all the product types as link that will list all products of the type?

Store Design

Topic summary

Goal: create a page that lists all product types, each linking to a page showing products of that type.

Implementation shared:

  • Use Liquid with collection.all_types and link_to_type:
    {% for product_type in collection.all_types %} {{ product_type | link_to_type }} {% endfor %}
  • OS 2.0 (e.g., Dawn): place code in a Custom Liquid block or a dedicated section via the theme editor.
  • Vintage themes: create an alternate page template and add the code in the theme editor. Documentation links were provided.

Follow-ups and open questions:

  • Dawn/OS 2.0 routing: after creating templates/page.catalog.liquid, how to assign it to a URL like /catalog is unclear; guidance not yet provided.
  • Styling: links currently render inline as a single paragraph; request for making each link appear on its own line. A screenshot was shared to illustrate the issue.

Status: partial solution given (Liquid and placement). Routing to a specific URL and link formatting remain unresolved; no final decision or steps confirmed.

Summarized with AI on December 28. AI used: gpt-5.
1

I am thinking of have:

A page that list all the product types, each product type will link toward a search result page list all the products under that product type.

Can I have a step to step guide to setup such page?

Thank you

2

Uses collection.all_types property

https://shopify.dev/api/liquid/objects/collection#collection-all_types

{% for product_type in collection.all_types %}
  {{ product_type | link_to_type }}
{% endfor %}

For OS2.0 themes place the code either in a custom-liquid block or a section in the visual theme editors settings.

For vintage themes create an alternate template for pages and use the code in that file in the themes file code editor.

https://shopify.dev/themes/architecture/templates#alternate-templates

https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates#create-a-new-template

1 Like
3

@PaulNewton Would you have more instruction with OS2.0? I am usin Dawn theme.

I created a templates/page.catalog.liquid file under admin/themes/

After I put your instructed code in it, how to make this liquid template that connected to a route? let say if I want the route to be XXX.com - XXX Sex Videos - Free ■■■■ Movies

4

Sorry to bring back old post, your code worked! However, the links are next to each other and the output looks like a paragraph made up of links. What do I need to change in the code, so that each link will show in a row of its own ? See screen shot below for output

image.png
image.png1288×198 25.1 KB