Dawn theme "Featured Product" Section add Background color

Solved

Dawn theme "Featured Product" Section add Background color

palettepaws
Excursionist
14 0 7

a.PNG

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.
b.PNG

As you can see the background color is only applied to the middle part.

asdfasdfasdfasdf.PNG

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

Accepted Solution (1)

ZestardTech
Shopify Partner
6056 1082 1452

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;
}

 

ZestardTech_0-1695386086535.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 3 (3)

Artzen_tech
Shopify Partner
552 113 111

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

Artzen_tech_0-1695386374178.png

 

 

 


Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

ZestardTech
Shopify Partner
6056 1082 1452

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;
}

 

ZestardTech_0-1695386086535.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

JohnE10
Shopify Partner
118 14 20

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".

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com