Klarna Docs - Install steps

Install steps

The Klarna On-site messaging app is available on the Shopify App Store.

If your shop domain is matched in our data, your account will be connectd for you. If not, you can enter your Klarna merchant id manually.

If you haven't yet integrated Klarna Payments for Shopify, see instructions at: Payments on Shopify. If you don’t yet have Klarna API credentials, you can sign up at http://klarna.com/business

If your store uses a theme that supports Online Store 2.0 app blocks, from your shore admin -> Sales channels -> Online store, click the "Customize" button to add a "Klarna Placement" app block to your desired theme templates. From the select box in the top center of the theme editor, select the desired theme, e.g. Products -> "Default product". Then on the left menu, use the "Add block" option to add a "Klarna Placement", available under the "APPS" option, as shown in the screen shot below.

After inserting the block, drag the SKOSM ‘Klarna Placement’ App Block to the desired location in the template (e.g. below Price).

You can edit the configuration options within the Klarna Placement app block. For further instructions of configuration options, see the App Block instructions from the app's Dashboard.

If your store is using a vintage theme (that does NOT support Online Store 2.0), from the Klarna On-site messaging Dashboard, click the “New Ad Position” button

  1. If desired, enter a name for your Shopify Ad Position or use the default timestamp for the name.
  2. If your country is not already defaulted, select the country that matches your Klarna API credentials. (Make sure to select a country that uses the matching currency for your store.)
  3. The locale is defaulted, but you can set it manually if desired.
  4. Select your desired placement; the dynamic amount-based ‘credit-promotion’ is recommended for Product and Cart pages.
  5. The app will automatically pick a placement it finds as best fit for your theme, but if this doesn't work, you can instead drag and drop the pink box to the desired placement on your page, OR if neither of those options work well for your theme & page, enter a CSS element manually.  
  6. Check the consent box “I have checked the preview...” and click the Save button.
  7. Confirm the modal pop-up window that changes take a few minutes before they will display on your storefront.
  8. Review the On-site messaging at your storefront.
  9. Repeat the above steps for your cart page, and any other pages (home or static) as desired.

Do not add padding or change the alignment, unless necessary.  Before adjusting these settings, check how the Shopify Ad displays on your store by viewing your storefront in a browser.  The Preview shows how the Ad may display but can not render the page exactly as shown in an actual browser session.

Note: you don’t have to code for placements to be updated when variants change on the product page or quantities change on the cart page, this app already included that for you.  

We recommend testing in a new incognito window to avoid caching and waiting a few minutes after changes are made to give the code time to update the storefront.

When using this 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 prevent the Shopify On-site messaging app from working.

Problems?  Email skosm@klarna.com for further help.

We are developing adding additional features for this On-site messaging app, to help mitigate the constraints of the new payments integration. By extending the accesses for this On-site messaging app, and also using a direct Klarna alternative payments method integration using the "Klarna" app, you will enable additional functionality for this app. (If desired, you can at any time, uncheck the option and then remove the additional accesses.) By extending access scope, this app will have access to protected customer data, such as the Shopify order. We access minimal data as needed for features below. Additional features include:

  • Available as of 2022-Oct-11: query the Shopify order to update the Klarna merchant reference 1 field to the corresponding Shopify order name (this is supported for stores using Shopify's standard checkout, in progress to support this for all stores soon)
  • Available as of 2022-Nov-3: set the Klarna order id on the Shopify order (as a Shopify order note)
  • Add additional order line data (i.e. product URL, image URL) to the Klarna order (currently applicable for most stores, in progress to support all stores soon if possible)

Optional configuration to extend access to provide additional permissions for this app to enhance functionality

When extending access, the details of the access changes are listed when the app is updated

If Extended Access for a shop was granted prior to release of some of the extended functionalities in the list above, the permission scopes for the shop may be insufficient for the all the features available. To grant the additional required scopes:

  • uncheck the "Extended access scopes" and save
  • reload the page
  • re-check the "Extended access scopes"
  • update the app to save the changes with the new scopes

Most customizations of the look and feel of On-site messaging are done in the Klarna Merchant Portal; these customizations affect the contents within the placement. (Note: The defaulted “Light” theme MUST be selected in the app for the customized placement to display on the storefront; the “Dark” theme will instead use the non-customizable, dark placement.)

A few customizations (Padding & Alignment) affect the placement itself (not the contents within the placement), and these are available in the app in your Shopify admin. Customizations in the app vs. the Merchant Portal impact the placement differently, and both types of customizations may need to be configured for the desired result, e.g. the Merchant Portal placement text alignment (within the placement) and the app Ad Position alignment (for the placement on the page). (Note: only some Klarna placements support text alignment within the placement, and some themes may not honor the styling for placement alignment on the page.)

For Shopify Plus merchants, klarna-placement code can be added within your Shopify checkout theme files to display On-site messaging within checkout. On-site messaging within Shopify checkout is not currently supported within the On-site messaging app.

As of 2021, the app defaults to a dynamic locale configuration option, Geolocation. (Static locale options are still available: 'Manual Locale' for Online Store 2.0 App Blocks, or 'Auto-select' or 'Select locale' with Vintage Ad Positions.) With the Geolocation setting, a single on-site messaging placement can be displayed in a different language based on customer geolocation data. Since a user's country is required for the on-site messaging placement's data-locale, that country is set to the user's geolocation. Based on the supported locales for on-site messaging for that country, the language is chosen (either using the Shopify storefront language or the browser's language, based on the Ad Position's configuration setting) to use for the klarna-placement on-site messaging code injected into the storefront page.

Note: for stores with base currency of EUR, when using locale set to Geolocation, for Klarna On-site messaging using Online Store 2.0 App Blocks, the enabled EURO countries are defaulted, but can be configured within the app's "App Block Instructions" for use for all Klarna On-site messaging App Blocks. For vintage Ad Positions, the enabled EURO within the for each Ad Position.

If the customer's selected language (either the customer's browser language or Shopify language) is not supported for the country, English is used as a fallback. You can review the locale set for the placement in the browser tools -> Elements (but not the HTML source of the page); search for 'klarna-placement'.

If testing geolocation when your computer is not located in the desired test region, you could use a VPN or set your desired region by entering this code in your browser's Console developer tools and reload the page for the change to take affect:

JAVASCRIPT
window.localStorage.setItem('klarnaosm_user_locale', 'SE')

To debug app issues or review app functionality, you can optionally add browser console logging for this app by appending "?consoleDebug=true" (or "&consoleDebug=true" if there are already parameters in the URL).