Shopify themes, liquid, logos, and UX
I have made a design on where I want all the buttons to look the same. Here on the picture you can see all buttons has been small exepct for the left one. The only difference on this product is that it has no "variant" so its directly displaying the "Add to cart" instead of "Choose variant". I have changed so both of the have the same word now.
Why doesnt down below code change the height of the left one to be the same?
.quick-add__submit {
padding: 0.8rem;
box-sizing: border-box;
background-color: #EC3F3F;
color: #FFFFFF
}
.card-wrapper .card__content .quick-add__submit{
min-width: 35% !important;
width: 35% !important;
min-height: 60% !important;
height: 60% !important;
font-size: 12px !important;
}
Solved! Go to the solution
This is an accepted solution.
- Here is the solution for you @henryb45
- Please follow these steps:
- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.
.quick-add product-form {
min-height: 60% !important;
height: 60% !important;
display: grid !important;
}
- Here is the result you will achieve:
- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Hello @henryb45
Please share store url
If you require further help to optimize your store, please don’t hesitate to reach out.
This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Sent DM, Cant have it public
Hello @henryb45
Please provide url.
Sent DM, Cant have it public!
Hi
If you will delete the -- > height: 60% !important;
from your code.
I dont want it to have 100% height. I want it to be 60% height on all of them. I know it works if they all have 100%. But I want them all to be at 60% and not 100%.
Hey @henryb45
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
Sent you a DM aswell, thanks for checking
Hello @henryb45, Please share your store URL and password.
So that I will check and let you know the exact solution here.
Thanks alot, sent a DM
Hello @henryb45 .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Thanks, I sent DM
This is an accepted solution.
- Here is the solution for you @henryb45
- Please follow these steps:
- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.
.quick-add product-form {
min-height: 60% !important;
height: 60% !important;
display: grid !important;
}
- Here is the result you will achieve:
- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Thats solved it! Do you also know why this one gets like this?
- Can you add more code @henryb45
.form .button:disabled {
display: none !important;
}
- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Can you try add more code
.button:not([disabled]):hover:after {
box-shadow: none !important;
}
- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
I still want the boxes there aligned but want them to say out of stock or something.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025