Solved

How to Make the quantity button and add to cart button be the same size?

Alexis1530
Tourist
5 0 0

I need a code to make my quantity button and my add to cart button the same size also i would like for the button to be black and the text to be white. Im using the refresh theme.

Accepted Solution (1)
Anshul_arora
Navigator
424 121 84

This is an accepted solution.

Hello @Alexis1530 ,

Please add the below mentioned code to change the color, background-color of "Quantity" & "Add to Cart" buttons.

Copy and Paste the code at the bottom of the theme.liquid file before </body> tag and save.

<style>

.quantity{
width:100% !important;
color:white !important;
}
.quantity:before,.product-form__submit{
color: white !important;
background-color: black !important;
}

button.quantity__button.no-js-hidden.disabled {
color: white !important;
}

button.quantity__button.no-js-hidden {
color: white !important;
}

</style>

 

Output -:

Anshul_arora_0-1709808398911.png

 

I hope the solution helps you.

Please let me know if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 12 (12)

prakashVt
Shopify Partner
98 9 16

If you can share your store URL then it would be easy for me to provide you a correct code. 

- Did you find my response useful? Mark it as "Accepted solution"; so others can see it, or just like it.
- VTN Power Wishlist Looking for a Wishlist App for your store? Check this app with the free plan available.
- Feel free to Contact me
Alexis1530
Tourist
5 0 0

puresurge.store

DigiDecoded
Shopify Partner
158 19 18

Could you please provide me with the URL for the store you mentioned in your query? Additionally, if the store is password protected, could you share the password as well?

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp | Website
Alexis1530
Tourist
5 0 0

puresurge.store

 

I figured out how to make the quantity button and the buy  now button now im trying to figure out how to make them black and the words white

 

Alexis1530
Tourist
5 0 0

Actually I didnt figure it out, now the quantity button is big on the mobile side. So i need help making the quantity button the same size as the buy now button and I want both buttons to be black and the writing to be white

Moeed
Shopify Partner
3898 985 1232

Hey @Alexis1530 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Alexis1530
Tourist
5 0 0

I figured out how to make the quantity button and the buy  now button now im trying to figure out how to make them black and the words white

Anshul_arora
Navigator
424 121 84

This is an accepted solution.

Hello @Alexis1530 ,

Please add the below mentioned code to change the color, background-color of "Quantity" & "Add to Cart" buttons.

Copy and Paste the code at the bottom of the theme.liquid file before </body> tag and save.

<style>

.quantity{
width:100% !important;
color:white !important;
}
.quantity:before,.product-form__submit{
color: white !important;
background-color: black !important;
}

button.quantity__button.no-js-hidden.disabled {
color: white !important;
}

button.quantity__button.no-js-hidden {
color: white !important;
}

</style>

 

Output -:

Anshul_arora_0-1709808398911.png

 

I hope the solution helps you.

Please let me know if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

Devinlabs
Shopify Partner
15 1 3

Hi Alexis1530,

I fixed your issue via CSS. and also adding screenshot of that CSS. it is working for all device like desktop, mobile and all. Please check attached screenshot.

shoppify issue.png

and let me know if you still facing any issue.

Ravi Kumar
Shopify Partner
DevinLabs Solutions

- Need a Shopify developer? Email: devinlabsolutions@gmail.com

- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications :red_heart::red_heart:

Website: https://devinlabs.com
LinkedIn: https://www.linkedin.com/company/devinlabs-solutions

Vinsinfo
Shopify Partner
318 116 114

@Alexis1530 

Please follow below steps to change the "quantity" button and "Buy now" button in the same size with the button in black and the text in white. Let me know whether it is helpful for you.
1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search "base.css" and paste the below code at the bottom of the file.
To make quantity button as same as "Buy now" button:

 

.quantity{
    width:100% !important;
    color:#FFFFFF !important;
}
.quantity:before,.product-form__submit{
    background-color: #000000 !important;
}
.quantity__button,.product-form__submit{
    color: #FFFFFF !important;
}

 

priyavinsinfo_1-1709795986670.png   priyavinsinfo_0-1709795972370.png

 

To make "Buy now" button as same as quantity button:

 

.product-form__submit {
    width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width)* 2);
    padding: 0px;
}
.quantity:before,.product-form__submit{
    background-color: #000000 !important;
}
.quantity__button, .quantity, .product-form__submit{
    color: #FFFFFF !important;
}

 

priyavinsinfo_5-1709796557730.png priyavinsinfo_6-1709796581956.png
4. Then click "Save".

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

Devinlabs
Shopify Partner
15 1 3

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

Ravi Kumar
Shopify Partner
DevinLabs Solutions

- Need a Shopify developer? Email: devinlabsolutions@gmail.com

- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications :red_heart::red_heart:

Website: https://devinlabs.com
LinkedIn: https://www.linkedin.com/company/devinlabs-solutions

PageFly-Oliver
Shopify Partner
878 190 174

Hi @Alexis1530 ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
.quantity{
width:100% !important
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.