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

This topic has 11 replies, 2 voices, and was last updated 2 weeks, 3 days ago ago by Luca Rossi

  • Avatar: Goostaf
    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.
    10 Answers
    Avatar: Justin
    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

    Avatar: Goostaf
    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.
    Avatar: Justin
    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!

    Avatar: Goostaf
    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;
    }

    Avatar: Goostaf
    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.
    Avatar: Justin
    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!

    Avatar: Goostaf
    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.
    Avatar: Justin
    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!

    Avatar: Goostaf
    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.
    Avatar: Justin
    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!

  • Viewing 11 results - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.Log in/Sign up

Helpful Topics

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.