Shopify Buy Button won’t show on custom phone layout

[leczkowskaya]

Hi! I’ve managed to implement the Shopify Buy Button to several products on a site (one product aka one button per page). While it works perfectly fine for the desktop version, the button won’t show up on the mobile layout when custom phone layout is activated:

Button visible on desktop, not showing on mobile (custom layout activated):
http://weyhe.karolinaleczkowski.de/02-dress

When adding the HTML button code in the custom mobile layout as well, I get two buttons on desktop and still none on mobile:
http://weyhe.karolinaleczkowski.de/03-top

Any ideas on how to solve this problem are veeery much appreciated!
Thanks a lot!!

[mariusjopen]

Dear @leczkowskaya

Yes, there might be a problem with the Shopify button.
We will have a look!

Do you have any other third-party plugins installed or CUSTOM JS code? Is it possible to deactivate it for a moment to see if the problem remains?
Is Wordpress and LayTheme up to date?
Many wishes!
Marius

[arminunruh]

hey, i have seen this issue before.

unfortunately it seems that shopify buttons don't work if they are both on the desktop and custom phone layout.

you would need to delete the custom phone layouts for these pages and then it should work on phones too :/

[mw]

Hello Armin and Marius,

I ran into the same problem with the newest Lay Theme Version.

With another website running Lay Theme Version: 2.9.5 everything worked fine with custom phone layouts. After updating the Theme the same issue occurred here.

Any further Tips?

Maybe it's because the Shopify code is an #ID that is called 2 times (with custom phone layout) and that's causing the problems?! Maybe the new lay theme version is more strict dealing with that issue?

Would be very thankful for any advice on how to solve this!

[arminunruh]

@mw said in Shopify Buy Button won’t show on custom phone layout:

Maybe it's because the Shopify code is an #ID that is called 2 times (with custom phone layout) and that's causing the problems?! Maybe the new lay theme version is more strict dealing with that issue?

yea probably

That earlier version of lay theme had a javascript frontend where the custom phone layout markup and the desktop markup did not co-exist on one page.

However, now with the new lay theme versions the desktop and custom phone layout both exist at the same time on a page.

I had to re-code the frontend to be a php frontend for faster loading times and for WooCommerce compatibility so people will be able to have a shop on Lay Theme websites.

I'm working on the WooCommerce integration everyday, however I'm not sure when exactly it will be done!

One solution would be to not use custom phone layouts on pages where you use a shopify button.

[arminunruh]

You could also ask shopify support to make it possible to have the same shopify button on a page twice and still have it work.

Maybe they can fix this on their side.

[kalamakumaran]

Hej,
I maybe found a little workaround to avoid that problem. Every Shopify Shortcode for a single product or collection has a specific id. You'll find it in twice in the code. Once in the beginning and a little bit further down. Just change the is in both lines on the mobile phone layout by replacing a number at the end.
I noticed that it's not duplicating anymore, but I' not sure if it's possible to still buy the article with the modified id because my store isn't set up right now.
Maybe somebody can try that and report if it solved the problem.
Hope that helps,
B

[Richard]

Dear @kalamakumaran

Cool! :)
Really valuable input

Best
Richard