Ecommerce Shopify WordPress Discussion

For Any Shopify Geniuses Out There: Theme App Extension Within Remix

I think this 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: 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. 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. 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!! ... I tried creating a Remix template, adding a Theme App Extension and running a basic demo on my dev store via my partner account. Instead I got cloudflare errors and no clear integration between the app extension and my remix app (I couldn't find the star ratings starter extension anywhere). I'm guessing i'm not approaching this correctly.
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.