How to adjust product grid in Dawn theme? Size and number of products in rows

Store Design
1

I’ve been browsing around discussion pages and cannot find a solution or code to edit this.

Here is one product page:
https://yi-gallery-shop.myshopify.com/collections/poster
I would like to have 3 products per row, not 4.

Another issue, I would like to edit the size of the product images… They are very large.
For example, this page that only has a few items:
https://yi-gallery-shop.myshopify.com/collections/exhibition-catalog
How can I edit the image sizes in the product grid?

Thank you for all your help!

2

Hi @gallery_yi ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
	#product-grid .grid__item {
		width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3) !important;
		max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3) !important;
	}
}

Hope it helps!

3

Hey @LitCommerce ,

No it didn’t.
Do I need to remove part of the base.css first?

Nothing about the product grid changed with that code added:
https://yi-gallery-shop.myshopify.com/collections/poster

4

Hi @gallery_yi ,

Can you try moving the code up here?

Screenshot.png
Screenshot.png894×925 39.1 KB

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

5

It worked-- thank you so much for your help :slightly_smiling_face:

1 Like
6

Hi, This helped in creating horizontal spacing. Please help me in creating vertical spacing between 2 products as well. Really Thanks in advance.