Skip to main content
All CollectionsCart customization
How to Add the Klarna Widget to Llama Cart
How to Add the Klarna Widget to Llama Cart

Adding Klarna Widget to Llama Cart

Llama Support avatar
Written by Llama Support
Updated over a week ago

Note: All the code below is from the snippets/llama-upsells-smart-cart.liquid file. Please refer to this custom liquid file to view the complete code in one place.

Step 1. Show Klarna Visually

Open your Cart Editor and add block (i.e footer section)

Copy and paste the code snippet to HTML Code field

<div class="lcu__drawer__klarna" style="align-items: center; gap: 10px;>
<img style="width: 50px" src="https://cdn.shopify.com/s/files/1/0631/4065/9395/files/klarna.png" alt="Klarna"
/>
<p style="font-size: 14px; font-weight: 400; line-height: 1.5; font-family: inherit;">
Or <span data-month>4</span> interest-free payments of $<span data- price></span> with Klarna.
</p>
<button>Learn more</button>
</div>

Now Klarna block should appear in your Cart. Feel free to change its content according to your setup with Klarna


Step 2. Connecting Behaviour

In order to complete behaviour part, your store needs to connected to Klarna already. Official Guide on how to add Klarna Javascript

Create a file

  1. Navigate to your Online Store > Edit Theme

  2. Create a file in snippets folder (i.e klarna-in-drawer.liquid)

In Klarna OSM (on-site messaging) code snippet in your klarna-in-drawer.liquid and save changes

<klarna-placement 
data-key="credit-promotion-badge"
data-locale="en-US"
data-purchase-amount="{{ cart.total_price }}">
style="display: none;"
</klarna-placement>
<javascript>
const klarnaShadow = document.querySelector('klarna-placement');
if (klarnaShadow) {
const shadowRoot = klarnaShadow.shadowRoot;
const triggerButton = shadowRoot?.querySelector('[part="osm-cta"]');
const customKlarnaTrigger = document.querySelector('.lcu__drawer__klarna button');
if (customKlarnaTrigger && triggerButton) {
customKlarnaTrigger.addEventListener('click', () => {
triggerButton.click();
});
}
}
</javascript>

The process might be complex for non-tech person, in this case feel free to reach out our team to quickly setup Klarna block in the Cart Editor
Klarna has to be already configured and setup by store

Did this answer your question?