How to change the color & size of the "quantity" title and how to change variant button colors

Hey all,

I’m wanting to change the size and color of the Quantity title to match that of the “colour” title.

Also for the variant buttons I want the unselected variant to be in a white button with the text as the pink color (#f7b6ec) and a 1px border in the pink color too. While the selected one is the opposite.

link: https://1xes1x-bj.myshopify.com/

Thanks,

Sam

1 Like

hey for the quantity use those calsses quantity__input quantity__button and !important and for the variant can you explain more

Hi @Sammy113 , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

.product-form__input--pill input[type=radio]+label {
 border: 1px solid !important;
 background-color: #fff !important;
}
.quantity__label.form__label {
 color: #535152 !important;
 font-size: 15px !important; 
}

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you :heart_eyes:

Hi @Sammy113

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings

.product-form__input .form__label {
font-size: 15px;
color: #535152;
}

1 Like

Hello @Sammy113
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.quantity__label.form__label {
font-size: 15px !important;
}
.product-form__input--pill input[type="radio"] + label {
background: white;
border: 1px solid #f7b6ec;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

Hey mate,

The font works thank you, however the button didnt. It won’t change my button colour yet!

Thanks,

Sam

Thanks mate, appreciate it

Hi mate,

Unfortunately the button code did not work and my variant buttons are still the same.

Any chance you could try again?

Thank you