Change colour and corners on Quantity Selector - Envy Theme

[KrisG2]

Hi everyone!

I'd like to make my Quantity Selector button be similar to the 'Add To Cart' button.

The two changes I'd like to make to my Quantity Selector are:
1. Change the Quantity Selector button border colour to Orange (Hex - #FF9F1C) but keep the button colour fill white/transparent.

2. Make the corners of the quantity selector rounded, in the same style of the add to cart button.

Link to site: https://thebespokesignhouse.com/collections/engraved-honed-slate/products/engraved-honed-slate

Here is a pic of the add to cart button and the quantity selector

Any help appreciated!

Many thanks,

Kris

[Marty]

Hi @KrisG2.

Thank you for sharing this detailed context and your storefront link, I really enjoyed taking a look at your shop. If there is no colour setting in your theme editor to control the add to cart button colour then it would need to be coded in. You can double-check this by heading to Online store>Themes>Customize. Once you are within the customization area, select Theme settings:

Now in Theme settings, you will want to click colours:

You will want to keep an eye out for the button area, this is how you would affect the colours of your buttons if you are able to within your theme. If you do not see a way to affect the colours of your add to cart button, this would need to be coded in.

In regards to rounding out your quantity selector, this would also need to be done directly through coding. Since Envy is a third-party theme, designed and developed by a team called "Eight" you have two options to look into this.

You could reach out to the developers of Envy directly, via their support page here to look into these two customizations.

Or, you could always reach out to us through our Help Center, where you can speak to one of our support members through live chat, email or phone. Since Envy is available on our theme store the support team member you speak to can also send a request to the developers of Envy directly, to look into your request.

Please let me know if you have any additional questions, we are always happy to chat!

[dmwwebartisan · Accepted solution]

@KrisG2 

Please add the following code at the bottom of your CSS file.

.template-product .quantity-controls button{
border-radius: 12px !important;
}
.template-product .quantity-controls{
border: 1px solid  #FF9F1C !important; 
border-radius: 12px;
}

Hope this works.

Thanks!

[KrisG2]

Hey @dmwwebartisan!

Thank for helping me, I really appreciate it and your solutions are always fantastic! Could you help me with which CSS folder I need to put your code into? I can't remember which one - was it theme.index.min.css ? 

Many thanks again! I really appreciate it.

Best regards,

Kris

[KrisG2]

Scrap that @dmwwebartisan - I've got the right file now. Thank you so much! You've been fantastic for me and my store.

[dmwwebartisan]

@KrisG2 

It's my pleasure to help you.