Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I would like to add background color to the "Featured Product" Section.
I tried to add the css code.
div { background-color: #f5f5f5; }
but this couldn't completely add the background color on both side.
As you can see the background color is only applied to the middle part.
I would like to fill the same color on the side, simillar to the "Rich Text" Section (Featured Canvas of the Month) above.
Any experts here that can help me with this?
link: palettepaws.com
pw: cheath
Solved! Go to the solution
This is an accepted solution.
Hello there,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
section.color-background-1.gradient {
background-color: #f5f5f5!important;
}
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
background-color: #f5f5f5!important;
}
Hello @palettepaws
Its Artzen Technologies! We will be happy to help you today.
You can try to follow these steps:
Go to Online Store -> Themes -> Actions -> Edit code.
Go Assets folder -> theme.liquid file.
Add the following code in the bottom of the file above </body> tag
<style>
section.color-background-1.gradient {
background: #f5f5f5;
}
.product-media-container.media-type-image.media-fit-contain {
margin-bottom: 0;
}
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
background: #f5f5f5;
}
</style>
like this
Let me know if need further assistance
Regards,
Artzen Technologies
This is an accepted solution.
Hello there,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
section.color-background-1.gradient {
background-color: #f5f5f5!important;
}
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
background-color: #f5f5f5!important;
}
In the "Featured product" section settings, instead of adding Custom CSS (which is what I'm assuming you did), change the "Color scheme", that will cover the full width of the background.
You can pick the exact color you'd like to use in the "Colors" tab in the "Theme settings".
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025