How can I adjust the Dawn theme code for more products per row and page?

[sweetstash]

I just switched to the new Dawn theme. For collection pages, I am looking to increase the possible products per row to more than 5. I have one product type that the images are very small and when it blows them up for 5 products wide, it looks terrible. So I want to make a separate collection page template for that product only. I know the code can be changed, but everything I find is an older question, and it seems a lot has changed in the code since 2021. I am far from knowledgeable when it comes to code, but can follow directions when they are current to what my code is. I also want to have more products per page than 24 and cannot figure out how to do that either.

So basically my question is, how do I change the code to have at least 6 products per row (if more is possible… great) and 50 (or more if possible) products per page?

Oh and I would also like my website to be full width and cannot figure that one out either. You know, the one that makes it auto width (I think its like 100% instead of a pixel size?).

Thank you!

[Bilash]

Can You Share Shop Url

[sweetstash]

Sorry… is this what you need?

https://x-stitch-boutique.myshopify.com/

[Bilash]

This is Password Protected You Can Write some custom css for col-grid and as long as you don’t exceed Shopify’s limit of 50 products per page.

[Dan-From-Ryviu]

Hi @sweetstash

You can do that by going to your Online store > Themes > Edit code, open main-collection-product-grid.liquid file and then change values following the image below

[Bilash]

product perpage you can change but column desktop not working because you need write custom css and also required to change in section grid

[sweetstash]

Thank you! I made those changes, and when I went to save I got this error:

Invalid schema: setting with id=“products_per_page” step must evenly divide the range

[Bilash]

change max:50 and step 5

[sweetstash]

Now I get these errors:

• Invalid schema: setting with id=“products_per_page” default must be a step in the range
• Invalid schema: setting with id=“products_per_page” step must evenly divide the range

This is what happened to me before. I found these solutions with older posts and got these errors. I don’t know…

[Dan-From-Ryviu]

Please change values in “min” is 5

[sweetstash]

When I was using Minimal theme my page looked like this

It was still 5 wide, but it did not blow up the images.

Now it looks like this with Dawn

I am fine with the 5 wide… if I can figure out how to make it not blow up the images. But nowhere in the section settings is there an option to use the image size and not expand it that I can find.

[Dan-From-Ryviu]

Please provide password protected so I can help you with this

[ignelis_1]

Hi, @sweetstash

Let me help you with this question. First, to change the products per row, go to Edit Code > main-collection-product-grid.liquid and locate line 203. Then set the “max” number to any that you want. Then, go to base.css and at the bottom of the code add these lines of code:

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

To make this work, in the second line of this code change the number “6” to the number that you want the product amount to fit in one line. In the third and fourth line change the percentage number to the number 100 divided by the number that you want the product amount to fit in one line. In my case it’s 100 divided by 6. Then in the same lines change the 5 / 6 to your numbers, first number (5) being the number of products that you want to fit in line minus 1 (in my case it’s 6 - 1 = 5) and the second number (6) being the number of products that you want to fit in line. Make sure to save the changes on both files and you should get the result that you want.

Next, to set the max product per page number bigger, just go to main-coolection-product-grid.liquid and locate line 194 and set the number that you want. Save the changes and then set the number on your store by Theme Customization.

And last but not least to make the website full with, just go to edit code > base.css and at the bottom of all code just add these lines of code:

.page-width {
 max-width: 100% !important
 width: 100% !important
}

Let me know if you have any other questions

[sweetstash]

I will give this a try thank you!

Also, is there a way to stop Dawn from enlarging product images beyond 100%? Meaning basically leaving an image the original size if it is too small, but still reducing it if it is too large to fit nicely across a row? Also, not blowing it up in the product page.