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.

[Charles_Roberts]

Hi there

I was wondering whether you got any further with this issue.

I am looking to embed an Angular 13 app into Shopify. There is very little information about this, because Shopify clearly want you to use the React/Remix/App Bridge route.

I did find a great little angular library called:

Angular Polaris

It is a bit like Material but for Shopify. It uses web components to build Shopify features that are styled with the Shopify Polaris CSS framework.

https://github.com/syrp-nz/angular-polaris

Unfortunately, the library doesn’t work with Ivy based versions of Angular, which means anything above Angular 11.1

I did find an article about converting the library to an Ivy based lib, but I haven’t had a chance to see if this works.

https://blog.ninja-squad.com/2021/01/27/angular-linker/

Anyway, I would be very grateful if you could share any further insights, on how to integrate Angular into Shopify.