How to change size of Add to Cart button on collection cards.

Solved

How to change size of Add to Cart button on collection cards.

henryb45
Excursionist
14 0 3

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?

henryb45_1-1721822251283.png


.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;
}

Accepted Solution (1)
BSS-TekLabs
Shopify Partner
2401 695 830

This is an accepted solution.

- Here is the solution for you @henryb45 
- Please follow these steps:

step.png

- 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:

BSSTekLabs_0-1721825302510.png

 

 

- 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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 17 (17)

AK_Design_Dev
Shopify Partner
187 16 16

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.


Your Willpower Contribution Link:-

Contribution


Contact On My Mail :-mail@gmail.com
henryb45
Excursionist
14 0 3

Sent DM, Cant have it public

Rahul_dhiman
Shopify Partner
739 143 150

Hello @henryb45 
Please provide url.

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

henryb45
Excursionist
14 0 3

Sent DM, Cant have it public!

Rahul_dhiman
Shopify Partner
739 143 150

Hi
If you will delete the   -- > height: 60% !important;
from your code.

.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;
then all the buttons  will align themselves equally, 
 check screenshot

 
If this was helpful, hit the like button and mark the job as completed.
Thanks
Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

henryb45
Excursionist
14 0 3

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%.

Moeed
Shopify Partner
6719 1814 2198

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


henryb45
Excursionist
14 0 3

Sent you a DM aswell, thanks for checking

dws_pvt_ltd
Shopify Partner
365 69 87

Hello @henryb45, Please share your store URL and password.
So that I will check and let you know the exact solution here.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
henryb45
Excursionist
14 0 3

Thanks alot, sent a DM

BSS-TekLabs
Shopify Partner
2401 695 830

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
henryb45
Excursionist
14 0 3

Thanks, I sent DM

BSS-TekLabs
Shopify Partner
2401 695 830

This is an accepted solution.

- Here is the solution for you @henryb45 
- Please follow these steps:

step.png

- 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:

BSSTekLabs_0-1721825302510.png

 

 

- 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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
henryb45
Excursionist
14 0 3

Thats solved it! Do you also know why this one gets like this?

henryb45_0-1721825933201.png

 

BSS-TekLabs
Shopify Partner
2401 695 830

- Can you add more code @henryb45 

.form .button:disabled {
     display: none !important;
}

BSSTekLabs_0-1721827206460.png

- 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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2401 695 830

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
henryb45
Excursionist
14 0 3

I still want the boxes there aligned but want them to say out of stock or something.