Integration

Discount Ninja includes out-of-the-box integration with a variety of apps and Shopify features.

Subscription apps

  • The app automatically detects subscription products and can handle a checkout where one-time purchases and subscription products are combined.

  • The app was tested with:

    • Shopify's subscription app

    • Seal

    • Appstle

    • Recharge

    • Yotpo

Email marketing apps

Discount Ninja can detect discount codes generated by the following apps:

  • Klaviyo: Email marketing

Loyalty apps

  • Discount codes generated by loyalty apps can be redeemed using Discount Ninja's promotion code field.

  • The app includes an offer type to build "wrapper" promotions to display Discount Ninja widgets when a loyalty discount code is entered in the promotion code field.

  • Discount Ninja can detect discount codes generated by the following apps:

    • Appstle Loyalty & Rewards

    • Influenci.io: Loyalty Rewards

    • Loyalty & referrals by Yotpo (Swell)

    • Loyalty, rewards and referrals by LoyaltyLion

    • Loyalty, Wishlist, Reviews UGC by Growave

    • Referral Candy

    • Smile: Rewards & Loyalty

    • Stamped.io Loyalty & Rewards

Pickup + delivery apps

  • Discount Ninja has built in integration with Zapiet.

    The integration relies on a method named Zapiet.Widget.checkoutEnabled() which must evaluate to true to allow the app to continue the checkout pipeline.

Prefill checkout information

  • Discount Ninja requires that third party developers add query parameters to the action attribute of the cart form, which is a standard technique to pass information from the cart to the checkout.

  • To prefill shipping information at checkout based on a selection made in the checkout, third party developers must ensure the action attribute of the cart form included the correct query parameters. This can be done using JavaScript.

  • Shopify provides a number of query parameters to prefill the checkout: https://shopify.dev/docs/apps/build/checkout/cart-permalinks/create-cart-permalinks

  • Example of an action attribute, rendered by Liquid and updated by JavaScript:

<form action="/cart?checkout[shipping_address][city]=London" method="POST">
    ...
</form>

Currency conversion switchers

  • The app detects the currency based on the Shopify.currency object

  • We are compatible with all apps that rely on this object

Installment apps

  • The app can apply discounts to installment payments proposed by:

    • AfterPay

    • QuadPay

    • Sezzle

    • Hoolah

Search and filter apps

  • Rendering discounted prices in search results and collections managed by apps requires the following:

    • Discount Ninja must be able to identify where prices are rendered. This can be achieved in one of two ways:

      • Using a CSS selector

      • By marking the section with an attribute

    • For each collection product the app must, at a minimum, have access to the product handle

  • The app has been tested with the following apps:

    • AI Search, Filter & Discovery Boost Commerce (formerly known as PFS)

    • Searchanize

    • Globo Smart Search & Product Filter (SPF)

    • Ultimate Search

Page builders

  • The app has different levels of support for different page builders. More information about each integration is available from the following support articles:

Terms and conditions checkboxes

Behavior

The app automatically checks for known checkboxes that are related to terms and conditions. The app will not proceed the checkout pipeline until those checkboxes (if marked mandatory and visible) are checked.

Important: note that the logic to cancel the checkout based on the status of the checkbox should be present in the code of your theme (or the app that handles this checkbox). Discount Ninja does not display an error message, it relies on the theme to cancel the checkout and display a message.

Explicitly marking a checkbox

If you use a custom checkbox that isn't automatically detected by the app, you may need to mark it explicitly. To explicitly mark a checkbox as required before checkout, add the following attribute to the input field:

la-dn-checkout-required-checkbox

Syntax

<input 
    type="checkbox" 
    name="termsAndConditions" 
    form="cart" 
    la-dn-checkout-required-checkbox>
<label for="termsAndConditions">I accept the terms and conditions</label>

