App not appearing in store (General confusion with theme app extension, embed blocks, and hosting)

[arodmcmxcix]

Hello everyone,

Edited the Ask for more clarify

I am an inexperienced dev so this question might have an easy solution that I missed in the documentation.

Context:

My team owns the storefront (so we are the merchant and admin) and an app. Our app should be placed in the storefront and used by buyers as part of their buying experience. The buyer can input specifications and then receive products that match their needs. The functionality of adding to the cart and buying is done using the Shopify API.

Our site requires several apps that bring functionality from a legacy site (written in PHP) into Shopify. This functionality is not feasible using the default customization tools provided.

Our first app is content-complete and I am confused as to how to proceed “placing” the app into our store.

Setup:

We cloned a Shopify app template from Git Hub and used node.js for our front end, Laravel web framework, and PHP backend. On partners.shopify our app is successfully installed into our store. We can run “npm run dev” and our app works on the admin.shopify page under the app section. Which we used for testing etc.

Goal:

When customizing the site I see the “+ add block” section that can be a prefab or an app. I hope that the process of adding the app to the store can be as simple as clicking the"+ add block" and then navigating to our app placing it where we like.

What I have tried/confused with:

1. Theme app extensions appear to only add a blank 5 red stars app block to the store customization. All tutorials I have found only expand this functionality with some test products. This leads me to believe that theme app extensions are only small/ lightweight functionality for product ratings. I am unsure if this is something that can be completely overridden to act as a container for the web app portion of our code.

2. Embedd blocks. This uses Bridge and Polaris but the wording and tutorials appear to fall short of my goal. This seems to be used for apps that “merchants” use in their “admin” not on their storefront-facing clients. And as mentioned in the setup section above, our app already appears in the Shopify admin section.

3. I didn’t think we would need to “host” using Heroku or Fly.io since this is an unlisted custom app (and we own both the store and the app).

Ask:

How would I begin to get the app pictured below to appear as an app in the “+ add block > app” storefront section?

I look forward to any guidance or help that can be provided!

Thanks,

ARod

[conversionist]

Hey Bro the theme app extension is a flexible tool that lets you do a lot. It can communicate with the admin app to do any task, not just for star ratings

For hosting you don’t need to use Fly.io or Heroku. Any VPS will work if you want to host both the main app and the theme app extension
But if you only need the extension Shopify can host it for you

Bro I’m not sure what your question but If you have any questions just ask

[arodmcmxcix]

EDIT: Thank you for your reply!

I should clarify my ASK above to this: I want to take the app pictured and place it into my storefront. Would that be possible with theme app extensions or embed blocks?

[conversionist]

Yeah, bro, that’s very possible. You can use metaobjects or metafields for this, but I would recommend metaobjects. Here’s the documentation
Here’s how it works:

• You create a Shopify metaobject from your admin app

• Then, you can access the metaobject data from your theme app extension, like here

  Here are some steps that may help you:

  1. Create a Shopify metaobject definition, which acts like a schema for your data. You can find an example here
  2. Start creating data on the metaobject, here
  3. You can find the documentation to modify and do all sorts of things, here
  4. Access data on the metaobject from your theme app extension. here
  5. In your Shopify theme extension app, consider it as a section where you can pretty much do anything you can do on a normal theme

  Hope this helps!

[arodmcmxcix]

Hello,

Thanks again for all the documentation. I am still a little confused. The image below is from this blog: https://endertech.com/blog/how-to-deploy-shopify-apps-vs-shopify-app-extensions.

To reiterate: Metaobjects and theme app extensions can take code in a web app structure and essentially run it like a container? From my understanding metaobjects can be used to add functionality in relation to products. I think the app we created is too complex to create a metaobjects definition.

Thanks for your help!

[conversionist]

No, it’s pretty easy bro. A metaobject is an easy way for your app theme extension to communicate with the admin app.

You know what? I’ll make a YouTube video to explain it in detail