Custom button color for a specific section

Hello Guys

I’m customizing a section of my dawn teme adding some custom css code to modify the appearance of text and button.

I realize that adding a new custom color teme scheme it doesn’t apply the real color I choosed for button background color I would like solid black but it shows gray. The font-color it shows fine but not background color for the button.

I tried even adding some custom css code to edit text style but neither worth it

on custom css code ive added:

h1 {
font-size: 50px;
margin-left: 32px;
position: relative;
left: -35px;
}
h2 {
position: relative;
top: 20px;
font-size: 30px;
width: 500px;
}
p {
position: relative;
color: black;
font-size: 20px;
width: 170px;
top: 20px;
margin-bottom: 20px;
}
button {
color: black;
background-color: black;

}

this is the url

https://sap3vs65wrdb0o37-58526826589.shopifypreview.com/pages/offerte

I would like to put a solid black color por that specific section of my teme

I hope you can help me

Thank you so much.

1 Like

Hey @RayStaff

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

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

I did but doesn’t work properly, continue being gray

this is not a buy button is just a link button. the section is “immage with text”

maybe in opacity the “;” is missing?

Hey @RayStaff

The code I provided works completely fine and it makes the button in solid black color as well. Make sure you follow the correct steps and add the code properly. If you can share a screenshot that where you’re adding the code then I can check it out if you added it properly or not, or you can share the collaborator access with me then I can add the code for you.

Best Regards,

Moeed

Thank you for your quicky response.

I think i did exactly waht you said

OFFERTE – IrradiaSkinCare (shopifypreview.com)

Best regards

this is the file theme.liquid

Hey @RayStaff

The position where you added the code is perfectly accurate but I can see that you’re sharing the preview link of a draft theme so just to make sure that are you adding the code in your draft theme or your live theme? Because if you’re adding the code in your live theme then it won’t work for the draft theme. You need to add the code in your draft theme code files. If this doesn’t works as well then let me know!

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

Hi @RayStaff

You can try this one also.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.image-with-text__content .image-with-text__text+.button {opacity: 1 !important;}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Hi,

To make it specific for this section you need to add the section ID, also the black is not showing because there is an opacity on it.

Please add the following code in your base.css it will give you the required results.

#shopify-section-template–19494587498825__1594e346-a546-48c2-8776-19bbb54546cb .image-with-text__content .image-with-text__text+.button {background-color: black;
opacity: 1 !important;
}

Have a nice day.

Thank you much ,

Unfortunately is still not working