Klarna Docs - Install steps

Install steps

Install the Klarna On-site messaging Shopify app

The Klarna On-site messaging app is available on the Shopify App Store.

Your account is connected for you!

When you first install the app, your Klarna API credentials will be automatically connected, as long as you have already completed the Klarna Payments for Shopify integration.   (If your store’s address does not match the automatically connected endpoint, you can disconnect your account and reconnect it to the desired region’s endpoint.)   If you haven't yet integrated Klarna Payments for Shopify, see instructions, see Payments on Shopify as an alternative payment method. If you don’t yet have Klarna API credentials, you can sign up at the Merchant Portal button in the top navigation of this site: docs.klarna.com

You can confirm your Klarna API credentials in the Settings menu option of the app.

Add placements

From the Dashboard, click the “New Ad Position” button

  1. If desired, enter a name for your Shopify Ad Position or use the default timestamp for the name.
  2. If your country is not already defaulted, select the country that matches your Klarna API credentials. (Make sure to select a country that uses the matching currency for your store.)
  3. The locale is automatically defaulted to your store’s locale, but you can set it manually if desired.
  4. Select your desired placement; the dynamic amount-based ‘credit-promotion’ is recommended for Product and Cart pages.
  5. The app will automatically pick a placement it finds as best fit for your theme, but if this doesn't work, you can instead drag and drop the pink box to the desired placement on your page, OR if neither of those options work well for your theme & page, enter a CSS element manually.  
  6. Check the consent box “I have checked the preview...” and click the Save button.
  7. Confirm the modal pop-up window that changes take a few minutes before they will display on your storefront.
  8. Review the On-site messaging at your storefront.
  9. Repeat the above steps for your cart page, and any other pages (home or static) as desired.

Do not add padding or change the alignment, unless necessary.  Before adjusting these settings, check how the Shopify Ad displays on your store by viewing your storefront in a browser.  The Preview shows how the Ad may display but can not render the page exactly as shown in an actual browser session.

Note: you don’t have to code for placements to be updated when variants change on the product page or quantities change on the cart page, this app already included that for you.  

We recommend testing in a new incognito window to avoid caching and waiting a few minutes after changes are made to give the code time to update the storefront.

When using this app, do NOT manually update your store’s theme files with code from the On-site messaging app within the Klarna Merchant Portal, as that will prevent the Shopify On-site messaging app from working.

Problems?  Email skosm@klarna.com for further help.

Customizations of On-site messaging

Most customizations of the look and feel of On-site messaging are done in the Klarna Merchant Portal; these customizations affect the contents within the placement. (Note: The defaulted “Light” theme MUST be selected in the app for the customized placement to display on the storefront; the “Dark” theme will instead use the non-customizable, dark placement.)

A few customizations (Padding & Alignment) affect the placement itself (not the contents within the placement), and these are available in the app in your Shopify admin. Customizations in the app vs. the Merchant Portal impact the placement differently, and both types of customizations may need to be configured for the desired result, e.g. the Merchant Portal placement text alignment (within the placement) and the app Ad Position alignment (for the placement on the page). (Note: only some Klarna placements support text alignment within the placement, and some themes may not honor the styling for placement alignment on the page.)

For Shopify Plus merchants, klarna-placement code can be added within your Shopify checkout theme files to display On-site messaging within checkout. On-site messaging within Shopify checkout is not currently supported within the On-site messaging app.