Integrating existing application with Shopify

[Gwesseling]

Hi everyone,

For the last couple of days, I have been researching integrating an existing (Angular) application with the Shopify e-commerce platform. This application is designed as a standalone application, but we would like to make it possible to integrate it with Shopify or other e-commerce platforms. The goal of the application is to display additional details on the product page of the online store. Therefore, the application needs to access some additional products information (possibility through Metafields?).

I have found a few possible ways of integrating the application with Shopify.

- Embed the application with an iframe (either in the theme directly or through a theme extension) and provide necessary product data through URL parameters.

- Placing the app source in the theme extension by converting React to Angular, retrieving the product information through Liquid.

- Placing the compiled files in the assets folder and importing them in an app block with Liquid, retrieving the product information through Liquid.

- ScriptTag API?

- Build a custom store page (app proxy).

- Build a custom storefront.

- Build some layer within the application that retrieves the product data when the application runs on a Shopify page (Not sure if this is possible).

The first option is the preferred one currently because it is the least amount of work while still keeping the app available as a standalone application. But the last option sounds promising to me too. If there is a better option available, please let me know 🙂

I would appreciate some feedback from more experienced Shopify developers. 

Thanks!

TLDR: I am trying to integrate a standalone Angular application into Shopify's online store.