Embedding your app's html div into liquid.product

[toinfinity]

I'm trying to figure out how to get my app's html div onto the liquid.products page

For example I have my app Proxy setup at myshopname.shopify.com/apps/proxy

I also have a liquid file with HTML code at /apps/proxy/testcode.html

If I wanted to embed a div called "embedtest" from the testcode.html file how would I go about doing this?

The Shopify Product Reviews app has very similar functionality as they embed the following:

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

[Jason]

Hey toinfinity,

That code you referenced for the Shopify review app is manually added by the merchant into the theme. The app comes with instructions on how to to do it. Some basic install notes here:
https://help.shopify.com/manual/apps/apps-by-shopify/product-reviews/installation

Since each theme can be vastly different in terms of html and layout it's hard for an app to make a good judgement call of where to automatically add. It's also not good practice to inject html or Liquid into the theme assets as you could break the layout or just make it difficult to remove. Difficult in the sense that the merchant would have no memory or awareness of what change was made.

Less of an issue if it's the JavaScript adding the HTML into the DOM. So the review app does both. The merchant adds that small snippet of HTML, then the apps JavaScript fills it with content once it loads. 

[toinfinity]

Thanks.  I fully understand their intentions.  I want to do the same thing but with my app which is served through an app proxy.  How can I go about doing this?

As I posted above I'm trying to figure out how inject my own HTML div into a shop. 

Thanks.

[HunkyBill]

The simplest way to inject HTML into a shop template is to:

• download the template as an asset
• modify it (inject your HTML)
• upload the asset

That is all. Simple. No challenge except for these things to know:

• it is bad form to modify a template as the merchant will have no control over your modification. The edits may outlast your App.
• Your coding skills will need to be Einstein level smart to be able to inject your HTML in the right place.

So as Jason wisely preented to you, provide your merchant with instructions on how to inject your harmless HTML in their theme, and then use your mostly harmless Javascript (loaded via a Script Tag) to load the HTML with data from your App.