Wrong alignement of Klarna On-Site Message, despite correct settings within the app - Dawn Theme

Wrong alignement of Klarna On-Site Message, despite correct settings within the app - Dawn Theme

JustInCase-de
Excursionist
96 0 6

Dear Community,

I need your help. 

Despite making the correct settings, within my Klarna On-Site Messaging App, the footer-promotion banner will not align to my wishes. I want the message to be centered, as I have made the correct settings, but still the alignment is left. I don't understand where the issue lies and hope somebody is able to provide me with a corresponding code. This is my store url: justincase-de.com 

 

I appreciate all help, but please do not contact me on Instagram.

 

Best regards,

JUSTINCASE

Bildschirmfoto 2023-03-18 um 11.54.08.pngBildschirmfoto 2023-03-18 um 11.52.11.png

Replies 4 (4)

KristiAtKlarna
Shopify Partner
205 14 39

Hi @JustInCase-de ,

The reason the center alignment isn't showing the placement centered on the store's cart page is that the selected Klarna on-site messaging placement (footer-promotion-auto-size) auto-sizes to the full width of the container, so current CSS styling 

 

justify-content: center

 

 doesn't display centered as desired. 

 

In order to center the placement, the container width would need to be restricted (e.g. 320px) and then center the element.  If you could add a custom CSS element (https://docs.klarna.com/platform-solutions/shopify/on-site-messaging-app-for-shopify/faqs/#troublesh...) to the cart page and then use that custom element to attach for the Ad Position in the app, you could then possibly use inline style, e.g.  <div id="" style="…"> {element injected by OSM app} </div>

 

Perhaps also worth trying to use on-site messaging as an App Block (instead of Vintage) if your theme supports Shopify's Online Store 2.0 architecture; more info about App Blocks for this Klarna on-site messaging app at: 

https://docs.klarna.com/platform-solutions/shopify/on-site-messaging-app-for-shopify/install-steps/#...

 

If neither of the above (hopefully fairly easy) options resolve this, you could custom code the on-site messaging which would allow you to style the element directly, per:

https://docs.klarna.com/platform-solutions/shopify/on-site-messaging-app-for-shopify/manual-on-site-...

 

Hope this helps!

 

Also, Klarna merchant support for the app is available at skosm@klarna.com (but they do not support custom code).

JustInCase-de
Excursionist
96 0 6

Hello and thank you for your detailed response!

Could you please tell me, which of the possibilities stated is the easiest to follow, for somebody that is not at all experienced with coding and similar. 

What is the code I need, to make the desired changes and where am I to place it within my theme ?

 

Kind regards,

JUSTINCASE

KristiAtKlarna
Shopify Partner
205 14 39

App blocks are the easiest, if your theme supports theme; I can't confirm if that will solve the issue, but easy to test hopefully.  If that doesn't resolve the issue, I'd encourage you to open a support case at skosm@klarna.com for direct support regarding options.

JustInCase-de
Excursionist
96 0 6

Thank you for your support Kristi!

I am now to try the integration of the on-site message, using add blocks.

However I can't seem to find any settings that allow me to change the alignement to center. 

Do i have to manually locale the footer-promotin-bage and if so, what is the correct command to place within the section "manual locale" ? Please view image and this is my store url: https://justincase-de.com

 

Kind regards, 

JUSTINCASE

Bildschirmfoto 2023-03-27 um 07.10.18.png