I think after I switched the color of my ATC button to red, this space above also went red. How can I switch the color to black or white?
Topic summary
A user encountered an issue where changing their Add to Cart (ATC) button color to red also turned the domain space above it red on mobile. They wanted to change this area to black or white.
Initial troubleshooting suggestions included:
- Checking button style settings in Shopify’s theme customizer
- Editing section background color settings
- Using custom CSS overrides if needed
- Testing changes across devices
Resolution:
The user located the relevant code in their theme’s liquid file, which was dynamically pulling the ATC button color for the background. Another participant clarified that this color value doesn’t need to be tied to the button color—the user can simply replace the existing code in the parentheses with a specific hex color code (e.g., #000000 for black) to achieve the desired appearance.
Ah, I see! It sounds like the color change to your Add to Cart (ATC) button may have unintentionally affected the background color of the area above it as well. No worries, this is an easy fix! Here’s how you can adjust the colors:
1. Check Button Style Settings
-
Go to your Shopify admin > Online Store > Themes > Customize.
-
In the theme customizer, look for the settings related to the Add to Cart button (this might be under “Product Pages” or “Buttons”.
-
Check if there’s an option for background color or button color. If you only want the button to be red and not the surrounding space, make sure you’re changing only the button’s color and not the section’s background color.
2. Edit the Section Background Color
-
If the background color of the space above the button is also changing, go to Customize and navigate to the specific section (like the product details section).
-
Look for Section Background Color or Block settings, and make sure it’s set to black or white, depending on your preference.
3. CSS Override (if needed)
If the changes are not reflecting properly, you may need to add a custom CSS rule to override the default styles.
-
In Online Store > Themes, click Edit code.
-
Find your theme.css or theme.scss file.
-
Add the following code to change the background color:
.product-section {
background-color: #ffffff; /* Or #000000 for black */
}
- Save the changes and check your store again.
4. Test on Different Devices
After making the changes, always check on both desktop and mobile to make sure the color looks great everywhere.
These steps should help you fix the color issue and get your store looking exactly how you want! Let me know if you run into any other issues or need further assistance.
@howie How to find this?
@Howie10 I found it, but as you see in the liquid is set like that. So is taking the ATC button color I guess. How to change that? Thanks!
1 Like
It doesn’t have to be the button color. In fact it doesn’t need to be associated with anything. You can put whatever you want there. Just delete everything in the parentheses and put #000000 if you want black.
1 Like