Not sure how to edit your theme? Read this article first.

Open your "product in collection" template

  • Open your theme editor.
  • Next, find the template used to display a product in a collection in the Templates, Sections or Snippets folder. You're looking for the file that contains the markup that displays a card of the product with its price on the collection page.
  • The filename is different on each theme. Some themes use "product-card.liquid", others use "product-grid.liquid", "product-listing.liquid" or "product-block.liquid", but there are many other possibilities.
  • If you're not sure which file contains the liquid use the procedure described below to find it.

Collection template

First, find your collection template:

Collection section template

Open that template and check the contents, if it points to a section named collection: open that section instead.

Find a "for" loop

Here's where it gets a bit tricky. Every theme has different code in the collection (section) template.

Look for the word "for" in the code. Put your mousepointer in the code and click CTRL+F to search the code.

There will be many instances of the word "for". We're looking for a for loop that loops over the collection products. It will look something like this:

Find the "product in collection" template

In this "for loop" section, which starts with {% for ... %} and ends in {% endfor %}, we're looking for an include tag that points to the "product in collection" template we need to modify. It will be different for every theme, but it will look something like this:

In this example the name of the file we're looking for is "product-card-grid.liquid".

Take a backup

  • Copy the content of the template before you make any changes. Create a separate file and paste the content. Repeat for every file you plan to change. Better safe than sorry!
Did this answer your question?