Taking Control of your Catalog Page

This article will cover, all in one place, everything you have always wanted to know about the Catalog Page

The page shown at /collections/all is referred to as the catalog page. All new Shopify stores include a link in its Main Menu a link called 'Catalog' that points to that page.

About the catalog page

Your catalog page is found at /collections/all in your online store. It is an automated collection created by Shopify to exist by default in your store. It will display all products in your shop that are not hidden, including products that are out of stock.

Reorder products on your catalog page

To be able to sort the products shown at /collections/all, you will need to create a collection that uses the Permalink/Handle all to replace the automated collection Shopify created for that URL.

Here are the steps:

  1. From your Shopify admin, click Products:

    Products

  2. Click Collections:

    Products collections

  3. Add a collection with title 'All' and which you set to Automatically select products based on conditions.

  4. Set the product condition 'Product price is greater than 0'. Then click save.

    Smart collection 2

    Here's your chance to hide products that are out of stock: you can also add — or not, as you wish — the condition: 'Inventory stock is greater than 0'.

  5. On that same page — the Admin page of your new collection, scroll down to the Products section and under the heading Sort by collection, select 'Manually' from the drop-down. Then reorder the products using the small drag and drop handles. You can also use automatic sorting criteria such as 'By Best Selling'. The order of the products shown at /collections/all should reflect your changes.

  6. If you do not like the title 'All' that shows up on the /collections/all page, and only after having completed steps 1-2-3, go back to your 'All' collection admin page, click on the Edit link for it, and change the title to whatever you like better, then save.

Reminder

Make sure that the Handle of your collection is set to "all".

Smart collection 3

Add text to your catalog page

If you have completed all steps presented in the last section, you now have a regular collection, which you can add a description to.

Change the title of your catalog page

If you have completed all steps presented under How do I reorder products shown at /collections/all, you will have been able to change your collection title to whatever you want.

If you want your collection to not display a title, there are a couple ways to hide it.

Edit your collection.liquid template

Find this code:

<h1>{{ collection.title }}</h1>

And replace it with this:

{% unless collection.handle == 'all' %}<h1>{{ collection.title }}</h1>{% endunless %}

Add HTML to the title field

Only after you have completed steps 1-4 under How do I reorder products shown at /collections/all, change the title of your collection to this:

<span class="hide-this">All</span>

In your stylesheet, add this CSS rule:

.hide-this {
   display:none;
}

Make your catalog page your store home page

  1. Back-up your theme by downloading it from the Themes page and clicking export:

    Smart collection 4

  2. Go to collection.liquid, select the entire template with cmd + a on a Mac or ctrl + a on a PC.

  3. Copy it to your clipboard with cmd + c on a Mac or ctrl + c on a PC.

  4. Go to the index.liquid template, select the entire template with cmd + a on a Mac or ctrl + a on a PC

  5. Paste your collection.liquid with cmd + v on a Mac or ctrl + v on a PC

  6. At the top of your amended index.liquid template, add this one line of code:

   {% assign collection = collections.all %}
    
  1. Now go to your Collections page in your admin and do steps 1-4 of How do I reorder products shown at /collections/all as detailed at the beginning of this article.

  2. Save your work and go to your homepage. You should see there the same thing as you see at collections/all.

There is an added bonus: you now have a regular collection you can sort and add a description as well.

Ready to put what you've learned into action?

Build an online store with Shopify. Try it free.

Experience the future of retail now.

Shopify Point of Sale. Try it free.