Markets

  • The app can be used on stores that have multiple markets configured.

  • Shopify functions mode supports most features included in Shopify Markets:

    • International pricing: fixed product prices configured in Shopify Markets are used.

    • Exchange rates: exchange rates will be applied to product prices as configured in Shopify Markets.

    • Rounding: rounding will be applied to product prices as configured in Shopify Markets.

  • Caveats

    • Thresholds and fixed amounts: thresholds and fixed amount discounts are calculated based on the conversion rate defined in Shopify Markets.

    • Rounding: discounted prices are only rounded at checkout, not in the cart.

Other discount apps

  • Discount Ninja strives to be as compatible as technically possible with other discount apps.

  • Note that the app is not compatible with:

    • Shopify's automatic discounts

    • Apps that use a discounted checkout prepared by the Draft Order API

    • Apps that require more than two discount functions

    • Apps that add/remove products at checkout using Checkout UI extensions

Custom checkout logic

To integrate with custom checkout logic, you can :

  • add a checkout pipeline rule (as documented here); this is typically a good solution if you wish to execute a validation rule before proceeding to the checkout

  • use an event to trigger the checkout (as documented here); this is typically a good solution if you wish to take control of the checkout is some situations and leave Discount Ninja in control for other situations

Note: if your code redirects to the checkout by setting window.location you may want to leverage the above mentioned event as documented in the code snippet here.

Show/hide custom HTML

Discount Ninja includes building blocks that can display specific HTML content to help you promote offers.

If you need to show or hide custom HTML blocks, you can use the following classes:

  • limoniapps-discountninja-whenproductdiscounted-show and limoniapps-discountninja-whenproductdiscounted-hide: these classes can be used on product pages only; they hide or show the content of the element based on whether the selected variant is discounted by Discount Ninja or not

  • limoniapps-discountninja-whenactivepromotions-show and limoniapps-discountninja-whenactivepromotions-hide: hide or show the content of the element based on whether Discount Ninja active promotions are available for the visitor or not

  • limoniapps-discountninja-whenpromotionsincart-show and limoniapps-discountninja-whenpromotionsincart-hide: hide or show the content of the element based on whether Discount Ninja promotions have been applied to the cart or not

  • limoniapps-discountninja-whencartdiscounted-show and limoniapps-discountninja-whencartdscounted-hide: hide or show the content of the element based on whether the total amount of the cart is discounted by Discount Ninja promotions or not

Google Tag Manager Data Layer

To integrate with Google's data layer you may need to leverage the discounted price calculated by the app. The app publishes this information using an event. The following code provides an example of how you may use the data returned by that event:

// Subscribe to the event
document.addEventListener("la:dn:product:discount:calculated", function(event) {
    // Retrieve the data about the product after discounts have been calculated
    const productVariantPriceInfo = event.detail.data[0];
    const discountedPrice = productVariantPriceInfo.discountedPrice;  
    console.log('Discounted price is ' + discountedPrice, productVariantPriceInfo);
    
    // Your code to integrate with the data layer goes here
    // ...
});

Drawer cart split line items

When your cart contains multiple items of the same product variant, Shopify will split those items into multiple rows in the cart (and drawer cart) when:

  • Line item property: One of the items has a different line item property (for example: 1 item has Color 'blue', the other item has a different value for 'Color' or does not specify a value for this property)

  • Selling plan: One of the items is sold using a selling plan (subscription) and the other is not

  • Discount: One of the items has a server-side discount associated with and the other does not

Discount Ninja applies hidden line item properties to BOGO and GWP products. This causes Shopify to split those lines.

To be able to change the quantity for each of those split lines individually, it is important that your theme updates quantity based on the key of the line item. The key of a line item is unique (also for split lines). If you update quantities based on the variant then Shopify will update the quantity of all lines that contain that variant, which leads to unexpected results.

See Shopify's documentation for more details:

Drawer cart

Discount Ninja applies discounts using Shopify Functions. Most (if not all) themes have support for visualizing the discounts applied in this way. However, they require that the page is refreshed to render those discounts. This doesn't provide the desired customer experience.

To ensure the drawer cart immediately reflects the discounts, you'll need to:

Last updated