Change colour and corners on Quantity Selector - Envy Theme

Solved
KrisG2
Excursionist
29 1 14

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

Button image.PNG

Any help appreciated!

Many thanks,

Kris

Marty
Shopify Staff
Shopify Staff
91 18 19

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:

24-30-82595-59713


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


24-31-93733-56143

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!

Marty | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
dmwwebartisan
Shopify Partner
7479 1776 2380

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
KrisG2
Excursionist
29 1 14

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
Excursionist
29 1 14

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

dmwwebartisan
Shopify Partner
7479 1776 2380

@KrisG2 

It's my pleasure to help you.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes