Need to increase "number of columns on desktop", but anything over 6 makes the product photos too large

Need to increase “number of columns on desktop”, but anything over 6 makes the product photos too large. Any ideas?

Hi @Pure_Flight

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

URL has been sent to you via DM. I guess my goal is to have it display 8 items for each Featured Collection.

If product cards grow large, then something wrong with your code.

Generally, theme has code like this:

You can override it with CSS code like this to define product card widths:

@media (min-width:1280px) {
  .collection slider-component .grid__item {
    width: calc(12.25% - var(--grid-desktop-horizontal-spacing) * 7 / 8);
  }
}

The media query makes it happen on a slightly wider screens – too much wrapping in product titles otherwise…

Before/After:


Hi @Pure_Flight

Most themes are limited to six because the product card width is dynamic and scales with the grid. Rather, you can shrink the product card image ratio or padding via the section settings or theme code. You can reduce the container max width or manipulate the size of the card image in CSS so you can fit more columns without making the product photos bigger.