A user seeks help changing the text color of a button in an image banner to red on their Shopify website (hallyuapparel.com).
Multiple solutions provided:
Inspect Element method: Use browser developer tools to identify the button’s CSS class/ID, then add custom CSS targeting that element in the theme’s base.css file
Theme customization: Navigate to Online Store → Themes → Customize → Theme Settings → Colors and adjust the “Button text” color setting (if available in the theme)
Direct code editing: Add .button { color: red !important; } to the base.css file in the theme’s Assets folder
Theme.liquid modification: Edit the theme.liquid file, locate .banner__buttons>.button, and insert color: #ff0000 !important;
Custom CSS tab: Use the theme customizer’s custom CSS section to add styling
Note: One response mistakenly provided code for changing background color rather than text color. The discussion includes screenshots demonstrating the inspect element process and code placement locations.
website: hallyuapparel.com
Hello,
Im experimenting with colors on my website currently. I made a copy of my main website to experiment with the colors. However im wondering how to change the button text. Please help me change the button text to red.
Experimenting is a great way to learn.
Go to your homepage, right-click and select “Inspect Element”. In the Developer panel, click this button
Move your mouse to the desired target and click on it. You will see either a class or ID assigned to the button. Copy this text.
Go to your theme editor and navigate to the bottom of base.css and follow these instructions, changing the target to yours, and the color to your desired text color.
It’s really very easy. Any css change is easily searchable and doable. And since you like experimenting and learning, this will be a great way for you to get ahead of the curve.
You can change the button text color in your Shopify theme by going to Online Store → Themes → Customize → Theme Settings → Colors, then adjust the “Button text” color. If your theme doesn’t have that option, add this code in Edit Code → Assets → base.css: Copy and paste the code.
.button {
color: red !important;
}
Hi @HallyuApparel,
Please go to Actions > Edit code > layout > theme.liquid file, find ‘.banner__buttons>.button‘ and change code here:
Code:
color: #ff0000 !important;
Hello @HallyuApparel ,
I hope you are well!
Please copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.
.banner__buttons {
background-color: red;
}
This will change the background color to red
