Issues Embedding Shopify "Button & Image" On Mobile

  • 13 August 2019
  • 2 replies
  • 4 views
J

Hi All - we are struggling to get Shopify’s “Button & Image” to display properly on mobile and are hoping that someone out there has encountered and solved this issue already…

Just to recap the issue:

  1. I have inserted the Button and Image code from Shopify into unbounce and when viewed on the desktop, the image and text proportioning versus the other images/text works as expected as can be seen here: [I’m a new user, so I’m only allowed 2 links and this link would be least useful…let me know if it would be helpful to see and I’ll try to add later]

  2. However, when viewed on mobile, the image and text do not scale down and loom disproportionately large relative to other images/text, as can be seen here: https://www.screencast.com/t/LovsyID3

  3. Complicating matters, when manually scaling down the placeholder box in edit mode, the image scales down appropriately but the text does not and therefore the text that can be seen remains large and the rest is cut off, as can be seen here: https://www.screencast.com/t/KvLoQ0zmwhb

Are we missing something simple? Has anyone solved this or know how to solve. If you need more info, please do not hesitate to ask.

Thanks,
Eric

2 replies

Jordana

Hi Eric,

I’m Jordana, the Sr. Product Manager for the Content Builder, so I’ll try to take a stab at helping out here. I think the difficulty you’re seeing here is that you are, I’m guessing, using Shopify’s embeddable Buy Button code and then placing a custom HTML block with the Shopify code in it, into your page? Those don’t scale very well on mobile as we aren’t able to identify what is inside the custom HTML block.

Looking at your screencaps, I’m guessing you just want a simple way for your customers to purchase your product. I’d suggest following these instructions instead: https://help.shopify.com/en/manual/sell-online/buy-button/create-buy-button#create-a-checkout-link and what that will give you is a unique url that takes your customers to checkout with that product in their cart.

Then what you can do in the Unbounce Builder is just drag-and-drop a button onto your page and set the url of that button to that link. You can also add whatever images you want as well to your page just as you normally would do. This way gives you much more control over your design and how it will look on both desktop and mobile.

Hope that helps!

Jordana

J

Hi Jordana - I was hoping that I was missing something obvious, but I’m not that lucky today. However, your work around is not that much more complex, so thanks for my new Plan B!

Cheers,
Eric

Reply


Terms & ConditionsCookie settings