Customization

How to customize content and placements
Supported customization
Frequently Asked Questions

On-Site Messaging: Customizing Content

Certain supported content in the On-Site Messaging Platform can be customized to better suit the look and feel of the website it is displayed on.

Most common promotions support some level of customization, while content specific to the Klarna brand is more restrictive.

The look and feel of content can be set at the placement level through the On-Site Messaging App in the Merchant Portal . Changes made in the portal and published will be live immediately.

How to customize content and placements

Log into the Merchant Portal app

Navigate to the placements page and select the placement to customize by clicking the Custom Design button

Preview changes to make sure everything is correct

The customized content will be validated for contrast and readability. Hints will be displayed if a selection is not supported.

Once you are happy with the design changes, click Publish and Confirm. Your changes will be live immediately.

Setting a theme in the placement tag overrides any custom design content. Read more about themes .

You can reset to the default at any time.

Supported customizations

The list below details what can be customized:

Text

AttributeValueNote
Attribute
Font
Value
Klarna text
Klarna sans
Arial
Helvetica
EB Garamond (serif)
Note
 
Attribute
Text alignment
Value
Left, Right, Center
Note
 

Body Text

AttributeValueNote
Attribute
Color
Value
(hex value)
Note
Limited by readability
Attribute
Font size
Value
10-24 px
Note
 
Attribute
Line height
Value
10-24 px
Note
Cannot be lower than font size
Attribute
Emphasis
Value
Regular, Medium, Bold
Note
 
AttributeValueNote
Attribute
Color
Value
(hex value)
Note
Limited by readability
Attribute
Font size
Value
10-24 px
Note
 
Attribute
Line height
Value
10-24 px
Note
Cannot be lower than font size
Attribute
Emphasis
Value
Regular, Medium, Bold
Note
 
AttributeValueNote
Attribute
Color
Value
(hex value)
Note
Limited by readability
Attribute
Emphasis
Value
Regular, Medium, Bold
Note
 

Background

AttributeValueNote
Attribute
Color
Value
(hex value)
Note
 

Border

AttributeValueNote
Attribute
Color
Value
(hex value)
Note
 
Attribute
Width
Value
0-3 px
Note
 
Attribute
Radius
Value
0-29 px
Note
 

Padding

AttributeValueNote
Attribute
Top
Value
0-15 px
Note
 
Attribute
Bottom
Value
0-15 px
Note
 
Attribute
Left
Value
0-15 px
Note
 
Attribute
Right
Value
0-15 px
Note
 
AttributeValueNote
Attribute
Color
Value
true
Note
Limited by readability

Frequently Asked Questions on Customization

I have published a new version, but when I visit the website I still see the old design.

Make sure you do not have a theme set that would override the custom content. Also, make sure to clear your browser cache. Browsers may cache the content for up to 24h.