Issues with changing the colour of buy it now/add to cart button

Topic summary

Issue: In the Vision theme, Buy It Now and Add to Cart button colors appear linked in Theme settings; changing one affects the other’s text color, reducing visibility.

Tried solutions and results:

  • Code in theme.liquid was suggested (details not visible in the thread). Outcome unclear.
  • CSS in Assets (base.css/style.css/theme.css) to target each button separately was proposed; user lacked these files and initially got both buttons black.
  • Using Customize → Settings → Custom CSS with selectors for Add to Cart (button#AddToCart) and unbranded payment button (.shopify-payment-button__button:not(.shopify-payment-button__button–branded)) successfully set different colors.

New issue: The CSS appeared as text at the bottom of the page. A suggestion to wrap it in tags caused an error (likely because “Custom CSS” accepts CSS only, not HTML tags). Final advice: move the CSS into a theme stylesheet (e.g., product.css) instead of using in Custom CSS.

Status: Partially resolved. Separate colors work via CSS selectors; display of raw code remains until CSS is placed in a proper stylesheet without tags. Images and code snippets are central to understanding.

Summarized with AI on January 14. AI used: gpt-5.

Thanks @Asad24 this worked!