Merchant Onboarding for Theme App Extension (App Block)

[catrawalkar]

According to the documentation here:
https://shopify.dev/docs/apps/online-store/theme-app-extensions/ux-guidelines#onboarding-for-app-blo...

We must prompt Merchant to select the theme where they want to add App Block. How to do that? Is there any code sample for this? How to list all the themes that are currently available in a particular store?

Also, in the 2nd point, documentation says "If the selected theme is vintage theme, we should display error". How to determine if selected theme is a "Vintage theme"?

[ZestardTech · Accepted solution]

Hi @catrawalkar 

It appears that you're asking the merchant to integrate your app into their theme. To do this, you'll need a deep link to the merchant's live theme.

For the Theme App Extension deep linking, you can construct the URL for your app block using the following format:

https://<myshopifyDomain>/admin/themes/current/editor?template=${template}&addAppBlockId={uuid}/{handle}&target=newAppsSection

Here's what each part of the URL means:

<myshopifyDomain>: Replace this with the merchant's Shopify domain.
${template}: This should be either "products" or "cart", depending on where you want your app block to appear.
{uuid}: This is the unique identifier for your Theme App Extension which you can find in .env file.
{handle}: Replace this with the name of your liquid file inside the Theme App Extension.

By providing this URL to the merchant, they can easily integrate your app block into their theme.

I hope this helps you resolve the issue. Let me know if you need further assistance.

[catrawalkar]

@ZestardTech Thank you so much. You saved my day and I was able to resolve my issue using your solution 🙂 Thanks..

[ZestardTech]

Hello @catrawalkar 

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

[ZILIO]

Hi @ZestardTech !

I'm confused as to where to find the UUID for my app block (it's a widget to be installed on the Product page).
You mention we can get it from .env var (or file - where is this .env file located? Is it parsed into an env var we can access?) - could you elaborate for me please?

I assume this UUID refers to the actual block which will only be given an ID after install? 

Many thanks for your time!

[kyleHana]

Hi @ZILIO @catrawalkar @ZestardTech 

Three questions:

1. Where can I find the UUID for the app block?
   1. Is there a production UUID assigned to our app? as opposed to a development UUID?
   2. Can you explain the process of generating the UUID for the app block?