Implementing html web app into Shopify page while retaining responsive design?

Highlighted
New Member
2 0 0

I recently paid someone to develop a web app for me. I have some basic html/css knowledge and a little php and C#, but web design isn't my specialty.

 

The app works perfectly as is, and is responsive for both desktop and mobile. I want to keep the app exactly as is.

 

The problem is that adding code to a Shopify page changes the format of the app on mobile. It looks fine on desktop, but the mobile version has an image that rotates, and the image is squashed and rotates in a very weird way.

 

Is there a proper way to implement an html snippet of a web app on Shopify, or would I need to pay a Shopify expert if I don't want to learn how to manually adjust the CSS? How much would I expect to pay for that if so?

 

Also, the app is supposed to load an image at a certain point, and it works fine on the website that the person who I paid the app for linked me. However when he sent me the html and image files I couldn't get some of the images to load. One of several images is supposed to load, and the relevant code looks like this.

 

{"img":"https://cdn.shopify.com/s/files/1/0279/6725/2918/files/image.png?v=1580477622","label":"Name",  "value":1,  "question":"Other stuff"},

The problem is that when the script runs on my page, I get a box like this, although if I visit the url it loads fine on that page (I changed the link above to a placeholder).

 

prizewheel.jpg

If anyone has an idea of what I could do to fix this, I would be grateful. I'd really rather not pay someone else to fix this since I am somewhat competent at coding amateur projects usually, but html/css/javascript aren't my specialty and I'm on a deadline that doesn't allow me to learn everything from scratch.

0 Likes
Highlighted
Shopify Partner
887 120 156

Hello, @FriendlyRoots 

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
2 0 0

https://friendlyroots.com/pages/prize-wheel

If you view the site on mobile you will see the problem. As for the image, it only shows up if a one time use code is entered. You can try one of these.

 

222222

333333

444444

555555

 

You'll see the image placeholder appear instead of the image that is supposed to.

0 Likes