With On-site messaging, banners inform your customers which payment and financing options are available before they reach the checkout page.
The Klarna extension includes the logic that makes the following adjustments possible:
- Placement position: placements can be shown on the cart page or product detail page
- Placement design: you can modify the look and feel of the banner
- Design theme: you can set a theme to override the default or customized content
You can configure the position and design of the placements in Stores > Configuration > Sales > Payment Methods > Klarna > On-site Messaging
Retrieve the identifier for On-site messaging from the Klarna Merchant Portal, where you also can Allowlist your shop domain in the Klarna Merchant Portal, as documented here.
Enable On-site messaging in your Adobe Commerce Admin.
For more information about On-site messaging, refer to the product documentation.
You decide where to display messaging in your store. It can be shown only on the cart page, only on the product detail page, or on both pages.
Tip: If there’s an error, for example, with the API, on messaging won’t appear until the error is fixed.
Each store can look different and you can choose a design that best matches your store. For example, you can change the width and height of the messaging banner.
The design is predefined on Klarna’s side and the information about it is returned through the API. No manual work is needed except choosing the design.
In Adobe Commerce, you can set a banner theme to override the default or customized content in the shop. For example, based on custom styling, the text font and color can be configured so that the banner fits the current shop theme.
You can customize the banners in the Klarna merchant portal or by editing the CSS code.
To enable the display of Klarna promotional messages in your storefront, perform these steps:
1. In the Adobe Commerce Admin, expand the Klarna On-Site Messaging section.
2. Set Enable to Yes.
3. In the Data client ID field, enter the data-client-id hash value from the code that you copied while in the Klarna merchant portal.
4. Enter the Design theme that you want to apply to Klarna promotional messages. The value, for example, data-theme="dark", can be retreived from the placement code in the Klarna merchant portal.
5. To enable Klarna promotional messaging for product pages, set Enable on product to Yes.
6. To determine the location and style of Klarna promotional messages on the product page, set Product placement to the type of script that you copied from the Klarna merchant portal.
7. The placement value corresponds to the data-key field in the script you chose. For example, the data-key="credit-promotion-badge" value in the code corresponds to the Credit Promotion - Badge option. If you have a customized promotion, choose Other. You will need to provide your own custom script.
8. To enable Klarna promotional messaging for the shopping cart page, set Enable on cart to Yes, and repeat the previous step.
9. When complete, click Save Config.
Configure On-site messaging in the Adobe Commerce Admin.
If On-site messaging is enabled, do the following to paste the scripts that you copied from the Klarna merchant portal:
1. In the Adobe Commerce Admin, go to Marketing > Design > Configuration.
2. In the list, find the store configuration that you want to update and click Edit.
3. Under Other Settings, expand the HTML Head section.
4. In the Scripts and Style Sheets box, paste each script that you copied from the Klarna merchant portal.
5. Click Save Configuration.