Shopify App proxy to display content in every page

Question

I am trying to serve App Proxy content via load Script into a shopify store.

I have created an index.html file loaded on an Amazon S3 server and set content type to application/liquid.

If I go to shopname/apps/proxy I get my div inserted into the shopofy layout and some content. But my app is just a div which I want to insert into every page of the store. Here are two approaches I've tried-

$('body').load('/apps/proxy'); No matter which page I am on it automatically redirects me to home page.

If I try to do

$('body').append('div id="myDiv">/div>');

$("#mydiv").load('/apps/proxy');

It duplicates the content of the page

What I am failing to understand why is the entire shop layout being dispayed , I am sure it is my lack of understanding as to how shopify UI works, but I only want my form to be displayed into a div as a part of the page .

Answer 1

The app proxy is for full page views and includes a shopify header and footer wrapped around the proxied content your service returns. It is not intended for partial page views - there is no decent way to embed widgets, much to my chagrin.

When you do $('body').load('/app/proxy'); you are replacing the entire page's body with another full page.

In your app settings you most likely have /app/proxy set to redirect to your home page. If you want to, you can add further paths beyond this (/app/proxy/sub_page). But as stated previously, it is not intended for embedding within other pages, instead it is intended for new, stand-alone pages.

Answer 2

When you call an App Proxy, you get back html. Append that HTML returned from the callback to some element in your document and you will accomplish what you want.

Note that Shopify indeed renders the whole layout of your Shop theme. You cannot replace the Shopify layout. You can replace the content of the proxy URL though.

So your best bet is to treat the S3 content as nothing more than HTML that you get from an XHR call.

It also sounds like you should probably just use an iframe. App Proxy is not meant for what you are doing, static content.