What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

For any Shopify geniuses out there: Theme App Extension within Remix

For any Shopify geniuses out there: Theme App Extension within Remix

timv
Shopify Partner
3 0 0

I think should be somewhat basic, but I really can't find thorough tutorials or documentation out there that really clarifies this. My understanding is that a Theme App Extension can be used to inject HTML into a merchants PDP while a Remix app provides a merchant UI within their admin panel to interact with my app.

 

I'm trying to do something that I feel should be simple:

1. Have a UI in the admin panel for my app where they can select which products they want to add my feature to (similar to the Remix GR code tutorial where the video demo shows they can select which products to apply it to). I got this set up using the generic CL prompt

npm init @shopify/app@latest

and then selecting Remix and setting all the defaults.

2. After the products are selected I need to add a button to all of those PDP (product display pages). This is not similar to anything in the QR code Remix tutorial since now I'm adding HTML to the merchants' pages. Apparently scriptTags may no longer be used so I figured maybe a Theme App Extension was the way to go? While in my Remix directory I cd-ed to the 'extensions' subdirectory and typed the command

shopify app generate extension

which I then selected Theme App Extension for. There's some starter code for a product rating feature that I left so far. I just wanted to see how doing this within an existing Remix template was different than doing it on its own.

3. Last step, once the button appears on all the PDPs If a shopper clicks that button I want to have a pop of with an iframe (or equivalent) where shoppers can either auth with Google or something else and then interact with my feature (which will call my external APIs and have a 3-pane shopper flow). 

I couldn't get past step 2 since I keep getting "Could not start Cloudflare tunnel: Failed to serve quic connection │
│ error="Unauthorized: Failed to get tunnel"" errors and, that aside, I'm not quit sure I'm even approaching this right. All the ChatGPT bots for Shopify seem to be using outdated data and point to scriptTags but if someone out there know a great tutorial or in general how to build something basic like this it would go a long way!

 

Thank you!!

Reply 1 (1)

SBD_
Shopify Staff
1831 273 421

Hey @timv 

 

I've hit this issue previously and got around it by using ngrok / the tunnel flag.

 

1. With ngrok installed, in a new tab run: `ngrok http 3000` and take note of the tunnel URL.
2. Next time you run `npm run dev` you can pass the URL from step 1. E.g. npm run dev -- --tunnel-url https://ngrok.example.com:3000

Scott | Developer Advocate @ Shopify