How to integrate a custom product configurator

[nilosderzweite]

I made a product configurator in svelte and would like to integrate that into the Shopify Store of my customer. Right now I am able to create the product, fetch the matching variant and put it into a shoppingcart via the javascript buy sdk. But it would be much better if we could integrate our App into the Shopify Shop and just use the Shopping Cart of the sorrounding shop.

Is a "Shopify App" the way to go now? I created the example App but it looks like, those apps are ment for the Admin-Side of the Shop. Is there Any way to implement my App and use it like a Component of the already existing shop?

Thanks so much. I will keep researching but would be happy if anyone could help.

[PaulNewton]

If it's already working is there a reason the configurator can't just be in an inline iframe on the product description page(PDP) , or in a modal.

That way is just adding some embed code to the themes templates or as a custom-liquid block/section in OS2.0 themes, or a custom-html section/block in themes that have that feature.

For app integration to the frontend look at either the scripttag api, using app-block extensions, or a proxy-app.

The scriptag api is good for lite javascript based integrations where modifying the themes actual liquid code is undesirable.

app-block extensions to make it simplar to add/remove the app UI as a theme setting merchants can control and position on  page.  

If the configurator is performance heavy a proxy app can be the way to go.

https://shopify.dev/apps/online-store 

[nilosderzweite]

Hello Paul,

thanks for the reply. The notfication went to spam, so i'm a little late. But i think i found a good solution: I added a script-tag and an iframe to a Page containing a listener on a message event, fired by my iframe, containg the variantId I want to add to the cart and i do that via cart api.

Best Regards