All Collections
Advanced Topics
Checkout button
Discount Ninja checkout button
Discount Ninja checkout button

Learn how to add a Discount Ninja checkout button

Bart Coppens avatar
Written by Bart Coppens
Updated over a week ago

When a visitor clicks the checkout button, Discount Ninja tries to take over the navigation to send the visitor to a Shopify checkout that the app has prepared.

The app, by default, only redirects when a promotion applies to the cart.

On some themes Discount Ninja cannot successfully take control over the redirect to the checkout. This can happen due to script files, or logic injected by other apps that also try to take control over what happens when the checkout button is clicked. Examples of such apps are apps that redirect to a multi-currency checkout or a subscription product checkout.

If Discount Ninja cannot redirect to the discounted checkout correctly, you can use this technique to fix the issue.

IMPORTANT: advanced users only. When making changes to the checkout button, always ensure you test all scenarios (mobile, subscription products, with or without promotion, check out from drawer cart and all checkout buttons on the cart...) thoroughly to avoid breaking the cart to checkout flow.

Markup for standard checkout button

In your cart liquid, identify the checkout button. It typically has a type submit and a name checkout.
Add the following two css classes to this button:

limoniapps-discountninja-ignore limoniapps-discountninja-checkoutbutton-hide

These classes are interpreted as follows by the app:

  • limoniapps-discountninja-ignore: causes Discount Ninja not to try and take over navigation when this button is clicked

  • limoniapps-discountninja-checkoutbutton-hide: causes Discount Ninja to hide this element when one or more promotions apply to the cart

Additional Discount Ninja checkout button

Add a new button right next to the standard one. Importantly, do not set this up with a type submit and a name checkout. Instead use a simple div if possible and add the following two css classes to this button:

limoniapps-discountninja-checkoutbutton limoniapps-discountninja-checkoutbutton-show

These classes are interpreted as follows by the app:

  • limoniapps-discountninja-checkoutbutton: causes Discount Ninja to try and take over navigation when this button is clicked

  • limoniapps-discountninja-checkoutbutton-show: causes Discount Ninja to showthis element when one or more promotions apply to the cart

Example markup:

<div class="other classes for styling limoniapps-discountninja-checkoutbutton limoniapps-discountninja-checkoutbutton-show" style="display:none">
   {{ 'cart.general.checkout' | t }}
</div>

Enable custom checkout button mode

In your theme find the limoniapps-discountninja-context-flags.liquid file.
In this file you'll find a property CustomCheckoutButton.
Set it to true:

CustomCheckoutButton: true

You can now test the custom checkout button.

Disable custom checkout button mode

If you encounter issues with the custom checkout button, set the CustomCheckoutButton property to false.

CustomCheckoutButton: false

The custom button will no longer be displayed and your standard checkout button will be visible.

Did this answer your question?