Klarna Docs - Customise placements with CSS

Customise placements with CSS

The purpose of this guide is to provide instructions on how to style the On-site Messaging placements that appear on your pages through CSS to make them align with the look and feel of your page.

We do not provide support for styling the informational modal that appears after a user clicks on a click-to-action button. This is because we believe that this area is for informing customers about the financial services provided by Klarna and we want to maintain Klarna's branding.

If you have already styled the placements using the Merchant Portal, we recommend resetting those styles if you plan to use CSS. The ::part API CSS styling has a higher specificity than the styles applied through the Merchant Portal, so any styles applied with the ::part API will overwrite the styles applied through the Merchant Portal. This ensures that your CSS styles will take precedence and will be applied as intended.

On-site messaging renders its content within a shadow-dom to prevent the leaking of styles to the pages that host the placements. This ensures that the styles on the host pages do not interfere with the content of the on-site messaging.

On-site messaging rendered inside a shadow-dom

On-site messaging rendered inside a shadow-dom

To enable styling of the placements with CSS from outside the shadow-dom, we use the ::part API to expose certain elements of the placements that can be styled. Only elements of the placement that have the part attribute can be targeted with CSS for styling purposes. This allows you to customize the appearance of the placements without interfering with the content within the shadow-dom.

The Part API has some limitations to be aware of:

  • You cannot style an element that does not have a part attribute
  • You cannot target elements that are nested within an element that has the part attribute. For example, the following CSS selector will not work: klarna-placement *::part(osm-container) p { ... }
  • You cannot query the elements that have parts with JavaScript. For example, the following code will not work: querySelector('::part(osm-cta)')

    Keep these limitations in mind when using the Part API to style the placements.


To add CSS styling, you must have access to the source code of your website. We also recommend adding an ID to the klarna-placement element to make it easier to target the elements for styling. This will allow you to customize the appearance of the placements without affecting the rest of the page.

It is your responsibility to ensure that styling the on-site messaging with CSS does not compromise the accessibility of your website. For example, you need to verify that the contrast between the message and the background is sufficient for people with low vision to read the message. You can use Chrome Devtools to help detect any accessibility issues.

When styling the on-site messaging, you should not hide any part of the message provided by Klarna, as this may result in compliance issues. The text of the placements should have sufficient contrast with the background, and you should not hide Klarna's logo. If we determine that you are using the styling in an abusive manner, we reserve the right to stop your integration.

Following are the list of exposed part:

Pseudo-elementDescriptionPlacement types
*::part(osm-container)The wrapping element of the placements is the container that surrounds the placement. It can be styled with the *::part(osm-container) selector.
  • credit-promotion-auto-size
  • credit-promotion-badge
  • top-strip-promotion-auto-size
  • top-strip-promotion-badge
  • info-page
  • footer
*::part(osm-message)The main text of a placement is the primary message that is displayed within the placement. It can be styled with the *::part(osm-message) selector.
  • credit-promotion-auto-size
  • credit-promotion-badge
  • top-strip-promotion-auto-size
  • top-strip-promotion-badge
*::part(osm-legal)The legal text that appears under the main message in some markets is an important piece of information that must be clearly visible and readable to the user. It can be styled with the *::part(osm-legal) selector. It is essential that this text is not hidden or obscured in any way, as it is required for compliance reasons.
  • credit-promotion-auto-size
  • credit-promotion-badge
  • top-strip-promotion-auto-size
  • top-strip-promotion-badge
*::part(osm-cta)The button element that triggers the opening of the informational model is the element that the user clicks on to view additional information about the product or service being offered. It can be styled with the *::part(osm-cta) selector.
  • credit-promotion-auto-size
  • credit-promotion-badge
  • top-strip-promotion-auto-size
  • top-strip-promotion-badge
*::part(osm-badge)The svg badge element(s) inside the placements. They can be styled with the *::part(osm-badge) selector.
  • credit-promotion-badge
  • top-strip-promotion-badge
  • footer
