Return to previous page

How to apply a style to a product type: Display Type Grid

This topic has 15 replies, 2 voices, and was last updated 4 months ago ago by Luca Rossi

Goostaf

Participant

June 17, 2025 at 14:25

Hello, you have done the style code for the Slider type earlier here: https://www.8theme.com/topic/change-the-background-on-the-product-block/#post-415229, but how else can I add a style to the Grid type?

Files is visible for topic creator and
support staff only.

#447353 Copied

14 Answers
Luca Rossi

Support staff

June 18, 2025 at 06:08
Dear @Goostaf,

We hope this message finds you well.

Since each section has a different background color, it is necessary to assign a specific class (e.g., pink, blue, purple, etc.) to each section accordingly. Once the appropriate classes are set, you may apply the following custom CSS code:

.blue .products-slider .swiper-slide { background-color: rgba(228, 241, 253, 0.3) !important; box-shadow: none; } .pink .products-slider .swiper-slide { background-color: rgba(253, 244, 248, 0.5) !important; box-shadow: none; } .purple .products-slider .swiper-slide { background-color: rgba(230, 226, 252, 0.3) !important; box-shadow: none; }

Please feel free to reach out if you have any further questions or need additional assistance.

Best regards,
The 8Theme Team
#447388 Copied
Goostaf

Participant

June 18, 2025 at 08:15

I probably described it wrong, I also need to add a white background to the product cards with the grid type, as I understand it, you need to add something like: .products-slider .swiper-slide .product-grid (this does not work) {
background-color: #fafafa !important;
}

Files is visible for topic creator and
support staff only.

#447401 Copied
Luca Rossi

Support staff

June 18, 2025 at 09:41
Hi @Goostaf,

Please try with this custom CSS code instead:

.products-grid > div.product { background-color: #fff; } @media (min-width: 980px){ .products-grid { gap: 10px; } .row-count-6 .product { width: calc(16.66666667% - 10px); } }

Hope it helps!
#447418 Copied
Goostaf

Participant

June 18, 2025 at 09:57

With your code, everything shifts, that’s almost what you need, but margin also shifts the cards and does not fit 6 in a row.

.products-grid > div.product {
background-color: #fefefe !important;
box-shadow: 0 20px 30px rgba(53, 51, 57, .06);
border-radius: 10px;
margin:3px;
}

#447419 Copied

Goostaf

Participant

June 18, 2025 at 10:02

Now it’s like this without margin, but I would like to add it without shifting the products (6 in a row as it is done below)

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#447421 Copied
Luca Rossi

Support staff

June 18, 2025 at 10:36
Hi @Goostaf,

Please add this custom CSS codes also:

@media (min-width: 980px){ .products-grid { gap: 10px; } body .row-count-6 .product { width: calc(16.66666667% - 10px) !important; } }

Let us know how it goes!
#447428 Copied
Goostaf

Participant

June 18, 2025 at 10:56

Thanks, but can I level up some more?

Files is visible for topic creator and
support staff only.

#447431 Copied
Luca Rossi

Support staff

June 18, 2025 at 11:10
Hi @Goostaf,

Please add this custom CSS instead:

@media (min-width: 980px){ body .row-count-6 .product { width: calc(16.66666667% - 10px) !important; margin: 0 5px 10px !important; } }

https://prnt.sc/e25msM64T_Pr

Hope it helps!
#447436 Copied
Goostaf

Participant

June 18, 2025 at 12:33

Thank you, but can I do the same on my mobile?

Files is visible for topic creator and
support staff only.

#447462 Copied
Luca Rossi

Support staff

June 18, 2025 at 16:24
Hi @Goostaf,

For mobile, please add this code also:

@media (min-width: 980px){ body .row-count-6 .product { width: calc(50% - 10px) !important; margin: 0 5px 10px !important; } }

Hope it helps!
#447481 Copied
Goostaf

Participant

August 4, 2025 at 16:49

Hello, everything is starting to shift, is it possible to do it without shifting, like in carousels?

Please contact administrator
for this information.

#451825 Copied

Luca Rossi

Support staff

August 4, 2025 at 17:41

Dear @Goostaf,

We hope this message finds you well.

We would appreciate it if you could kindly clarify your request, as we are currently unsure about the objective you are aiming to achieve.

Thank you in advance for your cooperation.

Best regards,
The 8Theme Team

#451829 Copied

Goostaf

Participant

August 4, 2025 at 18:56

We want to highlight the background of the cards in white, like on the main page

Files is visible for topic creator and
support staff only.

#451834 Copied
Luca Rossi

Support staff

August 5, 2025 at 04:14
Dear @Goostaf,

We’ve updated the full custom CSS codes. Please delete the previous codes and try only with this one:

.products-grid > div.product { background-color: #fff; } @media (min-width: 980px){ body .row-count-6 .product { width: calc(16.66666667% - 10px) !important; margin: 0 5px 10px !important; } } @media (max-width: 979px){ body .row-count-6 .product { width: calc(50% - 10px) !important; margin: 0 5px 10px !important; } }

Hope it helps!
#451847 Copied
Viewing 15 results - 1 through 15 (of 15 total)