Remove Box on Product Page

Remove Box on Product Page

BettyslChan
Excursionist
21 0 4

Hello Everyone!

I want to remove/make the box invisible (see attached picture). Any help is appreciated. TIA. 

 

Screenshot 2024-06-23 at 00.13.49.png

Replies 9 (9)

suyash1
Shopify Partner
9583 1199 1540

@BettyslChan - can you please share this page link?

Support me | To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
BettyslChan
Excursionist
21 0 4

URL: posyandclay.com

PW: workinprogress

BSSCommerce-HDL
Shopify Partner
1129 388 456

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

BSSCommerceHDL_0-1719134224869.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSCommerceHDL_1-1719134231055.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

.product__info-wrapper.grid__item {
    padding: 0 !important;
}

 

Here is result: 

BSSCommerceHDL_2-1719134290482.png

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 😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BettyslChan
Excursionist
21 0 4

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. 

BSSCommerce-HDL
Shopify Partner
1129 388 456

Hi @BettyslChan

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

BSSCommerceHDL_1-1719140479428.png

 

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

BSSCommerceHDL_0-1719140464065.png

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 😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BettyslChan
Excursionist
21 0 4

Hello @BSSCommerce-HDL 

Thank you. Sadly, it still does not work. But instead, it brought the texts closer to the box.

 

Screenshot 2024-06-23 at 15.26.30.pngScreenshot 2024-06-23 at 15.26.13.png

BSSCommerce-HDL
Shopify Partner
1129 388 456

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 😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BettyslChan
Excursionist
21 0 4

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. 

 

Screenshot 2024-06-23 at 20.22.25.pngScreenshot 2024-06-23 at 15.26.13.png

BSSCommerce-HDL
Shopify Partner
1129 388 456

Hi @BettyslChan, Pls insert this code: 

 

.product-media-container.media-type-image.media-fit-contain.global-media-settings {
    border: none !important;
}

 

Here is result: 

BSSCommerceHDL_0-1719196309767.png

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 😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency