Remove grey square shadow from homepage products Can you help I need a code to remove grey square shadow on products on homepage
url:
Topic summary
A user seeks to remove grey square shadows appearing on product images on their Shopify store homepage.
Solutions Proposed:
-
Custom CSS Method: Add CSS code targeting
.slider-mobile-gutter lior.collection-list__itemwithbackground: transparent !important;through Theme Settings > Custom CSS -
Theme.liquid Edit: Insert custom
<style>tags above the</body>tag in the theme.liquid file -
Assets/theme.css Edit: Append the CSS code directly to the theme.css file in the assets folder
Current Status:
The issue remains unresolved—the original poster reported that the provided code did not work. Multiple contributors offered variations of CSS solutions targeting product container backgrounds, but none have successfully eliminated the shadow effect yet.
1 Like
Hope this guide is helpful to you!
- Log in to Shopify > Online Store > Customize (Screenshot).
- Go to Theme Settings > Custom CSS (Screenshot).
- Copy the CSS code below, paste it into the Custom CSS box, and click Save.
.slider-mobile-gutter li {
background: transparent !important;
}
Hey @Mel9602
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @Mel9602
Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.css. Add the provided code at the end of the file.
.collection-list__item {
background: transparent !important;
}
Code doesn’t work