I need help to add borders to my product cards

[flamontana]

How would I add a border to product cards to make it like https://uk.trapstarlondon.com/collections/mens-clothing-and-accessories does it. Please note I have color swatches under each product card and I want that inside the borders too. I made an image to show what I want it to look like below, i might need to adjust the product names and photo sizes to get it to be exactly equal in the borders but I hope you get the main idea. 

[Moeed]

Hey @flamontana 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[flamontana]

https://7nrfdj-v6.myshopify.com

the password is shopify

[Moeed]

Hey @flamontana 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.grid__item {
    border: solid 1px black !important;
}
.grid {
    gap: 0 !important;
}
.card--standard .card__media {
    border-bottom: solid 2px black !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[flamontana]

Hey thank you very much. Sorry i'm not the best at coding I have 3 little concerns i'd like to know if you could sort out. How would i make it so the borders don't show on the front page collection list. 

Alo

Also i've attached a second image on each number I want to fix this 

1)make the line where each product cards overlap the same width as the original line so that it's not thicker than the default line px

2)Connect each line vertically also so under each new line of product cards they are connected

[DaisyVo]

Hi @flamontana ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

.card-product-custom-div {
    border: solid 1px black !important;
}

Here is the result:

Please let me know if it works!

Best,

Daisy

[gulfam42]

wrap the entire product card (including swatches) inside a container with a border. Adjust the padding to ensure the swatches fit within the border. Fine-tune the layout and spacing to match the desired look. aplicativo para assistir filmes e séries grátis freecine