Manual On-site messaging integration on Shopify

If the app is not compatible with your store (e.g. if an app or code specific to your store blocks the app preview or 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.  

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). 

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:

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

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

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

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:

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