How to get black border grid with products in Debutify Theme

[supermagicman]

How can I get this black border grid with products in Debutify Theme
See the picture here for reference.

This screenshot is from the border theme’s demo store.

I’m using the Debutify theme but I’d like to get a similar section in the screenshot for my featured collections( or any list of products).
I want to know if it’s possible or not. Either with simply configuring things in the editor or with custom code.

I want to avoid code to not slow down the site but I’m open to it.

[Made4uo-Ribe]

Hi @supermagicman

Please share your store URL. It’s not the CSS code that’s slowing down the site, but rather the JavaScript and apps.

[supermagicman]

Thanks @Made4uo-Ribe , sorry for the late reply.
Here’s the store url: https://cozyshorz.store

[Made4uo-Ribe]

Thanks for the info, try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.col-6.col-md-3.product-item.product-item--grid {
    margin-top: 0 !important;
}

.col-6.col-md-3.product-item.product-item--grid {
    border-top: 1px solid black;
    border-left: 1px solid black;
}

.col-6.col-md-3.product-item.product-item--grid:nth-child(4n) {
    border-right: 1px solid black;
}
@media (min-width: 768px) {
    .col-6.col-md-3.product-item.product-item--grid:nth-last-child(-n+4) {
        border-bottom: 1px solid black;
    }
}

@media (max-width: 767px) {
    .shopify-section.dbtfy-featured-collection .section {
   padding-block-end: 0;
}
}

• And Save.

• Result:

  

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[supermagicman]

Thanks so much @Made4uo-Ribe , I’d like to ask for one more thing. I’d like to make the site full width, not having the blank space as indicated by the red drawing in the screenshot below.

Your solution on the borders works perfectly btw.

[Made4uo-Ribe]

Add this code where you paste the previous one.

.section.section--blank.d-block.color-scheme-fb80252e-87f7-49de-a689-74285003c005 .container {
    max-width: 100%;
}

And Save.

Result:

Welcome, Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[supermagicman]

Thanks alot! @Made4uo-Ribe