Atelier theme - Change background for product cards on collection page

Store Design
1

Hi everyone,

I’m customizing my collection pages on the Atelier theme. Most of my products currently have transparent backgrounds, which is fine.

What I want is not the full collection page background, but only for each product card on the collection page:

The product image, title, and price area should have a background of #f3f3f3

Everything else on the card and page should stay unchanged

Has anyone done this before? Any guidance or working CSS would be really appreciated!

Runway

example:

Screenshot 2026-03-05 at 15.03.49
Screenshot 2026-03-05 at 15.03.491920×1077 190 KB

Thanks!

2

Hi Runway,

Are you looking to make the product cards on the collection page appear similar to the layout shown in the screenshot below — where the product image, title, and price area have a background of #f3f3f3, while the rest of the page remains unchanged?

If yes, you can achieve this using the following CSS:

@media screen and (min-width: 750px) {
    .product-grid {
        --product-grid-gap: 10px;
    }
}

.group-block.group-block--height-fill.group-block--width-fill.border-style.spacing-style.size-style {
    background: #f3f3f3;
    padding-bottom: 20px;
}

You can add this CSS to your theme’s base.css or theme.css file.

I’ve also attached a screenshot below for reference showing how the product cards will appear after applying the CSS.

image
image1919×984 187 KB

Hope this helps!

3

Hi, I’ve tried this code and it works perfectly. The only issue is on the mobile version — there is a white gap on the sides of the titles and prices, and also a gap between the two product rows. Could you help me fix this? Desktop is perfect.

URL: RUNWAY

Screenshot 2026-03-08 at 02.28.38
Screenshot 2026-03-08 at 02.28.381760×1510 161 KB

4

Hi Runway,

Just a small update to the earlier suggestion — please replace the previous CSS with the following code instead:

@media screen and (min-width: 750px) {
    .product-grid {
        --product-grid-gap: 10px;
    }
}

.group-block.group-block--height-fill.group-block--width-fill.border-style.spacing-style.size-style,
.product-grid__card.product-grid__card {
    background: #f3f3f3;
    padding-bottom: 20px;
}

You can add or replace this in your theme’s base.css or theme.css file.

This should ensure the background is applied properly to the product card area.

If this works for you, kindly mark the reply as a solution so that other users can easily find it whenever they need it.

Hope this helps!