FAQs

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/

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

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

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.

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

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

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.  

Dynamic placements are not supported for Home or Static or Collections 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.

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:

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

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

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 JavaScript function, and pass the value of the new purchase amount.

window.KOSMApp.updatePurchaseAmount(updatedPurchaseAmount);

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

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.

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.

You can also review your store's Online store speed (from Settings -> Online Store).

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

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.

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. Compatability greatly improves with themes supporting Shopify's Online Store 2.0 architecture, using App Blocks, but the app still supports vintage themes also. 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 functionality is still dependent on the code to which the app is integrating.  

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

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:

• verify that your geolocated locale is supported for you store's single base currency (since currently only a single currency can be accepted for Klarna orders); you can check the locale identified with consoleDebug logging, and also test by setting your locale in the session variables to any desired country
• 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.
• 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.

This app does not inject on-site messaging for mini-cart or pop-cart pages for the Cart page type Ad Position or Cart App Block. For mini-carts, please see this mini-cart documentation. If you have an active cart placement, verify that on-site messaging is displayed on the full page cart, e.g. https://{store name}/cart

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

<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:

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.

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 customized so that the following JavaScript function is called (and passed the updated purchase amount) within appropriate theme JavaScript code that is triggered by the theme when variants change:

window.KOSMApp.updatePurchaseAmount(newPurchaseAmount);

For product pages, the placement is not updated (refreshed) when the product quantity changes, as the decision was to always match the product price.

For cart pages, the placement should update when the product quantities change to match the cart total.

For other pages (home, static, collections), non-amount based (static) placements are used, so there is no need to update the placement price.

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.

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.

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.

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.

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:

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.

As of 2022-Dec-13, "KlarnaThemeGlobals" code is no longer inserted into a shop's theme.liquid file

If storefront pages display the fallback placement (e.g. top-strip-promotion) instead of the desired, configured dynamic (amount based) placement, verify that the app code can retrieve the product's price.

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.  

For themes that support Shopify's Online Store 2.0 architecture, App Blocks work best for adding on-site messaging, and won't have error messages about risky ad positions.

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

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:

For the error "Warning: This Ad Position may not work, as it was not found when the page was loaded initially.”, one possible reason is the JavaScript library being lazy loaded, which is not compatible with this app.