Hello Everyone!
I want to remove/make the box invisible (see attached picture). Any help is appreciated. TIA.
Topic summary
Main issue: a grey box/border appears around product images on individual product pages; the OP wants it removed while keeping the black border that’s part of the image design.
Context: The OP shared site access (posyandclay.com, password “workinprogress”). Images and screenshots are central to understanding the visual issue.
Attempts and findings:
- Initial CSS suggested to remove padding on the product info wrapper had no effect; adding it to base.css/theme.css or via a style tag in theme.liquid only changed text spacing.
- A helper suspected the border was in the image file; the OP clarified the black border is intentional, and the unwanted grey square appears only on individual product pages, not in the “All Products” grid.
Latest proposed solution:
- Add CSS to target the product media container and set its border to none (selector targeting the product image container). A screenshot showed the grey border removed.
Status: A working approach was demonstrated, but the OP has not yet confirmed resolution. No further action items were recorded; discussion appears open pending OP confirmation.
@BettyslChan - can you please share this page link?
URL: posyandclay.com
PW: workinprogress
Hi @BettyslChan ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file → Save
.product__info-wrapper.grid__item {
padding: 0 !important;
}
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 
Hello @BSSCommerce-HDL ,
Thank you for sharing a solution. I tried it. However, it’s not working on my webpage. Not sure if I am doing anything differently.
Hi @BettyslChan ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Inside head tags. You need create style tags. After insert my code inside style tag
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
Hello @BSSCommerce-HDL
Thank you. Sadly, it still does not work. But instead, it brought the texts closer to the box.
Hi @BettyslChan ,
I think your border problem is because this image has been taken and has such a border available
Link img problem: https://posyandclay.com/cdn/shop/files/PRODUCT_2.png?v=1719086175&width=600
Pls check it. Thank you
Hello @BSSCommerce-HDL
The black border is meant to be part of the design with image. The image was downloaded to have an invisible background. This works when “All Products” are displayed (see attached picture). However, when I clicked to view each item that greyish square border appears.
My apologies. I know this can be quite frustrating.
1 Like
Hi @BettyslChan , Pls insert this code:
.product-media-container.media-type-image.media-fit-contain.global-media-settings {
border: none !important;
}
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