Adding a view all function to collection pages

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

You can show a maximum of 50 products per page. You can't exceed that number even with a View All function.

To add a View All function to your collection pages, you might need to reach out to a designer. To find one, look for one in our Shopify Experts section.

Your theme will need to be customized. Here are the steps:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under the Templates folder, locate and click on collection.liquid to open it in the online code editor.

  4. Add a View All link to your collection.liquid template, and make that link point to /collections/{{ collection.handle }}?view=all

  5. Save your changes.

  6. Under the Templates folder, click on the Add a new template button.

  7. Create a collection template named collection.all. Your collection.all template will open in the online code editor.

  8. In your new collection.all.liquid template, paginate by 50, and add a link to your paginated collection, using /collections/{{ collection.handle }} as URL.

  9. Save your changes.

Note

The maximum number of products that you can query per page is 50. Because of this, make sure that you don't paginate a collection by more than 50.

Want to discuss this page?

Visit the Shopify Community