Klarna Docs - FAQs

FAQs

General

What is Klarna On-site messaging?

For more info, see: On-site messaging and check out our installation guide video at https://www.klarna.com/international/business/shopify-on-site-messaging/

How do I add Klarna to checkout (prior to On-site messaging)?

See: Payments on Shopify as an alternative payment method

If you get an error about Terms of Service, please log onto the Klarna Merchant portal to accept the On-site messaging legal terms (see "Read and accepts terms of use").

US Merchant Portal

EU Merchant Portal

OC Merchant Portal

Shopify Error: Terms of Service not accepted

Shopify platform error message when no terms of service have been accepted

Which placement should I pick?

The “Credit Promotion” placement, as selected in the screenshot below, is recommended for both product and cart pages.  

Credit Promotion placement screenshot

Selecting the Credit Promotion placement on Shopify

If a placement doesn’t display content in this modal and/or if inspecting the elements of the page, the klarna-placement is found but has 0x0 content within the iframe, try another placement or check your Klarna account or contact support at skosm@klarna.com.  (0x0 content could be caused by the Klarna account being INACTIVE, the product price not within the supporting minimum and maximum values, or JavaScript manually added in the store. )

This credit promotion placement is dynamic, and showing dynamic pricing within on-site messaging, as shown in the screenshot below, will have the most impact on conversion.   In addition, the placements are customizable in the Klarna Merchant Portal, where you can configure the font, layout, and other display details to best match your store's user experience, see: On-site messaging: Customizing Content

The defaulted “Light” theme MUST be selected for customized placement in the app; the “Dark” theme will instead use the non-customized dark theme.

Placement "Light" theme screenshot

Placement in "Light" theme

(Static placement types can also work with the app though if desired, but are best suited for home or static pages.)

Klarna On-site messaging placements can be configured from the “Custom design” button in the Klarna Merchant Portal, as shown below.

Placement configuration screenshot on Merchant Portal

Custom design functionality for placement configuration on Merchant Portal

For more information about customizing your dynamic on-site messaging, see: "Customizing Content"

How do I add messaging to Home or Static pages?

The app supports placements on Home and Static pages, using the same method of attaching to a CSS element on the page, as shown in the screenshot below.  

Selecting ad position screenshot

Selecting ad position

Dynamic placements are not supported for Home or Static pages as there is no price to provide to the placement for these pages thus Credit Promotion placements cannot be selected for Home or Static Ad Positions.

Currently the app doesn't recognize subdomain pages also as Home pages, so only the main home page is currently supported.

If you'd like your store to have a dedicated static info page, you can create a page in your store (Online Store → Pages → Add page). In order to provide an accurate CSS element to use for the Ad Position, it may be easiest to edit the HTML of the new page (via the "<>" button) and add a custom CSS element:

MARKUP
<span id="KlarnaInfoPageOnSiteMessagingAppElement"></span>

Markup for a custom CSS element

Custom markup usage screenshot

Example custom CSS element in a Shopify page

If the app doesn’t work well for these pages, another option is to customize your store theme (from Online Store->Customize button), such as adding a new section with a slide show (either as a single image in the slide show or along with other images) or depending on your theme, with HTML.  Static Klarna marketing images are available at: "Marketing Assets".

What page changes update On-site messaging?

For product pages, on-site messaging is NOT updated when the product quantity is changed on the page, as the price for the product does not change; on-site messaging is based on the product price, not the product quantity.  For product pages, on-site messaging is updated when a different variant is selected.  (Note: if that is not working at your storefront, see: FAQ: Why isn’t the placement updating when I change the variant?)

For the cart page, On-site messaging is updated when product quantities are updated (and the page is updated), as On-site messaging is based on the cart total. If On-site messaging is not updated on cart quantity changes, your theme can be updated to directly call the window.KOSMApp.updatePurchaseAmount() JavaScript function.

On-site messaging does not update for static pages, which use non-amount based placements, such as the home page.

Why does On-site messaging load slowly?  (& how to make it faster)

Following Shopify’s requirements for apps for loading app asserts, the JavaScript for Klarna’s On-site messaging is loaded using Shopify’s ScriptTag API, which be confirmed by searching for the asyncLoad function in the HTML source of the storefront page.

Code screenshot for asyncLoad() function

