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

Solved

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

leighmarino
Excursionist
26 0 4

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!

 

unnamed.png

Accepted Solution (1)
PageFly-Richard
Shopify Partner
4712 1077 1742

This is an accepted solution.

and please remove this code

RichardNguyen_1-1665589650927.png

 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 17 (17)

PageFly-Richard
Shopify Partner
4712 1077 1742

Hi @leighmarino 

 

can you share with me the page url

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

leighmarino
Excursionist
26 0 4

Sure, it's machineartmoto.myshopify.com

 

password: seigao

PageFly-Richard
Shopify Partner
4712 1077 1742

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

leighmarino
Excursionist
26 0 4

Hi,

 

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

 

Thanks,

Leigh

oscprofessional
Shopify Partner
16116 2409 3125

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;
}

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
leighmarino
Excursionist
26 0 4

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. 

oscprofessional
Shopify Partner
16116 2409 3125

Hello Again @leighmarino 

Do want it like this - on this Page?

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

2022-10-12_19-49.jpg

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
leighmarino
Excursionist
26 0 4

Yes please. 

oscprofessional
Shopify Partner
16116 2409 3125

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;
}

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
leighmarino
Excursionist
26 0 4

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...

PageFly-Richard
Shopify Partner
4712 1077 1742

@leighmarino 

You can try again with this code.

Follow this:

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

 

<style>

.card-wrapper {

    padding: 15px;

}

.card-wrapper.underline-links-hover{

    border: 3px solid #3333337a;

}

.card-wrapper .card__inner {

    border: 2px solid #333;

}

</style>

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

leighmarino
Excursionist
26 0 4

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:

 

Screen Shot 2022-10-12 at 11.26.58 AM.png

 

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

Screen Shot 2022-10-12 at 11.27.20 AM.png

PageFly-Richard
Shopify Partner
4712 1077 1742

RichardNguyen_0-1665589549232.png

You can adjust so you can make it thinner

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Richard
Shopify Partner
4712 1077 1742

This is an accepted solution.

and please remove this code

RichardNguyen_1-1665589650927.png

 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

leighmarino
Excursionist
26 0 4

Wonderful, thank you! You are the best.

PageFly-Richard
Shopify Partner
4712 1077 1742

You are welcome @leighmarino  😉

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

DejanP
Tourist
6 0 3

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