A user needed to change the Add to Cart button color from black to red on product pages using Shopify’s free Ride theme. Despite setting the Solid Button Background to red in theme settings, the button appeared black with a yellow outline, blending into the black page background.
Resolution:
The issue was solved by adding custom CSS code to the theme’s stylesheet (base.css/theme.css/style.css). The code targets .product-form__submit class and applies:
Red background color
White text for readability
Yellow border to maintain the outline
Additional Resources:
Another contributor shared a YouTube tutorial demonstrating how to customize button colors and add animations to the Add to Cart button.
Status: Resolved. The user successfully implemented the CSS solution and expressed gratitude for the assistance.
Summarized with AI on November 1.
AI used: claude-sonnet-4-5-20250929.
In my Editing Scheme 1 my selected Solid Button Background color is set to Red, however on my product pages, my Add to Cart button is Black with Yellow Outline.
The Yellow Outline is appropriate, as my Outline button color is set to Yellow in my Editing Scheme 1.
However, my Background on my pages, including my Product pages, is Black, thus a Black Add to Cart button blends in too much with background and does not work.
How do I change my Add to Cart button to Red in the Ride theme on my Product Pages please?
@suyash1 thank you for your response. currently my store is password protected, as it has not launched yet. will be launching once I get the button color changed.
Shopify support said it will require coding, because of the theme (Ride). However, that does not seem right to me, as I feel Add to Cart button should be something that is easily customizable. However, if it is the case, Is this something you can assist with? And if so, how much would you charge?
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
/* Change Add to Cart button color to Red only on Product Pages */
.product-form__submit {
background-color: red !important;
color: white !important; /* Ensures text is readable */
border-color: yellow !important; /* Keeps yellow outline */
}
@devdesire very cool video, thank you for that. Loved the info about how to animate the buy button. Will definitely keep that in mind. Gave your video a like as well! thank you
