Aterlier theme - how to display 4 product cards on collection

Store Design

Topic summary

Main issue: On the Shopify Atelier theme, the user wants 4 product cards per row on desktop collection pages but currently sees 5 and cannot find a setting to control the count.

Context: “Product cards” are the individual product tiles on collection (product listing) pages. Atelier is a Shopify theme; the thread is tagged “css,” implying a potential style/CSS-based adjustment.

Details: The user reports no theme option to set the number of items per row and provides a screenshot illustrating the current 5-per-row layout.

Status: No solutions or actions have been shared yet; the request is open with no resolution.

Attachments: A screenshot is included and appears central to understanding the current grid layout and desired change.

Summarized with AI on March 2. AI used: gpt-5.
1

Hey, I’m using the Atelier theme. How can I display 4 product cards per row on collection pages for desktop? Currently its being displayed as 5 rows and there is no option to set amount of rows.

Thank you in advance.

Screenshot 2026-03-02 at 02.18.36
Screenshot 2026-03-02 at 02.18.361920×824 98.2 KB

2 Likes
2

Hi @runwayfashion

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:

1 Like
4

You can try to add this code to Custom CSS in Theme settings and check again

@media (min-width: 750px) {
    . product-grid:is(.product-grid--grid) {
        --product-grid-columns-desktop: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }
}

Custom CSS in Theme setings
Custom CSS in Theme setings1920×1738 260 KB

Best regards,

Dan from Ryviu: Product Reviews App

5

@runwayfashion To display four products per row, simply set your card size to Large. This adjustment will automatically update your store layout to the four-column view.

image
image355×293 10.9 KB

1 Like
6

Hi @runwayfashion ,

Did you check on theme setting for collection page or the collection section yet?
If you not check yet, you should check on setting part change number items show on row. If the theme not support you can change it by css, to easy to check you can leave the url here to help you check.

7

Hi, url: RUNWAY

8

HI, tried this and didnt work

9

Hi, Url: https://runway-official.com/

1 Like
10

Hi, setting it to large makes the product rows display as 3 not 4?

11

My bad, it has a space after “.” in code, so it did not work. Please updatethe code to this and check again

@media (min-width: 750px) {
    .product-grid:is(.product-grid--grid) {
        --product-grid-columns-desktop: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }
}
Best regards,

Dan from Ryviu: Product Reviews App

1 Like
12

Hi there! I actually just tested this by installing the Atelier theme on my own store. After setting the card size to Large, the layout correctly updated to 4 products per row.

Could you double-check your display settings or try refreshing your cache? It should be showing four columns with that specific theme configuration.

image
image1567×692 135 KB

13

Hi, thank you for your code, had to adjust it a little due to my theme to make it display 4 per row on desktop. Thank you.

@media (min-width: 750px) {
.product-grid.product-grid–grid {
–product-grid-columns-desktop: repeat(4, 1fr) !important;
}
}

1 Like
14

Hi, im running into an issue. I noticed It does show 4 columns, but it completely overrides my grid layout control in the theme. Now when I try to change the number of columns using the layout switcher, it stays stuck at 4.

Do you know a cleaner way to set 4 as the default without breaking the layout control?

CSS:

@media (min-width: 750px) {
.product-grid.product-grid–grid {
–product-grid-columns-desktop: repeat(4, 1fr) !important;
}
}