embedded ThriveCart checkout form not loading on mobile version

[FANER]

I want to embed a checkout form on a client’s website. On the desktop version, it works perfectly using the provided code. It also works in mobile mode as long as I don’t create a separate mobile version of the site.

However, once I create a dedicated mobile version—which is necessary since most users visit the site on mobile—the form no longer loads (or is not displayed).

Where is my mistake in thinking?

Here is the embed code provided by ThriveCart:

<div data-thrivecart-account="robertherrmanncoaching" data-thrivecart-tpl="v2" data-thrivecart-product="1" class="thrivecart-embeddable" data-thrivecart-embeddable="tc-robertherrmanncoaching-1-4BE8KG"></div><script async src="//tinder.thrivecart.com/embed/v1/thrivecart.js" id="tc-robertherrmanncoaching-1-4BE8KG"></script>

Here is the link to a page with the embedded form.

May anybody helps?

[samfrancis]

Looks like a mobile layout issue, not the embed code.

When you create a separate mobile version, the desktop elements don’t carry over. Your ThriveCart block probably isn’t added (or is hidden) in the mobile layout.

Just re-add the embed in the mobile version and it should work

[FANER]

hej @samfrancis, thanks for your answer.
of course I embedet the code also in the mobile layout, it is just not showing up.

Gridder Desktop

Gridder Mobile

[FANER]

sorry – the screenshots dont work @samfrancis.
here some links:

Gridder Desktop

Gridder Mobile

[arminunruh]

hey can you please try this: duplicate the page. then for that page delete the custom phone layout. then see if it shows up

[arminunruh]

heres a more detailed explanation:

hey, this is a known thing with lay themes custom phone layout: lay theme renders BOTH the desktop layout and the custom-phone-layout into the same html (one is just hidden via css depending on viewport width). so if you place the thrivecart embed in both layouts, it ends up in the dom twice — and thrivecart (like a lot of embeds with unique ids) doesnt handle duplicate instances and silently fails to load.

two options: 1. disable the custom phone layout temporarily — lay theme then falls back to a single-column auto-mobile view of the desktop layout and your embed exists only once. try this first, its the simplest fix. 2. keep the embed in only ONE of the two layouts (e.g. only in the custom phone layout, with a placeholder element in the desktop layout) — more fiddly. let me know if option 1 works for you.

[FANER]

Hej @arminunruh ,
thanks for the response. Option 1 workes technically, as i tested it before. sadly this won’t work for the client, as he needs a custom phone version.
page without mobile layout

The desktop layout of the planned page is to complex for the mobile version and the mobile version to boring for desktop.

Option 2 would show no form in desktop, or do I misunderstood? It is crucial, to have the form in both layouts.

[arminunruh]

can u create 2 different checkouts? can you ask the thrivecart people if they can make it possible that people can have 2 checkouts on their page?

[arminunruh]

im gonna think about this more too maybe i can find a solution