---
url: >-
  https://acquirer-api-docs-v4-en.pingpongx.com/en/notes/saas/Shopify/Klarna/OSM/index.md
description: >-
  Installation and configuration guide for Klarna's OSM plugin, applicable to
  Shopify stores, helping merchants enhance customer payment experience through
  on-site messaging. The document details how to install the Klarna OSM App from
  the Shopify App Store and integrate the plugin in Shopify 2.0 themes,
  including adding Klarna OSM locations, accessing application blocks and
  configuring display positions.
---
# How to Install and Configure Klarna's OSM (On-Site Messaging) for Your Shopify Store

## Installing Klarna OSM App

You can install the Klarna OSM App from the Shopify App Store using the following steps:

1. Go to your Shopify admin panel, navigate to: Settings > Apps & Sales Channels > Shopify App Store.
2. Search for Klarna and select Klarna On-Site Messaging to install.

![Install Klarna OSM](https://roshanx.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9376b670-4323-4d49-9567-31bb9d1c0cb0%2FUntitled.png?table=block&id=85f6247a-a241-4707-abd0-caa4bb58255d&spaceId=f552184c-e2ab-4c8a-a5e1-c177f3917dcb&width=1220&userId=&cache=v2)

If your store already has Klarna integrated for payment functions, the application will connect automatically. If not, the system will ask you to enter your Klarna merchant ID and manually connect the account.

## Shopify 2.0 Theme Integration

With the launch of Shopify Online Store 2.0, you can add Klarna OSM locations together with the OSM App through the Shopify theme customizer. This can be achieved by directly adding a Klarna App Block to the page.

![Shopify 2.0 Integration](https://roshanx.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fbb180d8f-e563-4c34-8356-02f5ba815775%2FUntitled.png?table=block&id=b38db6ee-7c03-4b10-be1b-c0765cee1dd9&spaceId=f552184c-e2ab-4c8a-a5e1-c177f3917dcb&width=1220&userId=&cache=v2)

## Accessing Application Blocks

For stores that can use the Klarna On-Site Messaging application block, a popup window will appear when opening the Klarna app, letting you know that a Shopify 2.0 theme has been detected.

![Detect Shopify 2.0 Theme](https://roshanx.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd0210051-1dac-43ce-b19b-f8cd07abd7c3%2FUntitled.png?table=block&id=751de6fa-b1f0-4046-9a51-57f5433f2461&spaceId=f552184c-e2ab-4c8a-a5e1-c177f3917dcb&width=1220&userId=&cache=v2)

## Adding Klarna OSM

Navigate to the page where you want to add Klarna OSM using the preview window. If you wish to add it as a separate section, click "Add block", then select "Klarna On-Site Messaging" from the application list.

![Add Klarna OSM](https://roshanx.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6b3e2691-87ba-455e-a412-1dc37c0c9ac7%2FUntitled.png?table=block&id=e327f7a8-333b-4d8e-b7b6-c7321d260d86&spaceId=f552184c-e2ab-4c8a-a5e1-c177f3917dcb&width=1220&userId=&cache=v2)

## Configuring Locations

Configure locations through the Klarna On Site Messaging application. There are three installation options: automatically select the best location, drag the preview box to select the location, or CSS positioning.

![Configure Location](https://roshanx.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fce7a4d7c-98ed-4297-89bc-74f6f25e9ac3%2FUntitled.png?table=block&id=22ecafa6-2f36-4f5e-8b56-ab17beb7848b&spaceId=f552184c-e2ab-4c8a-a5e1-c177f3917dcb&width=1220&userId=&cache=v2)

## Frequently Asked Questions

- **Q: I set up CSS in traditional mode, but after saving, Klarna's OSM doesn't appear on the page. What's the issue?**
  - This may be because the CSS selector is incorrect or not properly applied.

- **Q: My website is built with Pagely. Are the above methods applicable?**
  - Pagely may have its specific integration method, so the above methods may not apply.

- **Q: Why do some product pages show the message while others don't, even with the same settings?**
  - This may be because the CSS selector is not universal enough and needs adjustment to match all products.

See also:
<a href = "https://roshanx.notion.site/Klarna-OSM-bc6bbd123731423c972e1e07ae5e43cd">Installation and Configuration Guide for Klarna's OSM Plugin</a>