Taking control of the collections listing page

From Shopify Wiki

Jump to: navigation, search

So, you don't like what you see at the URLs /collections and /products — the same is shown at both URLs and you like neither. How do you change this? The correct answer for most needs is to use CSS. CSS is a powerful tool that can transform the look and feel - and layout - of any web page.

What if CSS is not enough? Where is the template for the /collections page? Can we generate our own markup for /collections and /products? How can we add images? How can we prevent certain collections like 'Frontpage' from appearing in the list? This article will answer those questions.

Contents

The template used for /collections and /products is list-collections

However, you can't add a list-collection.liquid file to your theme, upload that theme to your shop, and expect your template to be picked up by the theming engine. Nor can you create this template on your Theme Editor page. You can, however, override the template inside theme.liquid, using a technique that will come quite close to using your own list-collections template.

Why not let this template be like eg. collection.liquid?

A standard Shopify theme already comes with a handful of Liquid templates. The ability we have now to create alternate templates, and snippets, will guard Shopify themes from getting overbloated over time.

You can use the snippet feature to control the markup of your collection listing shown at /collections and /products.

Create a new snippet

Go to Theme → Template Editor. Create a new snippet and call it 'collection-listing'.

Image:/upload/6/6a/Creating a collection listing snippet.png

In the snippet, generate your own collections listing

In your snippet, use the global 'collections' object to generate your own collection listing. To get you started, you can use this code hosted on github: http://github.com/carolineschnapp/collection-listing/blob/master/collection-listing.html.

As an alternative, if you want your collections to be listed in a particular order (say, alphabetical), and you want better control over what collections are listed, use this code: http://gist.github.com/523455. That code snippet will not iterate over all collections in your shop. It will use the collections you will have listed in a link list. You will create a link list called "Featured Collections" on the Navigation page in your admin and you will add to it only the collections that you want and order those collections as you wish them to appear.

Time to edit theme.liquid

Still on the Template Editor page, click on the 'theme' link under Layouts. Look for this code:

{{ content_for_layout }}

Replace it with this:

{% if template == 'list-collections' %}
{% include 'collection-listing' %}
{% else %}
{{ content_for_layout }}
{% endif %}

Save.

Visit the page at store.myshopify.com/collections

What you see at store.myshopify.com/collections and store.myshopify.com/products, in the main content area, is now entirely controlled by your collection-listing Liquid snippet.

Related articles