For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
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!!
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