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
Navigate to your Online Store > Edit Theme
Create a file in
snippets
folder (i.eklarna-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