Searching for asyncLoad() in the HTML source

 Following this standard, Klarna On-site messaging JavaScript is loaded asynchronously, after the main content of the page has loaded, and scripts are loaded in order of app install to the store.  This prevents app JavaScript from slowing the page load, but it also means that the JavaScript is loaded along with all app’s JavaScript libraries, so other apps in the store that use JavaScript affect the loading time for Klarna’s On-site messaging.   The more app JavaScript libraries that a store loads, the more time is needed for Klarna On-site messaging to load.  If On-site messaging is slow to load in a store, review installed apps to verify they are all still necessary and review all the resources loaded for the page, such as using the browser’s developer tools.  Network speed, device, location, etc. also affect load times.

Additionally and optionally, to enable the app's JavaScript (and hence the On-site messaging content) to load faster on the page together with page content instead of only loading after the page loads - per the Shopify Script tag asyncLoad functionality -, you can add the following line of code in your store’s theme.liquid AFTER the line of code with KlarnaThemeGlobals.

You can edit your theme.liquid file from your Shopify admin → Online store → Your active theme’s ‘Actions’ button → Edit code. (Upon app install, the app inserts a single line of code for KlarnaThemeGlobals into the theme.liquid above the closing </body> tag).

If this code is inserted above the KlarnaThemeGlobals code, OSM will not load (with a console debug error “[klarna-osm] Insufficient data. Exiting… ”). This error is logged whenever KlarnaThemeGlobals is not available to the app.

JAVASCRIPT
<script src="https://s3-eu-west-1.amazonaws.com/eu-production-klarna-shopify-osmp/latest-store-domain.myshopify.com.js?shop=store-domain.myshopify.com"></script>

Code to add to theme.liquid after the line of code with KlarnaThemeGlobals if you want to enable faster loading of the app's JavaScript

E.g. for klarnastore.myshopify.com, the added code would be:

JAVASCRIPT
<script src="https://s3-eu-west-1.amazonaws.com/eu-playground-klarna-shopify-osmp/latest-klarnastore.myshopify.com.js?shop=klarnastore.myshopify.com"></script>

Example code snippet for "klarnastore.myshopify.com"

This JavaScript code may be cached, so be aware when testing.

For this app to be able to update the placement when a variant changes, the theme must follow Shopify standards to allow this app to listen to the event listeners to track variant changes.  Some themes (e.g. Simple & Brooklyn) unset these event listeners, and if so, below is code to overcome these listeners being unset; this code should be added after the line where the 'latest' js file has been added in theme.liquid (or after KlarnaThemeGlobals is added) to force out input listeners to reinitialize after 100 ms.

JAVASCRIPT
<script>
     setTimeout(function() {
       if (window.KOSMApp) {
               window.KOSMApp.listenForInputChange();
       }
     }, 100);
  </script>

Where can I find the placement data on my storefront page?

Open browser’s developer tools and go to the 'Inspect' tab, you should be able to see all instances of klarna-placement; you will NOT see the klarna-placement directly in the HTML source of the page as the placements get injected into the DOM by JavaScript when a user loads the page.

What about the app’s rating?

While we’re working  hard to make the app work successfully for every merchant, there are cases when the app doesn’t work in a store, usually due to errors in the store’s theme or interference from other apps.  We’ve built this app so that merchants don’t have to write code to get on-site messaging working on their store, but the app code can only work as well as the CSS available to attach to within the store’s theme.  

If the app by itself isn’t working as desired, using a custom CSS element combined with the app allows you to place the on-site messaging in your store with just a single line of code, added to your theme in the desired location (see section “How can I get the placement in a specific location on a page?”).   See the FAQs below for common issues, but if that doesn’t resolve the problem for your store, we are always here to  support you via skosm@klarna.com

Thousands of merchants are already up and running with the app, so while our app rating isn’t as good as we’d like, the app is working well for many stores, and we will continue to work hard to earn your positive review.  If you do use the app, we would appreciate your feedback:

https://apps.shopify.com/klarna-on-site-messaging#reviews

Troubleshooting

How can I use the app with store protected by a password

For the preview page to fully display, the store must not be password protected. Stores that are password protected can still use the manual "CSS" Install method, but not the "Auto picker" or "Drag and drop" Install methods.

Why don’t I see a pink box to drag and drop?

