<aside> ⚠️ This is an advanced tutorial and proceed only if understand the risks.
</aside>
Create a new snippet in your theme and set name additional-checkout-buttons.liquid
and add following code:
<script type="text/template" id="additional-checkout-buttons">
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
</script>
<script type="text/javascript">
window.addEventListener('Unicart::CartBuilt', function(e){
if(document.getElementById('unicart-additional-checkout-buttons') && document.getElementById('additional-checkout-buttons'))
{
document.getElementById('unicart-additional-checkout-buttons').innerHTML = document.getElementById('additional-checkout-buttons').innerHTML;
if(window.Shopify && Shopify.StorefrontExpressButtons)
{
Shopify.StorefrontExpressButtons.initialize();
}
}
});
</script>
<style type="text/css">
#unicart-additional-checkout-buttons {padding:0 20px 20px;}
#unicart-additional-checkout-buttons .additional-checkout-button {display:block;width:100% !important;}
#unicart-additional-checkout-buttons .additional-checkout-button + .additional-checkout-button{
margin-top: 10px !important;
}
</style>
Open theme.liquid
file and add following code before ending </body>
tag and save the file:
{% include 'additional-checkout-buttons' %}
Edit code
for Live Theme and Edit Cart Template
or Drawer Template
depending on where the submit button code is in the theme.
Add following code before the submit button and hit Save
<div id="unicart-additional-checkout-buttons"></div>