Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an accepted solution.
and please remove this code
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.
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.
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
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.
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...
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.
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
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.
This is an accepted solution.
and please remove this code
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.
Wonderful, thank you! You are the best.
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.
Hi. I have tired all of the codes, but non of them work. I use the Focal theme. Can you help me?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024