The app makes use of Shopify’s script tag feature which allows the injection of JavaScript resources to the storefront (https://help.shopify.com/en/api/reference/online-store/scripttag).  Sometimes this code to add the required On-site messaging JavaScript into a store doesn’t insert the JavaScript as requested, particularly if the On-site messaging app was installed prior to integration Klarna Payments into checkout.  This is usually the root cause when the preview page doesn’t display the expected “Drop to place Ad” pink box.  Disconnecting the account (from the Settings tab) and reconnecting the account usually resolves this issue.

There are cases though when the app won’t work for a store to be able to display the pink box, usually when the store page has code like an automated timer or page counter.   In these cases, On-site messaging will have to be added to the store manually.

Why does On-site messaging display in the wrong currency?

Verify that the country selected for your Ad Position(s) uses the same currency as your store’s base currency, e.g. if your store is selling in EUR, please make sure to select an appropriate country that uses EUR.

Why isn’t the placement displayed on my product pages?

We recommend testing in a new incognito window to avoid caching.  Also, please wait a few minutes and refresh a few times after changes are made to give the code time to update.  

When using the app, do not manually update your store’s theme files with code from the On-site messaging app within the Klarna Merchant Portal, as that will likely prevent the Shopify On-site messaging app from working.

If the pink box displays on the app preview page, but the on-site messaging does not appear on the storefront for any pages:

  • inspect the page to check if the placement exists on the page but is hidden (such as with CSS style="display: none;"); if hidden, try a different location/CSS element to find one that is not hidden
  • verify that the store does not have any manual on-site messaging code for, such as adding <script tags or <klarna-placement tags, copied from the Klarna Merchant Portal.  Manual on-site messaging code often interferes with the app and causes the placement to not display on the storefront.   The placement may be injected, but not show content as the element is an empty 0x0 result. The on-site messaging code is available in the Klarna Merchant Portal for any merchant but adding the JavaScript library to a store is not necessary for Shopify stores using this app since the app code retrieves the necessary on-site messaging JavaScript and data real-time via Klarna API calls.
  • verify in the HTML source of the page that the KlarnaThemeGlobals code exists on the page.  KlarnaThemeGlobals is required for the app to work successfully.  The KlarnaThemeGlobals is attempted to be inserted into the theme.liquid file when the app is installed, but in order to insert this code, the app requires a valid ending </body tag in the page.  If a valid ending </body tag does not exist, it will need to be added manually and is required for a well-formatted HTML page.    If the page does have a valid ending body tag but not KlarnaThemeGlobals, disconnecting and reconnecting the account (under the Settings tab) will retry adding the KlarnaThemeGlobals in the theme.liquid
  • check for JavaScript errors as these can sometimes prevent the app from working

If the ads display for some pages but not others:

  • verify the product price is within the configured min and max of supported covered prices applicable to Klarna Payments options;  if the product price is the issue, the ad may display for some products but not others
  • Verify that the CSS element used for the Ad Position exists for all pages; if a CSS element is chosen that only exists for some pages (e.g. desktop theme pages but not mobile theme pages), the ad will only display on pages where the CSS element exists

While we’ve worked hard to build the app to work with most and many themes, if it is not able to find correct anchor tags for your theme, you can either inspect the page or view the source to manually choose a CSS element or manually editing your theme to insert the custom element.  If you need further support, email skosm@klarna.com and we can request access to your store theme to review.

Why isn’t the placement displayed on my cart pages?

This app does not update mini-cart or pop-cart pages.  If you have an active cart placement, verify that on-site messaging is displayed on the full page cart, e.g. {store name}/cart

How to have messaging at specific location (custom CSS)

Try using a different product in the preview page and dragging and dropping the pink box to a few different locations on the page to find the best CSS element for the desired location on the page.  

If those steps still don’t result in a desired location, you can add a new, custom CSS element to the specific, desired location in your theme page by updating your appropriate theme liquid file (e.g. product.liquid) in an appropriate location, e.g.:

MARKUP
<span id="ShopifyKlarnaOnSiteMessagingAppElement"></span>

This can be a one line code change to your theme, but this above span code will not display on the storefront if added in an appropriate location but gives a specific anchor location for the Ad Position to attach to that is consistent across all the applicable storefront pages.   Be careful to add in a reasonable location (i.e. not within JavaScript or other code functions) to not break code within your theme.  Theme developers or Klarna Merchant Support can help with this step if needed.

Once the element exists in the theme page, go to the app and update the Ad Position (bottom right of page) → CSS selector and specify the anchor element as your custom CSS element (#ShopifyKlarnaOnSiteMessagingAppElement), as shown in the screenshot below:

Screenshot of defining a custom anchor CSS selector

Anchor element for custom CSS selector

If the placement doesn’t display on the storefront, view the HTML source of the page and search for your custom element (“ShopifyKlarnaOnSiteMessagingAppElement”).  If it does not exist, edit the theme liquid files to put the custom CSS element in a  location that does exist for the page.

Why isn’t the placement updating when I change the variant?

The app will attempt to update the price attribute of the placement when variants are changed. The app will then call the refresh-placements event on the KlarnaOnsiteService data layer. For the app to detect changes in variants and to retrieve the price, the shop theme must be configured in a way that appends the variant id to the URL (e.g https://myshop.com/products/test-product?variant=1234567890123). The way that the app detects changes in variants is by listening to input/select elements. In cases where the theme is using a different/custom approach, the theme must be edited so that the following function is called within appropriate JavaScript code that is called by the theme when variants change:

JAVASCRIPT
window.KOSMApp.updatePurchaseAmount();

Messaging disappears after switching theme

Klarna On-site messaging for a Shopify store utilizes CSS data within a theme.  If the theme is changed for a store, all active Ad Positions are deactivated by the Klarna On-site messaging app by default.  After changing themes, merchants will need to reactivate, and possibly reposition, on-site messaging in the app using the new theme.

The app does have a configurable setting to enable merchants to deactivate the functionality that deactivates placements, see screenshot below, but as described, it is recommended that merchants test after theme changes.

My country isn't listed in the select box

When the app is first installed, it connects to a Klarna endpoint based on the Shopify store’s base address, which drives the available list of countries in the app.  If those countries are not the appropriate countries for your Klarna account, use the “Disconnect Account” button under the app Settings, and reconnect the Account with the appropriate endpoint as shown in the screenshot below:

Why are there no placements for the selected country?

In the Settings tab of the app, verify that the environment (test/playground vs. production) used for the Klarna Payments integration matches the Klarna Account configured for the On-site messaging app.  For a store integrated with Klarna Payments, the same environment for Klarna Payments is enforced for the On-site messaging app.  If appropriate, you can update the environment for the Klarna Payments integration at https://www.klarnapayments.com/install or from the Klarna Payments app in the Shopify store, but note that the Klarna Payments integration for Shopify requires the Klarna API credentials (i.e. merchant id) and Shopify store name both be unique; these cannot be shared or duplicated across stores.   We recommend using Klarna API test credentials for test stores and production credentials for live stores.

Error messages

“Risky Ad Position” error message in preview?

If you get an error message when moving the position, such as the example error shown below:

Try a different position on the page and you can also try a different preview product for the Shopify Ad.   The Ad position attaches to a CSS selector on the page, which should be a CSS option that is available on all product pages.  The chosen CSS selector can be viewed in the CSS section.  If dragging and dropping doesn’t find a good CSS selector, you can manually enter an appropriate CSS selector from your page, or if the Ad is already the desired position, review the front end store view and verify that it is working correctly across products.  

Failed to install global code snippet

If you receive the “Failed to install global code snippet in your theme.liquid file” error per screenshot below, verify that your theme.liquid file has an ending `</body>` tag. When attempting to inject theme globals, the app looks for this tag and inserts the script just before it. If this tag is not found this error is returned.  To resolve, the theme.liquid should be updated to include an ending `</body>` tag and then the Klarna account can be disconnected and reconnected to properly insert the required global code snippet.

Alternatively, the KlarnaThemeGlobals code could instead be manually moved to after the opening <body> tag in the theme.liquid

JavaScript console error: getRandomValues

If klarna-placement exists in the page Elements but doesn’t display on the storefront, check the browser console for JavaScript errors. If this error is found: “Uncaught (in promise) TypeError: Cannot read property 'getRandomValues' of Undefined”, update the store to not overwrite the window variable.  On-site messaging code expects expects window.self to proxy the window object as per specification at: https://developer.mozilla.org/en-US/docs/Web/API/Window/self

This error can also be debugged by entering “window.self” into the console.  Window.self is expected to return data as below, which could be tested in browser console at https://klarnastore.myshopify.com

JAVASCRIPT
Window {parent: Window, opener: null, top: Window, length: 1, frames: Window, …}

These warnings can be ignored in the app preview; only warnings in your storefront should be reviewed.   These warnings are due to cookies not set by this app, so these warnings can’t be resolved by the app.

Below is a copy of the error message for reference:

A cookie associated with a cross-site resource at https://shopify.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details athttps://www.chromestatus.com/feature/5088147346030592 andhttps://www.chromestatus.com/feature/5633521622188032.