How can I make my add to cart and checkout buttons larger?

[Leblancfashion]

Hi,

I’d like to have my add to cart and checkout buttons more larger/bigger than they are currently on the website, is it possible? There are like this now:

but I would like them to be like this:

[biznazz101]

Hello, it would help if you could provide your store URL.

You can go to Themes> Customize> Navigate to buttons and click section> Scroll down to Custom CSS> Add This Code

button {
  min-width: 300px;
  min-height: 60px;
  font-weight: bold;
  border-radius: 40px;
text-transform: uppercase;
}

Adjust the code (px) as needed to change the buttons size.

Before & After:

Hope that helps!
@biznazz101

[Leblancfashion]

My store url is leblancfashion.myshopify.com

password: Leblancfashion132

[biznazz101]

Follow the above instructions but use this code instead:

button {min-width: 400px;
min-height: 50px;
font-weight: bold;
border: 1px solid black;}

Result:

Hope that helps!
@biznazz101

[Leblancfashion]

Thank you so much!!

@biznazz101

is it also possible to get a dynamic button in my cart drawer, just like this?

[biznazz101]

There are currently dynamic checkout buttons in your cart drawer. They change based on customers preferred method.

To make them match the existing checkout button add this code to your base.css file

.paypal-button {
border-radius: 40px;
min-height: 45px;
max-height: 45px;
  }

.shopify-cleanslate .DefhEHZZf4y32pvV7mZj {
  border-radius: 40px !important;
  width: 100% !important;
  height: 45px !important;

Result:

Hope that works for you!
@biznazz101

[Leblancfashion]

Now there are always three dynamics button showing but is it possible to only have one (the preferred one) that are based on customers? @biznazz101

or like this for instance, two smaller buttons, one of PayPal and one either Google pay or Apple Pay

[biznazz101]

The first one is not dynamic checkout, but yes there will be 2 buttons.
You can remove one by using this code:

li.XLcXEW3RnM9fyU7k7fvC
{
  display: none;
  visibility: hidden;
}

iframe.ybSyad5RbtOghAuCHUvv.paypalLight.wOEViUrCyNb9maEe3QrQ
{display: none;
visibility: hidden;}

Yes it’s possible to make them display inline but it will require editing your theme files, I cannot provide the code here for that. If you’d like I can send an access request to your store and try to change it for you. Just let me know.

Thanks!
@biznazz101

[Leblancfashion]

Yes you can send it to me please it’s be really helpful @biznazz101

[Leblancfashion]

Right now I just need the PayPal button to disappear and the two (Apple & Google Pay) to be next to each other on the same line as the picture i sent in the previous message.

[dazhuang1]

I want to change the font size and description of the add to cart button, not the size of the entire button, like the image below