How to change the color of texts and button on image banner

Solved

How to change the color of texts and button on image banner

VisarK
Trailblazer
149 0 31

Hello Community hope you all are doing good,i use dawn theme and need a help  about changing the color of heading and body text just on image banner ,also the body text to be a little bit bigger to fit well with heading,and to change the button on image banner also from white button backround to  #c19a6b and the button text from black to white in desktop and mobile devices.

Screenshot_20240522_003019_Chrome.jpg

Accepted Solution (1)
BSSCommerce-HDL
Shopify Partner
2305 834 905

This is an accepted solution.

Hi @VisarK

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside tag head. You need create style tags. After you'll insert my code inside it

BSSTechVenture_1-1716347305005.png

 

 

h2.banner__heading.inline-richtext.h1 
{ 
  color: black !important; 
} 
.banner__text.rte.subtitle p { 
   color: black !important; 
   font-size: 18px !important; 
} 
.banner__buttons a.button.button--primary:after 
{ 
   box-shadow: none !important; 
} 
.banner__buttons a.button.button--primary 
{ 
   background-color: #c19a6b !important; 
   color: white !important; 
}

 

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 5 (5)

BSSCommerce-HDL
Shopify Partner
2305 834 905

Hi @VisarK

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716345601653.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_1-1716345621622.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

h2.banner__heading.inline-richtext.h1 
{ 
  color: black !important; 
} 
.banner__text.rte.subtitle p { 
   color: black !important; 
   font-size: 18px !important; 
} 
.banner__buttons a.button.button--primary:after 
{ 
   box-shadow: none !important; 
} 
.banner__buttons a.button.button--primary 
{ 
   background-color: #c19a6b !important; 
   color: white !important; 
}

 

Here is result: 

BSSTechVenture_0-1716345551640.png

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

VisarK
Trailblazer
149 0 31

Hello @BSSCommerce-HDL  i tried but doesnt work

BSSCommerce-HDL
Shopify Partner
2305 834 905

This is an accepted solution.

Hi @VisarK

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside tag head. You need create style tags. After you'll insert my code inside it

BSSTechVenture_1-1716347305005.png

 

 

h2.banner__heading.inline-richtext.h1 
{ 
  color: black !important; 
} 
.banner__text.rte.subtitle p { 
   color: black !important; 
   font-size: 18px !important; 
} 
.banner__buttons a.button.button--primary:after 
{ 
   box-shadow: none !important; 
} 
.banner__buttons a.button.button--primary 
{ 
   background-color: #c19a6b !important; 
   color: white !important; 
}

 

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

VisarK
Trailblazer
149 0 31

Thanks a lot this helped me @BSSCommerce-HDL 

BSSCommerce-HDL
Shopify Partner
2305 834 905

@VisarK We're happy to see that our suggestion helped you solve your issue. This can be a reference for other merchants if they have an issue like you. Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon. Thanks in advance.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now