Hi everyone! I’m trying to remove the green background from my product grid where the product title, price, and “Add to Cart” button are located. Any assistance would be greatly appreciated!
Website: Monmarceau.com
Thank you so much!
Topic summary
A user seeks help removing a green background from their product grid that appears behind product titles, prices, and “Add to Cart” buttons.
Two solutions provided:
-
theme.liquid modification - Add custom CSS code above the
</body>tag in the theme.liquid file to override background styling -
base.css modification - Insert CSS code at the bottom of base.css file:
- Sets
.card-wrapper .card.card--mediabackground to transparent - Changes price text color to black (#000000)
- Sets
Note: Both responses contain reversed/garbled text in parts, but include code snippets and screenshots showing the expected result after applying changes.
Status: Solutions offered but no confirmation yet from the original poster on whether either approach resolved the issue.
Hey @MonMatelier
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
@MonMatelier Please follow below steps to remove the color background on the product grid. Let us know whether it is helpful for you.
- From admin, go to “Online Store” → “Themes”.
- Click “Edit code” button from the current theme.
- Go to “base.css” file and paste below code at the bottom of the file.
.card-wrapper .card.card--media {
background: transparent;
}
.card-wrapper .card.card--media .full-unstyled-link, .card-wrapper .price .price__container .price-item.price-item--regular {
color: #000000;
}
Result will be like,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.