How to change default products listing view


Shopify is a great e-commerce platform to sell products online. Customers can not only see the catalog with products but also order them easily. The way your product listing looks can play a great role, that is why you may want to change the default products listing view from the grid to list. In order to do it, please, follow the steps below.

[notice type=”warning”]NOTE: This tutorial fits only themes which have sections, you can check if your theme has them in Online Store > Themes > Customize. If you have the content inside the Sections tab, this guide fits you.

  1. In your Shopify admin panel navigate to the Online Store > Themes > Actions > Edit code.
  2. In the Sections folder in the left sidebar select the template-collection.liquid file and create a backup of it (copy the code from the file to safe place).
  3. Locate this part of the code, approximately on line 110:

  4. Remove the class=”active” from the first <li> and add it to the second one so it looks like this:

  5. After this locate this part of the code, approximately on line 345:

    and replace it with this one

  6. Save the changes and refresh the page.

You will see the list view instead of the grid view on collections pages.