Struggling to change colour of checkout/buy and variant pills

Store Design
1

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

2

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 tag

laddisahsi_0-1695107533586.png
laddisahsi_0-1695107533586.png1407×713 123 KB

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

Laddi

3

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.

David_SHT_0-1695108777724.png
David_SHT_0-1695108777724.png5110×2412 853 KB

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:

David_SHT_1-1695109611006.png
David_SHT_1-1695109611006.png3394×2484 457 KB

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

David | SalesHunterThemes team

4

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;
}

5

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;
}
6

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