How to make collection images smaller

Hi all,

I am using the Palo Alto theme and we have many collections on our website.

Some collections contain a lot of products and the collection image size is quite large.

Is there a way to reduce the product image size in the collections? As you can see in the screenshot of a collection below, the images are quite large. I’d like to keep the image aspect ratio to 1.1 as all images are square.

Website url is https://www.coffee.prestigerepairs.com.au/collections/on-sale

Even if we could get five products per row?

Any help would be greatly appreciated. Thank you in advance!

If you increase the products per row to 5 it should make the product cards smaller.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag


Result:

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Hello @MollieHammond
To showcase only 5 products in the product grid, please adhere to the steps below:
Access theme settings > Collection Page > Product-grid (AN cards) following the screenshot provided. Subsequently, modify the number of columns to be displayed on desktop to 5. This adjustment will result in smaller images and the ability to showcase 5 products.

Feel free to ask if you have any further queries. If you found this solution helpful, kindly consider liking and accepting it.
S.P

  • Here is the solution for you @MollieHammond
  • Please follow these steps:

  • Then find the theme .css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.collection__inner .grid {
grid-template-columns: repeat(5, 1fr) !important;
    gap: 10px !important;
}
  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

There isn’t an option to do so?

This worked perfectly! Thank you so so much! It’s been driving me crazy for months XD