*::part(osm-link)Link elements with the <a> tag are the elements on the page that use the <a> tag to create a hyperlink to another location on the web. They can be styled with the *::part(osm-link) selector.
  • info-page
*::part(osm-logo)The Klarna logo appearing next to the main message. It can be styled with the *::part(osm-logo) selector.
  • credit-promotion-auto-size
  • top-strip-promotion-auto-size

The following example shows how you can use CSS to style the top-strip-promotion-auto-size placement. In this example, we are changing the background of the placement, the color of the message, and the click-to-action button. This demonstrates how you can customize the appearance of the placement to match the look and feel of your website.

The use of CSS to hide Klarna's logo is not allowed. If this type of abuse is discovered, We reserve the right to turn off the abusive integration. Maintaning Klarna's branding integrity and visibility in the placement is necessary.

MARKDOWN
<klarna-placement 
  id="my-top-strip" 
  data-key="top-strip-promotion-auto-size" 
  data-locale="en-US">
</klarna-placement>

Html code with id

CSS
#my-top-strip *::part(osm-container) {
  background-color: #FAEAB1;
}

#my-top-strip *::part(osm-message),
#my-top-strip *::part(osm-cta) {
  font-size: 15px;
}
#my-top-strip *::part(osm-logo) {
  font-style: italic;

Example of styling top-strip-promotion-auto-size

Result of styling

The following example shows how you can use CSS to style the top-strip-promotion-badge placement. In this example, we are changing the font-family of the text to use an externally loaded font (such as a Google font), and we are also increasing the size of the badge.

It is important to note that Klarna's badge should not be hidden with CSS. If we determine that you are using CSS in an abusive manner to hide the badge, we reserve the right to disable your integration. It is important to maintain the integrity and visibility of Klarna's branding in the placements.

MARKDOWN
<klarna-placement 
  id="my-top-strip-badge" 
  data-key="top-strip-promotion-badge" 
  data-locale="en-US">
</klarna-placement>

Html code with id

CSS
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

#my-top-strip-badge *::part(osm-message),
#my-top-strip-badge *::part(osm-cta) {
  font-family: 'Lobster', cursive;
}

#my-top-strip-badge *::part(osm-badge) {
  transform: scale(1.1)
}

Example of styling top-strip-promotion-badge

Result of styling

Result of styling

The following example shows how you can use CSS to style the credit-promotion-badge placement. In this example, we are adding a border to the container, changing the color of the message, setting the size of the badge, and making the click-to-action button bold.

The use of CSS to hide Klarna's badge is strictly prohibited. In the event that such abuse is detected, Klarna reserves the right to disable the integration in question. It is imperative that the visibility and integrity of Klarna's branding in the placements be maintained at all times.

MARKDOWN
<klarna-placement 
  id="my-credit-promotion" 
  data-key="credit-promotion-badge" 
  data-locale="en-US" 
  data-purchase_amount="14900">
</klarna-placement>

Html code with id

CSS
#my-credit-promotion *::part(osm-container){
  border-color: firebrick;
  border-style: dashed;
  border-width: 1px;
  background-color: #453C67;
}

#my-credit-promotion *::part(osm-message),
#my-credit-promotion *::part(osm-cta) {
  color: #46C2CB;

Example of styling credit-promotion-badge

Result of styling

Result of styling

Following is an example of how you can style credit-promotion-auto-size

It is not permitted to use CSS to obscure the Klarna logo in any way. When this happens, the right is reserved to disable the integration altogether. It is crucial to preserve the visibility and integrity of Klarna's branding in the placements.

MARKDOWN
<klarna-placement 
  data-theme="dark"
  id="my-credit-promotion-auto-size" 
  data-key="credit-promotion-auto-size" 
  data-locale="en-US" 
  data-purchase_amount="14900">
</klarna-placement>

