How to make a Shopify App
Вставка
- Опубліковано 11 тра 2021
- The fastest way to create a Shopify App from scratch.
► Free Help
--------------------------------------------------------------------------
🎯 Get Personal Career Advice for Shopify Developers:
codingwithjan.com/personal-ca...
👨💻 Find a qualified Shopify Developer for your next project:
codingwithjan.com/hire-a-deve...
► Contact
--------------------------------------------------------------------------
🌐 Website
codingwithjan.com
🤝 LinkedIn
/ jan-frey
► Recommended Resources
--------------------------------------------------------------------------
App CLI:
shopify.dev/tools/cli
Shopify Partner Program
help.shopify.com/en/partners/...
► SEO Description
--------------------------------------------------------------------------
In this video, we're using the Shopify App CLI to create a Shopify App from scratch. The App is built on NodeJs and React. If you want to start learning about App Development, you might also look further into the Shopify App Bridge or GraphQL.
🎯 Get Personal Career Advice for Shopify Developers:
codingwithjan.com/personal-career-advice
👨💻 Find a qualified Shopify Developer for your next project:
codingwithjan.com/hire-a-developer
Would love to see a video on app architecture for production apps! Particularly, how would you address scaling needs and noisy neighbor problem when having to run many background tasks for many stores concurrently.
Nice tutorial.
Shipping/Logistics app would be fine. Store the user's data in your database. During checkout, user's can select your shipping method and I would calculate billing price and attach it to the total price
Fantastic video! Helped me clear up a lot of stuff before diving into details
great video :D could you please create a tutorial showing how to use polaris to create the react components as well as interact with the shopify API, for example making a measurement app so which allows you to add measurements to products so customers can buy a certain amount of your product (300m of curtain etc)?
This is the first time am watching your video. Your way of explaining is pretty cool and enjoyable. I have enjoyed a lot. Thanks Jan. I am MD. Abdullah sayket from Bangladesh
Amazing video Jan! Really like the context and background you're providing here.
Hey Liam, thanks so much 😁
Especially when someone is just starting out it's so easy to overlook, that the technical side of things is only one side of the equation.
Excellent tutorial. Clear and well presented. I was stuck installing and connecting and this helped a lot. Thanks so much.
Great overview. Even if you’re an experienced developer - wrapping your head around this ecosystem takes some time. 💪🔥
Yes it does! 😁
I agree. The Shopify examples are too complex. It's really hard to understand things from first principles. I'm not sure why they don't include the most basic Hello World app examples and build up from there. They're using too many frameworks and assume too much knowledge of obscure things. Jan's explanation really helped.
Hi Jan, very informative! I'm sure you get this question all the time - I want to be at your level of proficiency with the back end coding. Where do you start to learn all these languages in a timely manner? thanks
Hi Jan, do you know how to change what sort by best selling or sort by newest does in collections? I’d like to change the code but I can’t seem to find the code anywhere
Thank you very much for this great vid!
Awesome video! looking forward to learning these new programs
🚀 awesome, let's go :-)
Great video, I needed that information, thank you.
Gold contact. Thank you Jan 💥🙌
I have this error: Oauth error invalid_request: The redirect_uri and application url must have matching hosts where is the URL textbox inside the app configuration ?
Just needed that bro!
very motivational, nice and helpfull video !!! thanks a tone ..
I just want to create a simple app for MY store where the user has an input I make some api calls and show retrieved info. What is the best approach?
Amazing content. Thanks for sharing your knowledge.
I was just wondering.... Does it have to be React ? (or can it be Vue as well ?)
ngrok is very slow with my network, Are there any alternatives?
How can we communicate between the theme app extension and the app backend? For example. form submit and save that data to the database via the app backend. Do you have any idea about it?
Do you teach building theme and Shopify apps at freemote or just Shopify liquid
Hey, in freemote will you add app development in the future? also, do you use hydrogen framework in freemote?
how do i change position of sale price and regular price in shopify debut theme on product page?
How can I create the app with Laravel by follow the same instructions.
Is this a necessary thing to do to avoid paying the $29 monthly for an actual Shopify account to test your themes/apps ?
shopify create shows Command `create` not found. Did you mean `plugins update`?
current version 12/20/2022 will not be able to do this. Can you make a new video?
Now 15-5 -2022 and Nextjs removed when i run shopify create node
LOL the last bit about how to like a youtube video got me like 😆
Almost forgot this one!! 😁
You should make a video on how to make a ajax drawer cart for themes that don't have one. For example Turbo theme.
Im having problems with ngrok its not installing the app
I love your content .. can we have an updated version following the updates happening on Shopify (I believe it is a bit outdated now)
When a command doesn't work first time - it's good to see that you re-run the command too. @9:52
Hi jan,
I want to create third party payment provider app for shopify using Python. So please conform me shopify does support python language
Thank you! This is great!
how to get access token to make admin api calls
how to show app in frontent main store url any one know ?
Nice video! I'd be interested in seeing a routing example
Love the you like youtube videos it's so unique 😂😂
Fantastic video, Jan! I appreciate the background information and perspective you've provided. But for any particular extension, I'd like to know more about CSS and JS. When creating any Checkout UI extensions, I can't seem to figure out where to add CSS or JS.
Okay, I feel this might be more a react-problem then.
Cause if you're going off the starter templates / and Polaris components, it's mostly standard react. :-)
@@CodingWithJan I am using javascript as extension language. The reason I am looking to write javascript is because I want to access dom-element. I am looking to pre-fill postal code input field in "Shipping Address" section. Also, I want the postal code input field to be read-only, i.e disabled. is that something possible to achieve using Shopify UI Extension?
Hi Jan, really like your video. I would like to request you to make some video on Shopify App Dev. Topics- saving data to database, retrieve the data from database, showing data on app admin site etc. If possible, please make some videos on the requested topics. Thanks in advance and I'm really gratitude to you as you made some complex things too easy. Looking forward to see some awesome video.
Hey thanks for the fantastic feedback and the ideas 😃
Thank you very much ,
Are there ways to build mobile apps outside the Shopify store?
Because it is so expensive there are limited options
If there are good features and a cheap price, please put the link
Thank you
Ich arbeite unter mac und hier gibt es den befehl "shopify create" überhaupt nicht. Kannst du das mal komplett erklären und nicht nur halb?!
I trust you with my lifee!
How to add reviews for shopify app
Hi,
This is a really cool tutorial. I have just one question...How do you manage s in safari? Apparently, Apple released the Intelligent Tracking Protection (ITP) functionality a while ago and it looks like this has been a headache for Shopify developers when releasing the apps to production as their apps only work in Chrome but not Safari (iFrames). Thanks a lot.
Hey Nestor, authentication is now supposed to be done via jwt tokens. Got an intro video on app authenticstion too. Its the next one :-)
Great Video Jan, a video on "app billing" would be super great, there are no videos currently there for it
Hey Hardik,
Thank you for your suggestion, It's noted.😉
You can learn more about it on the docs
shopify.dev/apps/billing
Have an awesome day! :-)
Awesome video Jan! Also is there a way to add a customer reviews section on my homepage, if my theme doesn't have one?
You can have a testimonial section, but a fully functional review section requires and app. (because reviews are stored in a database)
Thanks!
Awesome!
It was helpful. Can you guide how to build a payment app in Shopify please ?
Gibt es eine Möglichkeit dir eine Frage bezüglich Shopify Code zu senden? Dachte ich schreibe dir auf Instagram aber hab dann deine 1. Zeile gelesen😐😅
Hello
its good video :)
also i want to add ajax cart drawer in free debut theme
can you please explain with code in video
thanks
Would you please make video to create a php shopify payment app/gateway from scratch with every detail/step by step, which will accept the payments using credit card form well known as Hosted payment form. It would be a great help! thanks
SaaS is not "system as a service"
Is there any way that i can install shopify app cli with nodejs? because shopify only give the support with Ruby right now.
I think you need Ruby. But you can still use it to create NodeJs based apps :-)
Please create a playlist Shopify App development with React and Node Js from scratch...
You rocketed me +45 days in 13m38 seconds. Take my money. :)
Awesome!! :-)
You're most welcome, and I highly appreciate the super thanks!
Your funds will directly be invested in a coffee 😁
My Favourite UA-camr 😍
Haha never thought to hear that. I'll take it, thanks 😁
“Here we are in the PowerPoint of truth and justice...” hahaha :) :) :)
😁
Great Work
Thanks so much 😃
Hi Jan! How can I host my custom app? I am basically new on adding an app to a host and I don´t really know how to stop using my computer as a local server.Thanks
Hey Erick, you may want to check out Heroku. They also have a free plan :-)
@@CodingWithJan Hi Jan! Can you make a video about that? I would really appreciate it, still having issues deploying my app to Heroku. Thank you in advance. Kind Regards
Is it possible to get your own variables inside of liquid templates using apps? For instance if I create some kind of object in my app database, would it be possible to have this data available as a {{ placeholder variable }} in .liquid template files? Just like one would access {{ product.price_min }} or such?
Hey Dawid, :-)
I think it may be possible through product Metafields.
I don't believe it's good practice to operate this way either, I haven't seen any app using this pattern yet.
It would be better to just use the regular way to integrate apps into a theme like ScriptTag, Assets, or App blocks which is the latest addition to Shopify Apps.
Have an awesome day.
@@CodingWithJan Thank you kindly. Great advice. 🙌🏻
Great video! Do you think you'll also create a Course like Freemote for Shopify Apps in the future? Would be cool
Hey Youcci,
great question :-)
I could imagine something like a "how to build an App"-course, but as you know the technical side of things is only half of the equation.
As for the business side of things, right now I feel much more confident to help students achieve their goals with Freelancing.
Can you make video about Buy Button?
Can i communicate with an html element on my shopify theme through my app?
Hey Matteo, yes it' possible.😀
If I am understanding correctly, a shopify developer creates themes and and apps for shopify stores. A shopify theme dev takes an existing shopify theme and modifies the code where the client requests so, using html, css, javascript, and liquid. An app dev creates apps to expand on the functionality of the client's store. App dev is generally less profitable and more difficult than theme dev. Is this correct? I'm new to the industry and want to make sure I understand things correctly.
Hey Bane great question.
So
a Shopify Developer is someone who helps with the code side of things. Depending on the person's qualifications or specialisations this can either mean themes, apps or both.
In general I consider customizing and extending prebuilt themes to be much more cost effective than building themes from scratch.
It's an in demand skill, which can be very profitable.
Building apps can also be very profitable, but the barrier of entry is just higher.
Hope that helps :-)
@@CodingWithJan Good info, thanks. So a shopify dev can take a theme that someone else has created, import it to vs code, make changes to the existing theme code, call it their own and sell it to a client?
I know Shopify APIs very well. Both REST and GraphQL. What can I do with that? I mean how do I proceed?
The real question is, what is your goal?
it seems like it's beginning to get a bit dated. Some of the commands no longer have the same format. Good delivery though. 🙂
This first half of this video is just trying to discourage from building Shopify apps, so we'll buy your course. What does comparing freelancing to Shopify apps have to do with building a Shopify app? I get it. You're trying to sell your course, but we didn't click this video for that.
Oh my! Could you drop a link to the that tutorial at the very end! haha :)
Haha 😁
Hey Jan, hope you are doing well. I am a self-tought hobby coder. With the very minimal knowledge gained about Shopify, I am intending to create a custom payment gateway, as I am not able to connect to payment services from my country (Kosovo). Could you provide me some guidance on how to set up my app in order to integrate credit/debit card payment through local banks ? Thanks a lot for your time reading this comment.
Sounds complex 😁
To be honest, I would need to do a lot of research here too.
Could you do a video on how to build a Shopify shipping app using React and Node ?
That's pretty much what this video is about 😅
@@CodingWithJan for shipping? Using the fulfillment APIs.
10:00 problem solving mode = on
Please make a tutorial about how to get paid.
Super interesting one! How to approve the app at Shopify quickly?
Thanks 😃
First you need to match the requirements
shopify.dev/concepts/app-store/getting-your-app-approved/app-requirements
And then you can hand in the app for review. :-)
Can we make apps like klaviyo?
In theory yes, in practice no.
I guess a dozen of developers were working on it full time for quite a while. If you add up all the working hours it likely adds up to thousands. I'd rather suggest solving a smaller / very specific problem.
how we can show data to shopify store from our app :( still didn't found any solution
Hi Sajeel,
You can use shopify ScriptsTags or App blocks.
shopify.dev/apps/online-store/other-integration-methods
Hope this helps :-)
@@CodingWithJan Thanks for link #Jan i really like your tutorials and learn a lot from you
@@CodingWithJan Please make a tutorial on this we didn't find any single tutorial on it
What switches you using?
Extra Extra Clicky 😁
I think it's the green ones from razer.
@@CodingWithJan Does that mean Box Navy?
It's the green ones from here 😀www.razer.com/eu-en/razer-mechanical-switches
Very useful
Thanks Collin! 😃
For sure, even though I will be transferring my store to my own servers and start from scratch, your videos provide quality help and I hope to see more of them more often 😀👌👍
Can We Use Django?
yes, you can use any language, but personally would prefer NodeJS, cause you'll find more prebuilt packages for shopify apps.
What is the best way to market a shopify app you have created?
--> search traffic on the App store
--> direct outreach
--> partner with agencies / freelancers on affiliate
--> influencer marketing
Real app would be great
Wow dude bruh this is coool thank you my German bro
Super welcome 😃
@@CodingWithJan I don't know about coding. However I'm familiar with Shopify and I have an app idea for merchant's to use
mach doch mal deine videos auf deutsch! Englisch ist auf dauer echt anstrengend und ätzend :D Danke!
Any experienced developers here looking to partner up?
I'm interested
9:56 =))
Dude, you seem to know your stuff, but we're hoping to learn how to find a programmer who can build an app for us. Your video should be titled, "If you want to make a Shopify App yourself."
His title is fine. Most people viewing this are developers.
I am getting this error, can anyone tell how to resolve it.
error
│ │
│ Could not start tunnel, max retries reached │
│ │
│ To investigate the issue, examine this stack trace: │
│ at pollTunnelStatus [as _onTimeout] (Users/Desktop/the │
│ -app/node_modules/@shopify/app/dist/cli/services/dev/urls.js:78) │
│ at listOnTimeout (node:internal/timers:569) │
│ at processTimers (node:internal/timers:512)
I WANT TO BUILD A PRICE COMAPARISON WEBSITE.
This is now outdated can you please show us how to do this with the new version I keep getting errors with ngrok ERR_NGROK_3200
I had an app idea but might as well give up, damn 🥲