Hello,
in trying to get a dynamic button in my cart drawer before checkout page. I currently have dynamics button enabled in product pages etc but I want it to have it like this in my checkout drawer, is it possible? Somebody that can help me with a code? This is my cart drawer today:
And this is how I’d like to have it in the cart drawer
Hello @Leblancfashion ,
Please add this code after the checkout button.
{% if additional_checkout_buttons %}
{{ content_for_additional_checkout_buttons }}
{% endif %}
If you have enabled the apply pay or additional payments that will autometically show with above code.
Thanks,
Ritu
Where should I put it? Cart drawer liquid? Please tell me where exactly
Yes, in cart-drawer.liquid file
@Ritu-25 Hey I tried it and the buttons shows after the product whereas I want them to show under the checkout button and also I only want one button in the same size as the checkout not three. Is that possible?
@Leblancfashion Please share the website URL so I can easily share the code.
password: Leblancfashion 132
Hey @Leblancfashion ,
It’s showing correct on my page.
Let me know if any further help required.
The payment method will show with the available payment methods like if you have iphone/ ipad then it will show apple pay + google pay.
Thanks,
Ritu
@Ritu-25 right now they are like this.
Id like them to be beside each other in the same shape as these
Use this CSS for border changes :
.additional-checkout-buttons div[role="button"] {
border-radius: 50px !important;
height: 45px !important;
}
See if you add those button side by side then it might chances that there will be more then 2 buttons are there and all of those will not fit in one line so i’ll suggest to show checkout as full width button and rest addittional button as group buttons.
Yeah I understand,
Where do I put in the CSS that you provided me? Can you please show me since I inserted it and it didn’t work @Ritu-25
I can do it as you mentioned but for me it seems that I get all dynamic buttons and not only one as I want it to be. I’ve fixed so my checkout button is not full width I only need now that the buttons are the same size and next to each other. Please see the image
@Leblancfashion , Add it to Theme.css file
Thank you so much!
is it possible to get it one the same row as the checkout and only one of them not all three of them? For instance Apple Pay besides the checkout button?
Yes you can do that as well.
.additional-checkout-buttons div[data-testid="GooglePay-button"] {
display: none !important;
}
.additional-checkout-buttons div[data-testid="[<-----add paypal data-testid here ------>]"] {
display: none !important;
}
For adding the paypal test it. inspact that button and copy that and replace it on above CSS “<-----add paypal data-testid here ------>”
Then add above CSS to Theme.css and save it after that you have only one button which is apple pay.
after that in “button-group” div add the additional button code.
That’s it and you done.
I havet inserted the gode and now its only one dynamic button which is good but I didn’t understand the last part..
where should I put the button group code and can you paste it to me if I have to any pasting? @Ritu-25
You need to put this code
{% if additional_checkout_buttons %}
{{ content_for_additional_checkout_buttons }}
{% endif %}
Search “button-group” Div into cart-drawer.liquid file and into that div there is code starts with before that pur above code.
As in my device, there is no showing Apple Pay
.button-group {
flex-wrap: nowrap !important;
}
That might help you
so I’m just assuming the CSS.