Id has been added to the placement to target it easier

CSS
#my-credit-promotion-auto-size *::part(osm-container){
  background-color: #000000;
}

#my-credit-promotion-auto-size *::part(osm-message),
#my-credit-promotion-auto-size *::part(osm-cta) {
  color: #F49D1A;
  font-weight: bold;
}
#my-credit-promotion-auto-size *::part(osm-logo) {

Example of styling credit-promotion-auto-size

Result of styling

MARKDOWN
<klarna-placement 
  id="my-footer" 
  data-key="footer-promotion-auto-size" 
  data-locale="en-US">
</klarna-placement>

Id has been added to the placement to target it easier

CSS
#my-footer *::part(osm-container) {
  background-color: #FAEAB1;
}

#my-footer *::part(osm-badge) {
  transform: scale(1.1);
}

Example of styling footer-promotion-auto-size

Result of styling

Result of styling

In the following example we changed the font-family of content and headings of info-page

MARKDOWN
<klarna-placement 
  id="my-info-page"
  data-key="info-page"
  data-locale="en-US"
>
</klarna-placement>
CSS
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:ital,wght@1,100&display=swap');

#my-info-page *::part(osm-container){
  font-family: 'Montserrat', sans-serif;
}

#my-info-page *::part(osm-heading) {
  font-family: 'Lobster', cursive;
}

Example of styling footer-promotion-auto-size

Example of styling info-page

Result of styling

The following examples demonstrate various scenarios that you may encounter when styling the placements.

Following is an example on how you can align Klarna's badge left or right on the placement:

CSS
/* Left align of the badge */
#my-top-strip-badge-left *::part(osm-container) {
  flex-direction: row;
}

#my-top-strip-badge-left *::part(osm-message) {
  margin-left: 14px;
  margin-right: 0px;
}

If you want to style the hover state of links or click-to-action buttons to match the look and feel of your website, you can use pseudo-classes as you would normally do for any link. For example:

CSS
#my-top-strip *::part(osm-cta):hover {
  color: #ffb3c7;
}

Example of styling the hover state using the :hover pseudo-class

Example of styling the hover state

Example of styling the hover state

If you have multiple placements of the same type on a single page, such as multiple credit-promotion-auto-size placements on a product listing page, you can use classes instead of IDs to target all of the placements at once. For example:

MARKDOWN
<klarna-placement 
  class="my-credit-promotion" 
  data-key="credit-promotion-auto-size" 
  data-locale="en-US" 
  data-purchase_amount="14900">
</klarna-placement>

<klarna-placement 
  class="my-credit-promotion" 
  data-key="credit-promotion-auto-size" 

Example with the use of classes instead of ids

CSS
.my-credit-promotion *::part(osm-container){
  background-color: #E8F3D6;
}
Example of styling more than one placement in a page using classes

If you want to use the same placement type in different areas of your website but style it differently in each location, you can simply use a different ID or class on the klarna-placement element to target the element and apply the desired styles. For example:

MARKDOWN
<!-- Product page -->
<klarna-placement 
  id="product-placement" 
  data-key="credit-promotion-auto-size" 
  data-locale="en-US" 
  data-purchase_amount="14900">
</klarna-placement>

<!-- Checkout page -->
<klarna-placement 
CSS
#checkout-placement *::part(osm-message) {
  color: #fff;
}

#checkout-placement *::part(osm-cta) {
  color: #fff;
  background: #007bff;
}

#product-placement *::part(osm-message) {

You may have the need to style the On-site messaging differently based on the viewport of your website, e.g. having smaller font on mobile and bit bigger font on desktop view, here is how you can do it:

CSS
/* Mobile styles */
@media (max-width: 480px) {
  #my-top-strip *::part(osm-message) {
    font-size: 12px;
  }
}

/* Desktop styles */
@media (min-width: 481px) {
  #my-top-strip *::part(osm-message) {

Styling placement differently based on the viewport size