How can I change color of the button on Image with text component and keep text black? Now if I change text, button changes as well.
Here is link to my page:
Topic summary
A user needed to change the button color in Shopify’s “Image with text” component while keeping the text black, as both elements were changing color together.
Solutions Provided:
Two community members offered CSS-based fixes:
-
Option 1: Add custom CSS to the
image-with-text.cssfile (or theme’s main CSS file) targeting.image-with-text--content .inner buttonwith properties for white background, black text color, and a black border. -
Option 2: Insert CSS code in the
theme.liquidfile before the</body>tag, targeting.image-with-text a button spanfor text color and.image-with-text buttonfor background color.
Both solutions use !important flags to override existing styles. The issue was resolved successfully, with the original poster confirming the fix worked.
1 Like
Hi @Sasha84
Do you mean like this?
I add some border so the side of the button would be visible.
If it is check this code.
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 “Image-with-text.css or app.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--inner .button {
background: white !important;
color:black !important;
border: 1px solid black;
}
And Save.
You can edit and change the colors.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Hello @Sasha84
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Hi! It works, thx a lot!
1 Like