Customize placements with CSS.

On-site messaging renders its content within a shadow DOM to prevent the styles from being accidentally applied to the pages that host the placements. This ensures that the styles on the host pages don't interfere with the content of the on-site messaging.

• To add the CSS styling, you need access to the source code of your website.
• We 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.
• You're responsible for ensuring that styling the on-site messaging with CSS doesn't 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.

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 you have to keep in mind when using the Part API to style the placements.

• You can't style an element that doesn't have a ::part attribute.
• You can't target elements that are nested within an element that has the ::part attribute. For example, the following CSS selector won't work:

klarna-placement::part(osm-container) p { ... }

• You can't query the elements that have parts of JavaScript. For example, the following code won't work:

querySelector('::part(osm-cta)')

Here's the list of exposed ::part pseudo-elements:

The following example shows how you can use CSS to style the top-strip-promotion-auto-size placement to match the look and feel of your website. The modified elements are: the background of the placement, the color of the message, and the click-to-action button.

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

#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;

The following example shows how you can use CSS to style the top-strip-promotion-badge placement. The modified elements are: the font-family of the text to use an externally loaded font, for example, a Google font, and the size of the badge.

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

@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)
}

The following example shows how you can use CSS to style the credit-promotion-badge placement. The modified elements are: the container's border, the color of the message, the size of the badge, and the click-to-action button which is made bold.

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

#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;

Here's an example of how you can style the credit-promotion-auto-size placement.

<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>

#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) {

Here's how to style a footer-promotion-auto-size placement.

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

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

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

Here's an example of styling an info-page placement. The modified elements are: the font-family of content and headings of the info-page.

<klarna-placement 
  id="my-info-page"
  data-key="info-page"
  data-locale="en-US"
>
</klarna-placement>

@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;
}

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:

/* 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.

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

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:

<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" 

.my-credit-promotion::part(osm-container){
  background-color: #E8F3D6;
}

If you want to use the same placement type in different areas of your website, for example, on the checkout page and on the product page, but style it differently in each, use a different id or class for each klarna-placement element to target the element and apply the desired styles to each.

<!-- 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 

#checkout-placement::part(osm-message) {
  color: #fff;
}

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

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

You can style the messaging differently based on the viewport size of your website, for example, to render a smaller font size on mobile and bigger on desktop.

/* 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) {