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:
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.
Install the Klarna On-site messaging app from the Shopify App Store.
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.
A Klarna merchant account linked to a Shopify store.
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:
If you’re not sure which placements to pick, see the answer in our Frequently asked questions.
If your store uses a theme that supports Online Store 2.0 app blocks, perform the following steps to add OSM placements:
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 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.
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: