Klarna Docs - How to install the Klarna On-site messaging Shopify app

How to install the Klarna On-site messaging Shopify app

Read this guide to learn how to add the Klarna On-site messaging Shopify app to your Shopify store.

The installation process of the Klarna On-site messaging (OSM) Shopify app consists of three main steps:

  1. installing the app from the Shopify app store
  2. connecting your Klarna account to the app
  3. adding placements to the store’s layout in the Shopify admin

Note that this installation guide is applicable for stores compatible with the Klarna OSM Shopify app. If your store isn’t compatible with the app, you can install Klarna On-site messaging manually using JavaScript to have placements displayed in your store. For more details, refer to the manual OSM installation guide.

1. Install the Klarna On-site messaging Shopify app

Install the Klarna On-site messaging app from the Shopify App Store.

2. Connect your account

If we find a match for your shop’s myshopify.com domain in our data, your account will be connected for you. If not, you can enter your Klarna merchant ID (MID) in Shopify store admin > Apps > Klarna On-site Messaging > Settings and select your region manually to connect the account.

If you haven't integrated Klarna payments for Shopify yet, follow the instructions in this Klarna.Docs article.

The screenshot of Shopify store admin after a merchant links a Shopify store to their Klarna MID.

A Klarna merchant account linked to a Shopify store.

3. Add placements

Placements are containers for the different messaging assets we offer. Placements are either dynamic, that is, the messaging is updated based on the purchase amount, or static, meaning that the messaging isn’t linked to the amount and isn’t updated dynamically.
You can add placements to the following types of pages in your Shopify store:

  • Product Page supports amount-based (dynamic) and non-amount based (static) placements
  • Cart Page supports amount-based (dynamic) and non-amount based (static) placements
  • Home Page supports non-amount based (static) placements
  • Collections Page supports non-amount based (static) placements
  • Static Page supports non-amount based (static) placements

If you’re not sure which placements to pick, see the answer in our Frequently asked questions. 

Online Store 2.0 app blocks

If your store uses a theme that supports Online Store 2.0 app blocks, perform the following steps to add OSM placements:

  1. In your Store admin > Sales channels > Online store, click the Customize button to add a Klarna Placement app block to your desired theme templates. 
  2. From the select box in the top center of the theme editor, select the desired theme, for example, Products > Default product. Then, in the left-side menu, use the Add block option to add a Klarna Placement, available under APPS, as shown in the screenshot below.
A screenshot from the Klarna On-site messaging Shopify app showing the App Block inside a product template.

After inserting the block, drag the Klarna Placement App Block to the desired location in the template.

3. After inserting the block, use the 6 dots to the far right to drag the Klarna Placement App Block to the desired location in the template, for example, below Price.

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

The configuration options available within the Klarna Placement app block.

The configuration options available within the Klarna Placement app block.

Vintage themes

The preview window is no longer supported inside the Klarna On-site messaging app. This affects the usage of the Auto Picker and Drag and drop installation methods.

If your store doesn’t support Shopify Online Store 2.0, we recommend configuring your On-site messaging with App Blocks or using the CSS installation method.

If your store is using a vintage theme that doesn’t support Online Store 2.0, perform the following steps to add on-site messaging placements:

1. From the Klarna On-site messaging (OSM) Shopify app’s Dashboard, click the New Ad Position button.

2. Enter a name for your Shopify Ad Position or use the default timestamp for the name.

3. If your country isn’t 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.

4. The locale is selected by default, but you can change it manually if desired.

A screenshot of the Select Locale setting in New As Position's Dashboard.

The Select Locale setting is available in the the New Ad Position panel's Dashboard.

5. Select your desired placement type. For Product and Cart pages, we recommend the dynamic amount-based credit-promotion placement.

6. The app will automatically pick a placement it finds as best fit for your theme. If this doesn't work for your theme and page, find a CSS element, either class or id, on the page. The placement will be placed immediately above the specified CSS element.

7. Check the consent box “I have checked the preview...” and click Save.

8. Confirm in the modal pop-up window that changes take a few minutes before they will display on your storefront.

9. Review the messaging on your storefront. As there is no caching, we recommend that you open an incognito window to review immediate changes.

10. Repeat the above steps for your cart page, and any other pages (home or static) as desired.

Don’t add padding or change the alignment unless necessary. Before adjusting these settings, check how the Shopify ad displays in your store by viewing your storefront in a browser. Check both the desktop and mobile view to make sure the placement is displayed correctly in both.

Note that you don’t have to add code for placements to be updated when variants change on the product page or quantities change on the cart page. The update functionality is already included in the Klarna OSM Shopify app.

We recommend that you test the placements in a new incognito window to avoid caching. Additionally, wait a few minutes after you make the changes to give the code time to update the storefront.

When using the Klarna OSM Shopify app, don’t manually update your store’s theme files with code from the On-site messaging section in the Klarna Merchant portal as that will prevent the Klarna OSM Shopify app from working.

If you have problems with adding the placements, contact your region’s Klarna merchant support team.

In summary:

  • The installation process of the Klarna On-site messaging (OSM) Shopify app involves installing the app from the Shopify app store, connecting your Klarna account to the app, and adding placements to your store's layout in the Shopify admin.
  • If your store is not compatible with the app, you can manually install Klarna On-site messaging using JavaScript.
  • Placements can be added to various pages in your Shopify store, such as the product page, cart page, home page, collections page, and static page. There are different types of placements available, including dynamic and static placements.