Topic summary
A user seeks help removing or changing the grey frame around products on their collection page to white.
Two solutions provided:
Solution 1 (Moeed):
- Navigate to Online Store → Edit Code → theme.liquid
- Add custom CSS code above the
</body>tag - Code snippet provided but appears corrupted/reversed in the original text
Solution 2 (Made4uo-Ribe):
- Go to Online Store → Themes → Edit theme
- Locate the CSS file (main.css, base.css, style.css, or theme.css) in the Asset folder
- Add specific CSS targeting the product grid padding/background:
.section-template--collection-main-product-grid-padding {
background: rgb(var(--color-background));
}
- Place code at the bottom of the CSS file and save
Both responders included visual examples and requested the original poster mark helpful responses as solutions. The discussion remains open pending confirmation from the user on which approach worked.
Hey @tarekanani
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
Hi @tarekanani
Do you mean like this?
If it is check this one.
- From you Admin page, go to Online Store > Themes
- Select the theme you want to edit
- Under the Asset folder, open the main.css(base.css, style.css or theme.css)
- Then place the code below at the very bottom of the file.
.section-template--15862103081193__main-collection-product-grid-padding {
background: rgb(var(--color-background));
}
- And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!