How to add a black border around products and the card below it on Dawn theme

Hi there,

I am looking to add a thin black border around product images in a grid and the text description card below them. The same for Collections in a grid as well.

I found out how to put a border around just the image, but I would like the border to go around not just the image, but the image and the white card below it. Please see reference image. Thank you!

Hi @leighmarino

can you share with me the page url

Sure, it’s machineartmoto.myshopify.com

password: seigao

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css ->paste bellow code in bottom of file

.card-wrapper {

padding: 15px;

}

.card-wrapper.underline-links-hover{

border: 3px solid #3333337a;

}

.card-wrapper .card__inner {

border: 2px solid #333;

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

1 Like

Hi,

I’m sorry, but that didn’t do anything that I can see. Any other suggestions?

Thanks,

Leigh

Hello @leighmarino

Go to Online Store->Theme->Edit code->base.css ->Add code at the bottom.

.card-wrapper.underline-links-hover {
    border-width: thin;
    border-style: groove;
}
.card-wrapper {
padding: 22px;
}

Still nothing. hmmm.

I added that code in addition to the code you already sent and it did nothing. So I removed the original code you sent and tried just the second code and still, nothing.

Hello Again @leighmarino

Do want it like this - on this Page?

https://machineartmoto.myshopify.com/collections/r1200-1250-gs-a

Yes please.

Hello Again @leighmarino

Go to Online Store->Theme->Edit code->base.css ->Add code at the bottom.

.card--card, .card--standard .card__inner {
    padding: 22px;
    border: groove;
    border-width: thin;
}

Is this in addition to all of the other code you’ve already suggested or just this code by itself?

I added just this code at the bottom by itself and it didn’t do anything. I’m not understanding why nothing is working…

@leighmarino

You can try again with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.liquid->paste bellow code in tag

.card-wrapper { padding: 15px; } .card-wrapper.underline-links-hover{ border: 3px solid #3333337a; } .card-wrapper .card__inner { border: 2px solid #333; }
1 Like

We’re getting closer. There is now a border (can it be thinner?) around the products and text, however it is also adding a black border around the images:

It did not work correctly for the collections on the home page - it added a border around the images instead:

You can adjust so you can make it thinner

and please remove this code

Wonderful, thank you! You are the best.

1 Like

You are welcome @leighmarino :wink:

Hi. I have tired all of the codes, but non of them work. I use the Focal theme. Can you help me?