Struggling to change colour of checkout/buy and variant pills

[nightscare]

Hi

I am struggling to change the colour of the following buttons on my product page.#

- variant pill selector

- checkout

- add to cart

I am using the ride theme , -

can anyone advise?

thanks

[laddisahsi · Accepted solution]

Hi @nightscare 

You can follow the following steps:

1. Please go to the Online Store
2. Then Edit Code
3. Please find the theme.liquid file
4. And add the following code in theme.liquid file above the </head> tag

<style>
.product-form__input input[type=radio]:checked+label {
    background-color: rgb(223,189,99);
}

button#ProductSubmitButton-template--20490219225376__main {
    background-color: rgb(223,189,99);
}


</style>

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

[nightscare]

thanks, this worked!

can you advise how i can do the choose options buttons on this page?

also on the pop up page that appear after you click the choose options?

Im not entirely sure why these buttons are the colour they are, none of my colour schemes are set to that,

thanks

[David_SHT]

Hi @nightscare ,

This is David at SalesHunterThemes.

Ride theme supports colors scheme allowing us to change the color of the theme, you can use function to change color button. However they have limits.

I recommend that the color of the buttons should be consistent and using one main color will make your theme more harmonious. 

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> base.css file.

Add this following code at the bottom of page.

.button.product-form__submit,
.product-form__input input[type=radio]:checked+label {
    background-color: #e1be64 !important;
    color: #000 !important;
}

 result:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[EliteCoder444]

Add these codes to your CSS, And the color codes can be customized as you wish. hope it will work.

.product-form__input input[type="radio"] + label {

background-color: beige;
color: rgba(var(--color-foreground));
color: blue;

}

.product-form__input input[type="radio"]:checked + label {
background-color: red;
color: White;
}

[oscprofessional]

Hello @nightscare 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->section-main-product.css>Add this code at the bottom.

button#ProductSubmitButton-template--20490219225376__main {
    background: #e1be64 !important;
}
.product-form__input input[type=radio]:checked+label {
    background: #e1be64 !important;
}