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?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025