Solved

Help for roadmap for creating shopify app

arnav98
Shopify Partner
26 1 7

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!

 

Accepted Solutions (2)

Liam
Shopify Staff
2731 299 769

This is an 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 | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Liam
Shopify Staff
2731 299 769

This is an 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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 3 (3)

Liam
Shopify Staff
2731 299 769

This is an 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 | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

arnav98
Shopify Partner
26 1 7

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
Shopify Staff
2731 299 769

This is an 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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog