How to add On-Site Messaging on your Online Store 2.0 on Shopify.
To add app block placements you need to first have installed the Klarna On-Site Messaging app correctly.
You also need to have a theme that supports Online Store 2.0 app blocks. For vintage themes please see Vintage Ad Placements.
Placements are containers for the different messaging assets we offer. Placements are either dynamic, that is, the messaging is updated based on the purchase amount, or static, meaning that the messaging isn’t linked to the amount and isn’t updated dynamically.
You can add placements to the following types of pages in your Shopify store:
If you’re not sure which placements to pick, see the answer in our Frequently asked questions.Â
You can navigate to App Blocks through the On-Site Messaging home page by clicking Go to App Block Instructions and then proceeding to click Open customizer.
After inserting the block, drag the Klarna Placement App Block to the desired location in the template.
3. After inserting the block, use the 6 dots to the far right to drag the Klarna Placement App Block to the desired location in the template, for example, below Price.
4. You can edit the configuration options within the Klarna Placement app block by selecting between options in the dropdown menu and choosing between default, dark and custom theme (read more below on customizing placements with custom theme).
The configuration options available within the Klarna Placement app block.
If you want to customize the the placements in your Shopify store, you can do it in one of the following ways:
1. Edit the underlying CSS styling in your store’s source code, as described in the Customize placements with CSS article on Klarna.Docs.
2. Edit the placements in the Klarna Merchant portal, as described in the Customize placements through Merchant portal article on Klarna.Docs.
Note that only the Custom theme is customizable. If you use the default or dark theme, you won’t be able to see any customizations in the storefront.
Some customization options, that is, changes in padding and alignment, affect the placement itself and not the contents of the placement. These options are available in the Klarna On-site messaging Shopify app in Shopify admin.Â
Customizations in the app and the Merchant portal impact the placement differently and you may need to apply the custom styling in both to see the desired result. Examples of such customization are the Merchant portal placement text alignment within the placement and the Ad Position alignment in the Klarna OSM Shopify app that affects the position of a placement on the page. Additionally, only selected Klarna placements support text alignment within the placement, and some themes may not honor the styling for placement alignment on the page.
By default, the locale of placements in the Klarna On-site messaging (OSM) Shopify app is set to the dynamic locale configuration option, Geolocation.
When you choose the Geolocation option, you can display a single On-site messaging placement in a different language, based on the customer’s geolocation. The customer's country determines the On-site messaging placement's data-locale attribute. The language is selected from the list of languages matching the locale, either using the Shopify storefront language or the browser's language, based on the Ad Position's configuration setting, and injected into the klarna-placement HTML element on the storefront page.
If the customer's selected language isn’t supported for the country, English is used as a fallback. You can check the locale set for the placement by opening the web browser’s Developer tools > Elements menu and searching for klarna-placement .
If you’re testing geolocation when your computer isn’t located in the desired test region, you can use a VPN or manually set your desired region by entering the following code in your browser's Developer tools > Console and reloading the page for the change to take effect.
window.localStorage.setItem('klarnaosm_user_locale', 'SE')
The developer tools' Console lets you manually set a specific locale in your storefront.
If you’re using the Geolocation locale setting in a store that has the base currency of EUR, for Klarna On-site messaging using Online Store 2.0 App Blocks, the enabled EURO countries are shown by default. However, you can manually configure the locale to be used for all Klarna On-site messaging App Blocks in your Shopify Admin > Apps > Klarna On-Site Messaging > App Block Instructions.
The following static locale configuration option is available: