Black lines appear around product images - How do I remove them?

[RetroGP]

I've seen a couple of answers to this previously but the remedies do not work for me. Any assistance would be appreciated.

[BSSCommerce-HDL · Accepted solution]

Hi @RetroGP, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.products-grid .grid-item-border .product-image {
   padding: 12px !important;
}

.product-image.owl-carousel.owl-theme {
    border: none !important;
}
</style>

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[steve_michael2]

Hi @RetroGP , I hope you are doing well.

Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password. Thanks!

[RetroGP]

https://www.retrogp.com/collections/birth-marque-champions-of-f1

Thanks for the kind offer to assist but I'm not sharing the password. I'm sire you understand.

[steve_michael2]

@RetroGP , I understand. Please try the below code:

<style>
.products-grid .grid-item-border .product-image {
padding: 12px !important;
}

.product-image.owl-carousel.owl-theme {
border: none !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[BSSCommerce-HDL]

Hi @RetroGP, 
Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

[RetroGP]

Many thanks.

https://www.retrogp.com/collections/birth-marque-champions-of-f1

[BSSCommerce-HDL · Accepted solution]

Hi @RetroGP, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.products-grid .grid-item-border .product-image {
   padding: 12px !important;
}

.product-image.owl-carousel.owl-theme {
    border: none !important;
}
</style>

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[RetroGP]

Wow...it worked. Gosh that problem has been worrying me for a couple of years. Fantastic. I can't thank you enough.

Best regards

Andrew

[BSSCommerce-HDL]

Hi @RetroGP, 
We're happy to see that our suggestion helped you solve the issue. Can you kindly give us a like ? Should you need any further information, please do not hesitate to contact us by tagging directly at Community post.

We will check and let you know soon. Thanks in advance 😍

[RetroGP]

Not so fast lol. Actually what that's done is remove the thin line from around each product. It looks clean and those rogue black lines have disappeared but as you can see from the Hesketh Racing page, one product outline remains around the phone case (third row down). Is it possible to get those thin outlines around the product listing without the rogue black lines coming back?

https://www.retrogp.com/collections/hesketh-racing-1

[BSSCommerce-HDL]

@RetroGP,  Do you mean it like that?

[RetroGP]

Yes...exactly like that. Possible?

[BSSCommerce-HDL · Accepted solution]

Hi @RetroGP, Pls replace old code to new code: 

<style>
.products-grid .grid-item-border .product-image {
   padding: 12px !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[RetroGP]

That's the one. Brilliant. Many, Many thanks.

[BSSCommerce-HDL]

@RetroGP, No problem. Have a good day 😍

[niraj_patel]

Hello @RetroGP 
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[RetroGP]

https://www.retrogp.com/collections/birth-marque-champions-of-f1

Thanks Niraj

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
   .products-grid .grid-item-border .product-image{
       border: unset !important;
       padding: 11px !important;
    }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.