also for those wondering, Shopify does not support the shopify app config push command anymore, so anytime there is an update to the TOML file you will need to update CLI and run the deploy command
@@stephanodev can you do a tutorial how we can set billing plans? Please And another question, do you create a database for each customer who install the app or just all of them inside of a table?
Yesterday I tried to implement something to see your video, I think in new shopify update your tutorial is not working. Could you release a new tutorial how we can work in new version ?
Hey man, thank you for this great tutorial ! Helped me understand a lot. I have a question, what is the point of using an app extension for your chat ? How does it differ from directly coding it in the shopify theme, and loading the corresponding js file in the theme, since you're communicating with your webapp via ajax ? Also, couldn't the theme app extension communicate directly with your private app via ajax ? Why go through an external express webapp ? Thank you !!
Which extensions do you use when applying remix in the visual studio code editor? You specifically entered an abbreviation that we saw when creating the typescript file (tsrafce)!
**Hi, I'm new to development.** I'm trying to get some details about a customer when they visit a specific product page, and I want to store this data for later processing. Additionally, I need to display some dynamic content on the product page. My question is: **How should I approach this?** Should I develop it as a standard Remix app, or should I build it as an extension using Shopify Admin actions?
Best tutorial by far! Covers a lot of issues and doubts I had when I started. Thank you! Is there a way to read/write data to the Prisma DB of the app from an admin extension? I need the user to enter additional data for a list of products so I can update metafields, but I also need to read and store from/to a prisma table . And also, if I want to use the same action in the product grid and in the detail page as well, do I have to duplicate the action and change the TARGET? or is it possible to define both targets ?
No, not from extension. The only way the extension could communicate is via API, so you may need to build a backend to process CRUD data for extension if needs.
Great Tutorial ! I will request you for create a tutorial about darkmode , lang and currency converter app. particularly , How to manage backend options with theme app extension options, I mean, Backend Darkmode switch enable, How to effect to theme app extension?
Best tutorial so far, with very good example, Still i have one query, As per shopify documentation, resource routes are those, which does not have UI, I am trying to create that which just return orders in json, This works fine when i use that path in browser, but fails when i call that path from postman, due to authentication, can you make a video on that, or guide on some blog.
Thank you for this great tutorial! 👏 Quick question: Why did you opt for an external database like Mongo instead of Shopify's internal Prisma database? Can we access the Prisma database directly from a theme extension?
First, Prisma is not a database. The actual db comes with the shopify CLI is sql lite. SQL lite is fine for development but not for production usage. To leverage Prisma, you better have an external db such as Posgres SQL. Extension can't retrieve or insert to the Shopify Prisma as extension is not part of the admin app.
@@HuyLe-vv7go Let's assume we created a shopify app with some options. How can we allow our extension to retrieve these option securely from the frontend? I know it's possible to use "fetch" and just call a route that loads these settings, but that's not secure, how do we only returns the "shop" specific settings considering that we have a settings table in our sqlite file which is responsible for storing all options for all shops.
great tutorial, one quick question, if i want to connect instagram account and get the instagram post is this possiable in remix? if yes then how can we connect?
Great video bro, thanks a lot for sharing this. could you help me with these two question please: 1. How can I use the admin API from the liquid file, for example if I have a contact us form and I would like to create a customer when someone fill this form, how can i do that ? 2. can i use this admin API in an external server like express, for example I can use only the package @shopify/admin-api-client in my express server ? (this will solve the first question). Thanks a lot
good tuto .. thank you the effort. for the error around 1h03 . action funtion fn should return either a value or 'null' .and for the remix Form you don't need OnSubmit, Remix Form submits automatically to Action fn
i'm stuck in a middle of something and need suggestion i have a theme app extension running and want to request an api inside my shopify app, how can i do that, means i want to hit a controller from the liquid file.
Hey man, this was really useful for me, you have a new subscriber! I was wondering if you can give me a hint on how to achieve something more specific: I want the chat window to appear when a product is added to the cart. Is there an event I can listen to, to achieve this? And finally, I need to grab the id / info of the product to say something about the product in the chat. If you could give me a small tip on each to guide me forward, that would amazing because as a newbie I'm not sure where to look. Thank you very much!
I would check out webhook events 'CARTS_UPDATE' + storefront api to create a widget ui after the event triggers in your store or maybe dynamically open chat widget by sending a request to it but this will be a little complex. Same for grabbing current storeinfo such as cart,customer etc use the storefront api to query this data!
I want to thank you for making this video. Cleared up a few things for me. However, I did find some parts repetitive and frustrating. I don't mean to discourage. I hope you do more of these videos.
My another one question is you are create different youtube server folder and bulid local Api's but you can create api in remix app api and create new table for messages and using this apis in theme extension code this is possible or not ? Please Answer Me ?
Hi Stephano. Thanks for this tutorial! When I open the app on my Shopify I get this error: "Unexpected Server Error TypeError: (0 , import_isbot.default) is not a function". I've been trying to troubleshoot the issue but cant figure out what is causing it. Do you know how to fix it?
Are you getting this error after pulling the code project from my repo and tried to run it or just trying to initialized a new remix app? I would recommend trying to delete the node_modules folder and re-install it again using npm
is there anyone else experiencing an issue with routes being slow ,it seems as if Remix is sending 'Authenticating admin request' on every route change !!
Hey sir I am creating one remix app and install on dashboard by cli but not connecting with Shopify online store theme please help me. I am creating announcement app and i want show announce data on theme but i am unable please help how i did this ?
Use fetch in remix is kinda like writing react within remix without respecting the remix concept of loader. Yes you can use fetch if you need to. But leverage the loader could be better.
How can I handle different payment plans in my app-extension depdening upon the merchant plan for my app ie free or paid, how can I selectively enable features, and also how can I get the billing info in liquid files?
You need to use the billing api for this. Check out my last tutorial where I go about dynamically showing features of your app according to your subscription plan
Our shopify app is approved but the theme extension works with development stores only not on live stores.the app block section don’t show on live store, Any idea why is that?
Hey bro! great tutorial! thanks! I have a question, If I want to create an endpoint to write or read metaobjects, how can I make a shopify admin api auth in the backend server? sorry I'm front end, so understanding backend processes is a bit challenging for me. Haha.
I am adding the access_scopes and it won't allow me read_inventory as the command "npm run shopify app config push" show Command no longer supported. and the app redirect in loop.
Hye mam i really appriciate your work not many video available for remix framework i am your new subscriber from INDIA. can you please help me or guide me how can i create a product customization app using Remix.
@@stephanodev i have a requirement that suppose i need to create a formbuilder app that used to customise products options. if you can create video related to this issue.
I've built one Shopify Remix app. In the default app, there are the.jsx format files under the app > routes. I've added a theme extension for the app's embedded UI for the storefront. Which is to build the folder in an app: extentions > extension name > blocks >.liquid Currently, I'm adding data to the app, and it is stored in the Prisma database. All I want is that when I save the .jsx file data in the app, it will also pass in a liquid file.
@@stephanodev Thanks for response, english is not my first language. I mean to detect when the customer approve the app: export const loader = async ({ request }) => { const { admin, billing } = await authenticate.admin(request);
Better than the official Shopify videos :)
I have only watched 15 min and learned a lot, new sub! I will continue the tutorial.
Best Shopify dev tutorial I've watched, thanks for making it!
also for those wondering, Shopify does not support the shopify app config push command anymore, so anytime there is an update to the TOML file you will need to update CLI and run the deploy command
Thank you SO much! I especially loved the part where you tought us how to create a discount code using Polaris and React :)
Awesome tutorial, please make a tutorial on the scriptTag API
great tutorial, one quick question, if i want to use my back-end (laravel & mysql) instead of having prisma, it is possible? thanks
Yeah of course! U can connect ur app with any backend and db
@@stephanodev can you do a tutorial how we can set billing plans? Please And another question, do you create a database for each customer who install the app or just all of them inside of a table?
Yesterday I tried to implement something to see your video, I think in new shopify update your tutorial is not working. Could you release a new tutorial how we can work in new version ?
Hey man, thank you for this great tutorial ! Helped me understand a lot.
I have a question, what is the point of using an app extension for your chat ? How does it differ from directly coding it in the shopify theme, and loading the corresponding js file in the theme, since you're communicating with your webapp via ajax ?
Also, couldn't the theme app extension communicate directly with your private app via ajax ? Why go through an external express webapp ?
Thank you !!
Which extensions do you use when applying remix in the visual studio code editor? You specifically entered an abbreviation that we saw when creating the typescript file (tsrafce)!
**Hi, I'm new to development.**
I'm trying to get some details about a customer when they visit a specific product page, and I want to store this data for later processing. Additionally, I need to display some dynamic content on the product page.
My question is: **How should I approach this?** Should I develop it as a standard Remix app, or should I build it as an extension using Shopify Admin actions?
Best tutorial by far! Covers a lot of issues and doubts I had when I started. Thank you! Is there a way to read/write data to the Prisma DB of the app from an admin extension? I need the user to enter additional data for a list of products so I can update metafields, but I also need to read and store from/to a prisma table . And also, if I want to use the same action in the product grid and in the detail page as well, do I have to duplicate the action and change the TARGET? or is it possible to define both targets ?
No, not from extension. The only way the extension could communicate is via API, so you may need to build a backend to process CRUD data for extension if needs.
Great tutorial! 🎉
What extension are you using each time you create a app.(something).tsx file and type ts... for it to add the code?
Great Tutorial ! I will request you for create a tutorial about darkmode , lang and currency converter app. particularly , How to manage backend options with theme app extension options, I mean, Backend Darkmode switch enable, How to effect to theme app extension?
Great tutorial. Thank you
great tutorial, one quick question, if I want to connect Instagram API is this possible using remix app If yes How can I connect?
Best tutorial so far, with very good example, Still i have one query, As per shopify documentation, resource routes are those, which does not have UI, I am trying to create that which just return orders in json, This works fine when i use that path in browser, but fails when i call that path from postman, due to authentication, can you make a video on that, or guide on some blog.
Thank you for this great tutorial! 👏 Quick question: Why did you opt for an external database like Mongo instead of Shopify's internal Prisma database? Can we access the Prisma database directly from a theme extension?
First, Prisma is not a database. The actual db comes with the shopify CLI is sql lite. SQL lite is fine for development but not for production usage. To leverage Prisma, you better have an external db such as Posgres SQL. Extension can't retrieve or insert to the Shopify Prisma as extension is not part of the admin app.
@@HuyLe-vv7go Let's assume we created a shopify app with some options. How can we allow our extension to retrieve these option securely from the frontend? I know it's possible to use "fetch" and just call a route that loads these settings, but that's not secure, how do we only returns the "shop" specific settings considering that we have a settings table in our sqlite file which is responsible for storing all options for all shops.
great tutorial, one quick question, if i want to connect instagram account and get the instagram post is this possiable in remix? if yes then how can we connect?
Thank you for making this exhaustive tutorial.
Can you do a video on Shopify App Proxies using remix ?
Thanks man, yeah its been requested and im planning on a tutorial for that 👊🏻
Great video bro, thanks a lot for sharing this. could you help me with these two question please: 1. How can I use the admin API from the liquid file, for example if I have a contact us form and I would like to create a customer when someone fill this form, how can i do that ? 2. can i use this admin API in an external server like express, for example I can use only the package @shopify/admin-api-client in my express server ? (this will solve the first question). Thanks a lot
good tuto .. thank you the effort. for the error around 1h03 . action funtion fn should return either a value or 'null' .and for the remix Form you don't need OnSubmit, Remix Form submits automatically to Action fn
Great video! What's the best Discord server/chan for Remix apps and extensions? Having a hard time finding resources.
i'm stuck in a middle of something and need suggestion i have a theme app extension running and want to request an api inside my shopify app, how can i do that, means i want to hit a controller from the liquid file.
Hey man, this was really useful for me, you have a new subscriber! I was wondering if you can give me a hint on how to achieve something more specific: I want the chat window to appear when a product is added to the cart. Is there an event I can listen to, to achieve this? And finally, I need to grab the id / info of the product to say something about the product in the chat. If you could give me a small tip on each to guide me forward, that would amazing because as a newbie I'm not sure where to look. Thank you very much!
I would check out webhook events 'CARTS_UPDATE' + storefront api to create a widget ui after the event triggers in your store or maybe dynamically open chat widget by sending a request to it but this will be a little complex. Same for grabbing current storeinfo such as cart,customer etc use the storefront api to query this data!
@@stephanodev thank you! 🙏 I will look into that webhook!
I want to thank you for making this video. Cleared up a few things for me. However, I did find some parts repetitive and frustrating. I don't mean to discourage. I hope you do more of these videos.
Great tutorial
My another one question is you are create different youtube server folder and bulid local Api's but you can create api in remix app api and create new table for messages and using this apis in theme extension code this is possible or not ? Please Answer Me ?
Hi Stephano. Thanks for this tutorial! When I open the app on my Shopify I get this error: "Unexpected Server Error TypeError: (0 , import_isbot.default) is not a function". I've been trying to troubleshoot the issue but cant figure out what is causing it. Do you know how to fix it?
Are you getting this error after pulling the code project from my repo and tried to run it or just trying to initialized a new remix app? I would recommend trying to delete the node_modules folder and re-install it again using npm
Can you make from one model a full CRUD example? Can be something simple
can you please show, how to authenticate the request sent from .liquid file in the script tag in our backend ?
When I run npm run dev it gives me a 'Error forwarding web request: AggregateError'. Would appreciate your help.
i watch your videos. but i want how to get file media data using API. so please me any suggestion.
is there anyone else experiencing an issue with routes being slow ,it seems as if Remix is sending 'Authenticating admin request' on every route change !!
Ty very Much, you helped me alot
Hey sir I am creating one remix app and install on dashboard by cli but not connecting with Shopify online store theme please help me. I am creating announcement app and i want show announce data on theme but i am unable please help how i did this ?
which VS Code extension are u using for Remix snippets?
Hi thanks for this nice tutorial. Cant we use fetch API to communicate with the backend?
Use fetch in remix is kinda like writing react within remix without respecting the remix concept of loader. Yes you can use fetch if you need to. But leverage the loader could be better.
how to deploy the app in live server?
is it possible to deploy in Vercel or other? need tutorial
Awesome
which version is compatible for node js and npm
Nice video but cutting parts of it doesn’t make sense to me
How can I handle different payment plans in my app-extension depdening upon the merchant plan for my app ie free or paid, how can I selectively enable features, and also how can I get the billing info in liquid files?
You need to use the billing api for this. Check out my last tutorial where I go about dynamically showing features of your app according to your subscription plan
@@stephanodev Thank you!, any suggestion how to handle that in app-extension. (liquid file)?
@@stephanodev May I know how can we handle the paid/free logic on app-extension? If am not wrong the billing api can be access only on admin ui.
Our shopify app is approved but the theme extension works with development stores only not on live stores.the app block section don’t show on live store, Any idea why is that?
Hey men Can You let me know where you hosted your app?
Is there any chance how can i check how many days are left for trialDays?
Hey bro!
great tutorial! thanks!
I have a question, If I want to create an endpoint to write or read metaobjects, how can I make a shopify admin api auth in the backend server?
sorry I'm front end, so understanding backend processes is a bit challenging for me. Haha.
I am adding the access_scopes and it won't allow me read_inventory
as the command "npm run shopify app config push" show Command no longer supported.
and the app redirect in loop.
Try to reset the app npm run dev -- --reset or deploy it npm run deploy
@@stephanodev But then it remove all scops from the toml file.
I have used the commend "npm run shopify app deploy" it's working@@stephanodev
npm run deploy ( npm run shopify app deploy) Seems to be the prefered way. No need for the reset it seems.
Thanks a lot . Your coffee link does not work please fix it to let us to thank to you kindly. Greetings from Türkiye
Updated
Thank you
how can made custum api and how authnicate this ....like tokens session plesss made custum api and authinticate this api
Hye mam i really appriciate your work not many video available for remix framework i am your new subscriber from INDIA. can you please help me or guide me how can i create a product customization app using Remix.
Thanks for the support! I will release a few other projects with remix soon so stay alert! 🔥
@@stephanodev i have a requirement that suppose i need to create a formbuilder app that used to customise products options. if you can create video related to this issue.
So much changes in the few months from when this video was created.
I've built one Shopify Remix app. In the default app, there are the.jsx format files under the app > routes.
I've added a theme extension for the app's embedded UI for the storefront.
Which is to build the folder in an app: extentions > extension name > blocks >.liquid
Currently, I'm adding data to the app, and it is stored in the Prisma database.
All I want is that when I save the .jsx file data in the app, it will also pass in a liquid file.
How you save in database once user approve the charges of the app?
U can make a transaction model and create a new objct everytime a user succesfully completes a payment with its details
@@stephanodev Thanks for response, english is not my first language. I mean to detect when the customer approve the app:
export const loader = async ({ request }) => {
const { admin, billing } = await authenticate.admin(request);
const response = await admin.graphql(
`#graphql
query Shop {
app {
installation {
launchUrl
activeSubscriptions {
id
name
createdAt
returnUrl
status
currentPeriodEnd
trialDays
}
}
}
}
`,
{ variables: {},}
);
const responseJson = await response.json();
const {activeSubscriptions, launchUrl} = responseJson.data.app.installation;
console.log("Response: ", activeSubscriptions);
console.log("Response shop: ", activeSubscriptions.shop);
if (activeSubscriptions.length < 1) {
await billing.require({
plans: [MONTHLY_PLAN],
onFailure: async () => billing.request({
plan: MONTHLY_PLAN,
isTest: true,
returnUrl: launchUrl,
}),
});
}else{
await prisma.customer.create({
data: {
shop_url: "url store",
status: true,
},
});
}
return json({ apiKey: process.env.SHOPIFY_API_KEY || "" });
};
This is my code and is inserting multiple time in database using prisma.
pless added backend code also in your github
backend setup source code in also github???
Hi, can you make tutorial for retrieving a single asset for a theme using admin rest api remix?
Remix Setup 2:04
1:30:45