Item Detail on Mobile is HUGE

I’ve imported my shop to a site on the Wix platform. Works perfectly on desktop, totally cool, but not so much on mobile when you click on an individual item - on the next screen some of the text and images are GIGANTIC.

I’ve embedded using an iFrame.

Link here: https://deserthaven.org/store

Thoughts?

I’ll have to try and reach out to our buddies in the dev-dept… @sprd-yves, can you help?

Thanks, Sara! BTW, this is another client’s site (Desert Haven Animal Society) - we’re the same kind of operation as SpayMart. Thinking maybe I ought to make a personal account here, as I have several clients with shops…

@sprd-sebastian, can you help out :crying_cat_face: Save the cats!

Unfortunately integration via an iFrame is not supported by SpreadShop. This will lead to strange issue exactly like the one you described. You should consider integrating the Shop via the Javascript we provide.

1 Like

Received - thank you, Sebastian!

Sebastian - I made a test page using Spreadshirt’s javascript to embed the store (instead of an iframe) and the issue is the same. On a phone, everything looks great until you click on an individual item, then everything expands off the screen with huge images of the item. The images are huge, the text is much larger - generally broken. Can you advise?

https://deserthavenas.org/storetest/

Thanks!

I am not that familiar with Wix, but from what I can see on the page you posted, the Shop is still in an iFrame. I am not sure if maybe Wix does this to every custom script?! Sorry I cannot be of more help here… maybe you can contact Wix support.

1 Like

Ok, I’ve figured out how to properly use JS with Wix, and it works!

https://deserthavenas.org/storetest

Question: Is there any way to adjust the width of the store as it’s displayed on the page? If you click through above, you’ll see if breaks out of the page on the left and right.

Suggestions?

PS: When embedding I’m asked the following:

Place Code in:
Head
Body - start
Body - end

I’ve placed the code in Body - start

PPS: I can add custom CSS… is there a way to use CSS to make the

in the JS float center?

‘Body - Start’ seems like the right choice to me.

And from what I can see, it does not ‘break out’ of the page as such - it’s just that the page header is a little smaller than the page width and centered, whick makes it look like the Shop is too wide. When you shrink your browser window, you will see that it looks better. So maybe it would make more sense to adapt the header of your page.

So… there is no way to adjust the width of the shop on the page?

There sure is via CSS. But then you would have to take care that it also works on mobile - a fixed width would not be sufficient.
So, it is possible, but I am kind of on the limit here how far I can help you. I think all the problems with the Shop itself have been fixed - the rest is up to you and your CSS skills :slight_smile:.

1 Like

Understood - thanks, Sebastian!

1 Like