How to customize Dawn theme to make images the same size (square) on each of the collection pages

Store Design
, ,
1

I have searched for solutions to customize Dawn theme to make images the same size (square) on each of the collection pages but have not found the soltion yet.

www.nice2cu.com has a number of collections that are linked from the navigation at the top.

For example https://nice2cu.com/collections/clubwear shows the images (product cards?) as different sized images.

I have already managed to tweak the home page of Dawn theme to display images that are all square and aligned but I have not discovered how to do this for the individual collections.

Please help :slightly_smiling_face:

Nice2cu

2

Hi @Nice2CU ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-card.css->paste below code at the bottom of the file:

.product-card-wrapper .card__inner {
    --ratio-percent: 100% !important;
}

PageFlyRichard_0-1678281801002.png
PageFlyRichard_0-1678281801002.png1281×811 307 KB

I hope it would help you
Best regards,

Richard | PageFly

3

Awesome - Thank You Page-Fly Richard - You Are My Hero Today!

4

Thank you for this solution!

5

this worked for me! thank you so much!

6

I tried to use this solution for the dawn theme but it did not work, please advise. here is my store: https://b720b7-2.myshopify.com/?_ab=0&_fd=0&_sc=1

7

Did you ever find a solution? Your images appear to be square and in line with each other. I can’t get the code to work for me on the dawn theme.

8

I just tried this and it worked. I am so happy since I am a work in constant progress. Thank You.