Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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 -:
I hope the solution helps you.
Please let me know if you have any query.
Thank you.
If you can share your store URL then it would be easy for me to provide you a correct code.
puresurge.store
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?
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
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
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
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
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 -:
I hope the solution helps you.
Please let me know if you have any query.
Thank you.
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.
and let me know if you still facing any issue.
.quantity{
width:100% !important;
color:#FFFFFF !important;
}
.quantity:before,.product-form__submit{
background-color: #000000 !important;
}
.quantity__button,.product-form__submit{
color: #FFFFFF !important;
}
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;
}
If We managed to help you then, don't forget to Like it and Mark it as Solution!
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024