How can I add a dynamic button to my cart drawer before checkout?

Leblancfashion
Tourist
32 0 1

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: 

A1F07382-A4EB-4895-9929-DCCBBBD78B4D.png

And this is how I’d like to have it in the cart drawer 

5F2DD474-3FC5-46F7-94D0-278075F4381C.jpeg

Replies 23 (23)

Ritu-25
Shopify Partner
129 26 15

Hello @Leblancfashion , 

 

Please add this code after the checkout button.

{% if additional_checkout_buttons %}
  <div class="additional-checkout-buttons">
    {{ content_for_additional_checkout_buttons }}
  </div>
{% endif %}

If you have enabled the apply pay or additional payments that will autometically show with above code. 

 

Thanks, 

Ritu

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
Leblancfashion
Tourist
32 0 1

@Ritu-25 

 

Where should I put it? Cart drawer liquid? Please tell me where exactly

Ritu-25
Shopify Partner
129 26 15

@Leblancfashion , 

Yes, in cart-drawer.liquid file 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
Leblancfashion
Tourist
32 0 1

@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? 

4A60CD56-2050-40C0-BB21-7D543DE9C019.png

Ritu-25
Shopify Partner
129 26 15

@Leblancfashion  Please share the website URL so I can easily share the code. 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
Leblancfashion
Tourist
32 0 1

leblancfashion.myshopify.com

 

password: Leblancfashion 132

Leblancfashion
Tourist
32 0 1
Ritu-25
Shopify Partner
129 26 15

Hey @Leblancfashion , 

 

It's showing correct on my page. 

Ritu25_0-1707992174445.png

 

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 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
Leblancfashion
Tourist
32 0 1

@Ritu-25 right now they are like this.

2C54C63D-F1C5-45F2-A02C-5DC9D405CF99.png

 Id like them to be beside each other  in the same shape as these 

5245A72B-C0B8-4039-BF88-E88455572372.jpeg

 

Ritu-25
Shopify Partner
129 26 15

@Leblancfashion , 

 

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. 

 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
Leblancfashion
Tourist
32 0 1

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 

D7CE7E5D-D7D0-4398-919C-502411E31582.png

 

CF99D7AE-C590-4055-8180-0BC21DA383D9.png

Ritu-25
Shopify Partner
129 26 15

@Leblancfashion , Add it to Theme.css file 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
Leblancfashion
Tourist
32 0 1

Thank you so much!

@Ritu-25  

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?

05A1033D-BE02-4FF4-AA30-D89622CE6917.png

Ritu-25
Shopify Partner
129 26 15

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

Ritu25_0-1707998686418.png

 

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.

Ritu25_1-1707998811671.png

 

That's it and you done. 

 

 

 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
Leblancfashion
Tourist
32 0 1

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 

Ritu-25
Shopify Partner
129 26 15

@Leblancfashion , 

You need to put this code 

{% if additional_checkout_buttons %}
  <div class="additional-checkout-buttons">
    {{ content_for_additional_checkout_buttons }}
  </div>
{% endif %}

Search "button-group" Div into cart-drawer.liquid file and into that div there is code starts with <button > before that pur above code. 

Ritu25_0-1708000872645.png

 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
Leblancfashion
Tourist
32 0 1

I Did so now but it’s still not changed

 

@Ritu-25 

C7B74B06-C1ED-4982-B0C6-309E68FE34C5.png

EF667AF2-2810-4A00-A4BA-48C82F1E7D99.png

  

Ritu-25
Shopify Partner
129 26 15

@Leblancfashion , 

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. 

 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
Leblancfashion
Tourist
32 0 1

Now it’s like this, You can’t see apple pay because it’s only available to apple customers, but can you see Google pay? I want it to show the button that’s available for all. So if you android user it shows Google pay and if you are apple user then you get apple pay 

A23F20C5-0AB3-424F-BFB7-5E96B0E39CE1.png

Leblancfashion
Tourist
32 0 1

@Ritu-25 And also is this PayPal code right? I can’t see the button code for PayPal because I don’t have an computer right now..  


Also PayPal still comes up in the cart 

D8CF3C0B-72DE-4CA6-9CE1-69CC64E50A02.png

Ritu-25
Shopify Partner
129 26 15

Hey @Leblancfashion , 

I understand your situation but this can't be done with a single line of code coz for that i need to make changes into theme codes and requires more efforts to make this happen.

Hope you understand.

 

Thanks

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
Leblancfashion
Tourist
32 0 1

I understand. So it’s not possible to make them on same row? @Ritu-25 

Ritu-25
Shopify Partner
129 26 15

@Leblancfashion , 

Try this CSS. 

.button-group {
    flex-wrap: nowrap!important;
    align-items: center;
    gap: 0.5rem;
}

Hope this works 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com