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:
Topic summary
Goal: enlarge Add to Cart and checkout buttons and adjust dynamic checkout buttons in the cart drawer.
What was done:
- Provided Custom CSS (via Themes > Customize > Buttons > Custom CSS) to increase button size (min-width/height, bold text, rounded corners). OP confirmed success.
- Clarified that “dynamic checkout buttons” automatically change based on the customer’s preferred method. Supplied base.css rules to style PayPal/Shop Pay buttons to match the main checkout button (consistent height and border radius). Screenshots show before/after results.
Next requests and guidance:
- OP asked to show only one preferred dynamic button or two smaller buttons (PayPal + Apple/Google). Response: only two dynamic buttons will display; one can be hidden (CSS selectors provided to hide PayPal). Displaying Apple Pay and Google Pay side-by-side requires theme file edits; helper offered to request store access. OP agreed and specified: hide PayPal; place Apple Pay and Google Pay on the same line.
Open items:
- Implementation of inline layout (theme edits pending after access).
- A new participant asked how to change only the Add to Cart text font size and description (not overall button size); no solution provided yet.
Status: ongoing with pending customization and unanswered font/description request.
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
My store url is leblancfashion.myshopify.com
password: Leblancfashion132
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
Thank you so much!!
is it also possible to get a dynamic button in my cart drawer, just like this?
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
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
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
Yes you can send it to me please it’s be really helpful @biznazz101
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.
