Help for roadmap for creating shopify app

[arnav98]

I want to create a chat bubble which a store owner can configure according to their own specific store.

There will be a basic configuration page in the store admin and the chat bubble in the store visitor UI. While I am getting a good idea of how to deal with the shop admin part of the app, I am struggling with embed block/theme extension.

I am trying to visualize and draw a high-level roadmap for that but I have a few questions 

1. Do I have to use Liquid only to develop the chat UI for visitor? And any resource for developing complex apps there - for eg I see multiple user review apps with many different types of views, how can this be done in liquid?
2. Will the chat bubble fall under the category of a theme extension, embed app or app block?

I have basic React experience and new to Shopify ecosystem. Thanks in advance!

[Liam · Accepted solution]

Hi Arnav98,

Great to hear you're building a chat bubble app! 

1. You can use Javascript alongside Liquid to build the app and it's functionality. You can store and reference JS files in the /assets directory of your app. 

2. The chat bubble would fall under the category of an app embed blocks as it would be a "floating" component rather than a specific section/block on a theme. 

This blog post gives a good overview too of the various options available when building app embed blocks, so I'd recommend giving that a read. 

Hope this helps!

[Liam · Accepted solution]

Hi Arnav98,

Great to hear you're building a chat bubble app! 

1. You can use Javascript alongside Liquid to build the app and it's functionality. You can store and reference JS files in the /assets directory of your app. 

2. The chat bubble would fall under the category of an app embed blocks as it would be a "floating" component rather than a specific section/block on a theme. 

This blog post gives a good overview too of the various options available when building app embed blocks, so I'd recommend giving that a read. 

Hope this helps!

[arnav98]

How can I scale my application writing in Liquid, for eg something similar to code splitting in React, breaking up into smaller components?
Is there any popular guidelines for that?

[Liam · Accepted solution]

You could split up your code into separate Liquid files, and these would would live in the /snippets directory. Then you'd use the Liquid render tag in the block to include the snippet where you need - would this be the pattern you'd be looking to achieve?

There's an example app block here that you can use as a model: https://github.com/Shopify/product-reviews-sample-app/tree/main/theme-app-extension

[odapX]

Thanks, you have no idea how many days I wasted on this.