shopify app exposing content on product details and checkout page

[KishlorN]

Hello,

To share my experience as an experienced dev beginning on Shopify app development, I must say that after spending 4 days looking up and playing with app bridge, tutorials (nextjs/react, sections, snippets, etc..), polaris, liquid, etc.. I must say that I'm still very lost and confused about how to achieve my objective. 

I'm trying to develop an app aiming to be deployed on several stores, to add some specific content:

• on product details page right under the add-to-cart button
• on checkout page right below some (dynamically) identified products

Here are the options I considered:

• ask store owners to customized their theme source code to integrate my widgets: unacceptable
• load some javascript through ScriptTagCreate and manipulate the DOM to find the add-to-cart button and insert our widget: unreliable and unstable
• embedded app: apparently this only works for Admin and POS ? 
• app bridge: haven't managed to understand if/how this can help to render content on the online store
• app  section: not sure whether section can help, because the way I understand it my section would have to replace the whole product-template section on the merchants store, and I wouldn't want to override their own customizations
• app snippet: it seems to be a good option... However each store owner will have to paste the {% render ... %} code (automatic integration would be preferable). 

Now with app section/snippet downsides:

• it's fairly new and many stores might not be compatible
• dev doc is poor: not sure how an admin part of the app (integrated to shopify admin) would configure a snippet on the online store

Anyway, I'd really appreciate some directions here.

[Liam]

Hi @KishlorN 

Great to hear you're looking to develop an app which will interact with the product page, and the checkout. As you've found there are a number of options available to allow merchants to surface the functionality of their app, eg: by supplying a code snippet that merchants would paste into their product.liquid file. As you point out, this is not the most graceful approach for integrating an app, which is one of the reasons we're working on the app snippet functionality. Currently, the app snippet feature is not available on merchants stores- this is only available as a beta feature for testing on developer preview stores. You've likely stumbled across our blog post describing how to work with app sections and snippets, which dives deeper into this. 

Once app snippets / sections are available to merchants, it will be possible to add these to all themes- ie: merchants will not need to update their theme in order to accept the new snippet type, as this will be a backward-compatible update to the online store channel. 

It is also possible for apps to themselves interact with theme files, using the Asset resource of the Shopify API. I think this would be answering your second question, around how the admin part of the app would configure a snippet on the online store. 

If you are curious about app bridge, we have a webinar taking place today looking at this specific topic for participants of the Shopify App Challenge. If you register you'll get access to the recording afterwards. 

I hope this helps- let me know what other questions you have and I'll work with you to get your app up and running. 

Liam Griffin

Shopify | Developer Community Manager