How to add border color and a little curve in the edges of the product card in the collection page o

Store Design
1

Hi,

I want to add border color and a little curve in the edges of the product card in the collection page of minimog theme. I have attached the current product card pic along with a reference picture of what I want to achieve. Any help or suggestions will be appreciated.

Here’s my store link : https://robotek1.myshopify.com/

My store password is: Socialley1122#

Thanks !!

Currently it looks like this
Currently it looks like this1521×555 78.3 KB

Need border and Curved edges like this
Need border and Curved edges like this866×362 20.8 KB

2

Hi @xvd1122 ,

Go to Assets > theme.css and paste this at the bottom of the file:

.product-tabs__content .sf-column,
.sf__product-listing .sf__col-item {
	border: 1px solid var(--border-color-3);
    border-radius: 2%;
}

Hope it helps!

3

@xvd1122 ,

.product-tabs__content .sf-column,
.sf__product-listing .sf__col-item {
    border: 1px solid #000;
    border-radius: 2%;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

4

Hey @xvd1122 ,
Welcome to the Shopify community!
You can follow the instruction below:

.product-tabs__content .sf-column,
.sf__product-listing .sf__col-item {
    border: 1px solid #000;
    border-radius: 2%;
}

please add this to your CSS file. If you feel like my answer is helpful, please Like and mark it as a solution**.** Let me know if you have any further questions.
Thank you!
Raman

5

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

you can add this css code to your product card class

.product-tabs__content .sf-column,

.sf__product-listing .sf__col-item {

border: 1px solid #dadada;

border-radius: 7px;

}

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly