How can I adjust the 'add to cart' and 'buy it now' button widths?

Store Design
1

Hi,

I’m wondering if you can help me work out how to change the widths of the ‘add to cart’ and ‘buy it now’ buttons on my product page?

Thanks so much

Screen Shot 2022-10-03 at 11.04.39 am.png
Screen Shot 2022-10-03 at 11.04.39 am.png1030×470 29.6 KB

2

hi @claireloudean

This is PageFly - Free Landing Page Builder.

This can be achieve by using custom css code which more easier for you. Please help me by share your site URL and password if password protected. I will check out the issue and provide you a solution here.

Hope this helps.

Best regards,

PageFly

3

Thank you, please try this

Step1: Online store > Themes > Edit code > search for your theme file .css that could be theme.css

Step2: Paste the code to the end of the file

.purchase-details__buttons > button {
max-width: 100% !important;
}

button.add_to_cart .text {
width: 100% !important;
}

.purchase-details__buttons > .shopify-payment-button {
margin-left: 0 !important;
max-width: 100% !important;
}

.shopify-payment-button div {
height: 70%;
}
1 Like
4

.purchase-details__buttons > button {
max-width: 100% !important;
}

button.add_to_cart .text {
width: 100% !important;
}

.purchase-details__buttons > .shopify-payment-button {
margin-left: 0 !important;
max-width: 100% !important;
}

.shopify-payment-button div {
height: 70%;
}

5

Screen Shot 2022-10-03 at 12.57.09 pm.png
Screen Shot 2022-10-03 at 12.57.09 pm.png962×466 34.5 KB

Still not quite working

6

@claireloudean
I’m missing this, please help me to add this one too :

.purchase-details__buttons .shopify-payment-button {
flex: 1 0 100% !important;
}
7

That worked, thank you so much, really appreciate your quick responses too!

8

.purchase-details__buttons .shopify-payment-button {
flex: 1 0 100% !important;
}