Klarna Docs - Manual On-site messaging integration on Shopify (NOT recommended)

Manual On-site messaging integration on Shopify (NOT recommended)

This type of integration is NOT recommended and should only be used when confirmed that the On-site messaging app can’t work on a Shopify store

If the app is not compatible with your store (e.g. some app or code in your store blocks the app preview, JavaScript errors prevent the app code from running such as InstantClick), you can directly integrate Klarna On-site messaging manually instead of using the Shopify app use custom code for your store, or use a combination of the app (for the JavaScript and refresh placements) and custom code.  This approach is NOT recommended, and should only be used when confirmed that the On-site messaging app can’t work on a store.

If directly inserting On-site messaging into a Shopify theme without the app, to be legally compliant with accurate on-site messaging,  make sure to code for refreshing the placements when variants change.  Note: If the app code is still active, the app will refresh both manual placements and app placements when variants change, but manual placements will only display if the app has one active placement (even if that doesn’t display on the front end). 

Add the Klarna On-site messaging JavaScript library to the Shopify store

To add the merchant-specific JavaScript library to the Shopify store, see documentation about On-site messaging installation. The merchant’s specific JavaScript library can be retrieved from the Klarna Merchant Portal.  Documentation about adding JavaScript to a Shopify store via a POST API call is available at: https://help.shopify.com/en/api/reference/online_store/scripttag

Below is an example BODY of the POST call to add a new script to a Shopify store, e.g. https://yourshopifystorename.myshopify.com/admin/script_tags.json:

JSON
{
  "script_tag": {
    "event": "onload",
    "src": "https:\/\/na-library.klarnaservices.com\/merchant.js?data-client-id=711111-222222-333333"
  }
}

Example POST call body that adds a new script to a Shopify store

Add placement to the theme

The appropriate theme files to update with Klarna On-Site Marketing placement tags & refresh code are dependent upon the Shopify theme you are using. For an example, using the Brooklyn theme, both the klarna-placement tag and refresh code are put into product.liquid.   The appropriate liquid variable for the product price, which is also dependent on the store’s theme, must be used for the placement.  In the example below, current_variant.price the appropriate variable.  Depending on your store’s theme and section of code, you may use variant.price, current_variant.price, or another liquid variable.  

Below is an example of placement code for a Shopify theme, which is also available in the Klarna Merchant Portal, and documented at: installation

MARKUP
<!-- Placement v2 -->
<klarna-placement
    data-key="credit-promotion-standard"
    data-locale="en-SE"
    data-purchase-amount="{{ current_variant.price }}"
></klarna-placement>
<!-- end Placement -->

Example placement code for a Shopify theme

Refresh placements when variants change

If your store has products with variants, you will also need to add code to update the on-site messaging placement when the customer selects a different variant, as documented on the faq.

Below is an example of refresh code:

JAVASCRIPT
document.getElementsByTagName("klarna-placement")[0].setAttribute("data-purchase-amount", variant.price);
window.KlarnaOnsiteService = window.KlarnaOnsiteService || []
window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' })

Refresh code example