Customization
How to customize content and placements
Supported customization
Using your own font
Frequently Asked Questions
On-Site Messaging: Customizing Content
Certain supported content in the On-Site Messaging 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
Attribute | Value | Note |
---|---|---|
Attribute Font | Value Klarna textKlarna sans Arial Helvetica EB Garamond (serif) | Note |
Attribute Text alignment | Value Left, Right, Center | Note |
Body Text
Attribute | Value | Note |
---|---|---|
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 |
Legal Text
Attribute | Value | Note |
---|---|---|
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 |
Link
Attribute | Value | Note |
---|---|---|
Attribute Color | Value (hex value) | Note Limited by readability |
Attribute Emphasis | Value Regular, Medium, Bold | Note |
Background
Attribute | Value | Note |
---|---|---|
Attribute Color | Value (hex value) | Note |
Border
Attribute | Value | Note |
---|---|---|
Attribute Color | Value (hex value) | Note |
Attribute Width | Value 0-3 px | Note |
Attribute Radius | Value 0-29 px | Note |
Padding
Attribute | Value | Note |
---|---|---|
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 |
Logo
Attribute | Value | Note |
---|---|---|
Attribute Color | Value true | Note Limited by readability |
Using your own font
Click “Use your own font” (below the font selector). A modal for declaring your font will be opened.
Enter your custom font css into the text input. This needs to be valid css and contain only @font-face rules with the following properties:
Attribute | Value | Note |
---|---|---|
Attribute font-family | Value string | Note |
Attribute src | Value url | Note Make sure this is a valid font URL on a CDN |
Attribute font-weight | Value 1-1000 | Note |
Example of valid font css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
@font-face { font-family: "Klarna Text"; font-weight: 400; src: url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Regular.woff2") format('woff2'), url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Regular.woff") format('woff'); } @font-face { font-family: "Klarna Text"; font-weight: 500; src: url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Medium.woff2") format('woff2'), url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Medium.woff") format('woff'); } @font-face { font-family: "Klarna Text"; font-weight: 700; src: url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Bold.woff2") format('woff2'), url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Bold.woff") format('woff'); }
Italic font-style need to be added as an @font-face with different font-family in order to be supported.
Example using italic font
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
@font-face { font-family: "Klarna Text Italic"; font-weight: 400; src: url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Italic.woff2") format('woff2'), url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Italic.woff") format('woff'); } @font-face { font-family: "Klarna Text Italic"; font-weight: 500; src: url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-MediumItalic.woff2") format('woff2'), url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-MediumItalic.woff") format('woff'); } @font-face { font-family: "Klarna Text Italic"; font-weight: 700; src: url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-BoldItalic.woff2") format('woff2'), url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-BoldItalic.woff") format('woff'); }
You can only have one custom font css per MID and country. This can contain any number of fonts, only constrained by character count. Once added fonts will be available for all placements that support customization.
Check the preview and if everything looks correct, click “Confirm”. When updated and saved correctly a success message will appear. Click “OK” to close.
You can now use the added font-family from the font selector.