Alma widget integration problem (product page)

MaxCosta
Shopify Partner
248 2 59

Hey everyone,

 

I'm contacting you because I'm having a big problem integrating the Klarna widget on my product page on my website: artemis-paris.fr

 

I configured everything following the Klarna documentation, and installed their "on site messaging" module.

 

However, I can't integrate the display on my product pages.

 

I found this code snippet on their site:

 


<!-- Placement v2 -->
<klarna-placement
data-key="top-strip-promotion-badge"
data-locale="fr-FR"
></klarna-placement>
<!-- end Placement -->

 

I'm trying to integrate it into an HTML block or via the application, but nothing works. Has anyone encountered this problem before? I get the impression that it's displayed for a millisecond and then disappears. For the record, I use the Flex theme.

 

Thanks in advance,
Best regards,
Max Costa

Replies 4 (4)

Xipirons
Shopify Partner
136 24 29

Hi@MaxCosta 

 

First, I'm french 🙂

 

Here are a few suggestions for integrating the Klarna on-site messaging widget on your Shopify product pages using the Flex theme:

  1. Make sure you have installed the Klarna On-site Messaging app from the Shopify App Store first. This will connect your Klarna account.
  2. In your Shopify admin, go to Online Store > Themes and click the "..." button next to your Flex theme. Select "Edit Code".
  3. Open the product.liquid file under the "Sections" folder. This is the template that renders your product pages.
  4. Find an appropriate place to insert the Klarna placement code, such as near the product price or add to cart button. The exact location will depend on your theme's structure.
  5. Paste in the placement code snippet:
 

 

<!-- Placement v2 --> <klarna-placement data-key="top-strip-promotion-badge" data-locale="fr-FR" data-purchase-amount="{{ current_variant.price | money_without_currency | remove: ',' }}" ></klarna-placement> <!-- end Placement -->

 

 
Note that I added the data-purchase-amount attribute and set it to the current product variant's price using Liquid. This allows it to update dynamically.

 

  1. If the widget is disappearing after page load, there may be a JavaScript error or conflict. Open your browser's developer tools console and check for any errors when the page loads.
  2. If you are still having issues, try the manual integration method instead of using the app. Add the Klarna JS library to your theme.liquid file and use the placement snippet in product.liquid as shown above.
  3. As a last resort, reach out to Klarna's merchant support for further assistance troubleshooting your specific setup and theme. They should be able to provide more tailored guidance.

The key is placing the code snippet in the right location and ensuring the product price is passed correctly. With some trial and error in your theme files, you should be able to get the on-site messaging displaying consistently.

 

Example of Klarna Integration that I've made recently: https://lesbohemiennes.com/collections/chaussettes-1/products/badge-viva-mexico

 

Let me know if you have any other questions!

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

MaxCosta
Shopify Partner
248 2 59

Hi and thank you very much for your reply!

I did integrate your code snippet, but unfortunately I have the problem you're talking about: the element loads and disappears, indeed surely due to a javascript block.

Only, in my console, I can't see what's conflicting. Can you tell me why the element is displayed and then disappears?

Many thanks in advance, exemple here : https://artemis-paris.fr/products/neree-chemisier-collerette

Xipirons
Shopify Partner
136 24 29

@MaxCostaJe vous envoie un message

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

Xipirons
Shopify Partner
136 24 29

In the console, I see "[AppBlockInject] Locale not found, removing placement" =>  Klarna is removing the widget after loading

It's a problem with Geolocation

See the docs here : https://docs.klarna.com/platform-solutions/shopify/klarna-osm-app-for-shopify/locale-and-display-lan...

You have to parameter something in your Klarna admin

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed