How to make a Shopify App

[@CodingWithJan]

🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=build-app-yt 👨‍💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-develope

[@ChrisJaydenBeats]

Great overview. Even if you’re an experienced developer - wrapping your head around this ecosystem takes some time. 💪🔥

[@CodingWithJan]

Yes it does! 😁

[@hrlrl9309]

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.

[@evaldasraisutis3058]

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.

[@thenelson_o]

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

[@aubame-bloodclut-zette6745]

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)?

[@militaryforcestv1]

Hey, in freemote will you add app development in the future? also, do you use hydrogen framework in freemote?

[@LearnWithNoor036]

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

[@leeman3749]

Excellent tutorial. Clear and well presented. I was stuck installing and connecting and this helped a lot. Thanks so much.

[@alexneagus]

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

[@danielgraaf5042]

When a command doesn't work first time - it's good to see that you re-run the command too. @9:52

[@zeeshanaltaf9606]

My Favourite KZbinr 😍

[@CodingWithJan]

Haha never thought to hear that. I'll take it, thanks 😁

[@_garebear]

You rocketed me +45 days in 13m38 seconds. Take my money. :)

[@CodingWithJan]

Awesome!! :-) You're most welcome, and I highly appreciate the super thanks! Your funds will directly be invested in a coffee 😁

[@sosimplemelodies]

Awesome video! looking forward to learning these new programs

[@CodingWithJan]

🚀 awesome, let's go :-)

[@skylimitproductions3509]

Fantastic video! Helped me clear up a lot of stuff before diving into details

[@liamgriffin6897]

Amazing video Jan! Really like the context and background you're providing here.

[@CodingWithJan]

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.

[@Bhavesh-w6o]

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.

[@CodingWithJan]

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. :-)

[@Bhavesh-w6o]

@@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?

[@qemania]

I love your content .. can we have an updated version following the updates happening on Shopify (I believe it is a bit outdated now)

[@RhsRasel]

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.

[@CodingWithJan]

Hey thanks for the fantastic feedback and the ideas 😃

[@johnnydriesen7575]

Amazing content. Thanks for sharing your knowledge. I was just wondering.... Does it have to be React ? (or can it be Vue as well ?)

[@inutiledegliinutili2308]

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

[@ICOReviewtoken]

Now 15-5 -2022 and Nextjs removed when i run shopify create node

[@M4rkux]

Great video, I needed that information, thank you.

[@lts8683]

ngrok is very slow with my network, Are there any alternatives?

[@DhaneshYadav-to3tx]

How can I create the app with Laravel by follow the same instructions.

[@1mrk2mrk22]

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

[@tohauk18]

Gold contact. Thank you Jan 💥🙌

[@zzzxmichael4492]

You should make a video on how to make a ajax drawer cart for themes that don't have one. For example Turbo theme.

[@KevinFeatherstone]

“Here we are in the PowerPoint of truth and justice...” hahaha :) :) :)

[@CodingWithJan]

😁

[@danielglassford9268]

LOL the last bit about how to like a youtube video got me like 😆

[@CodingWithJan]

Almost forgot this one!! 😁

[@hardikcomp]

Great Video Jan, a video on "app billing" would be super great, there are no videos currently there for it

[@CodingWithJan]

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! :-)

[@pastaleshta]

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?

[@archiee1337]

Thank you very much for this great vid!

[@sandeeppangeni3114]

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?

[@TomasMendes]

Thank you! This is great!

[@coderlicious6565]

Is this a necessary thing to do to avoid paying the $29 monthly for an actual Shopify account to test your themes/apps ?

[@geoey567]

I trust you with my lifee!

[@kartikeyjangir6003]

Love the you like youtube videos it's so unique 😂😂

[@LesMenu]

very motivational, nice and helpfull video !!! thanks a tone ..

[@satiscloud9703]

Just needed that bro!

[@tochukwuokafor5768]

shopify create shows Command `create` not found. Did you mean `plugins update`?

[@conexy2k7]

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 ?

[@skillfulactor09]

Do you teach building theme and Shopify apps at freemote or just Shopify liquid

[@shakiesanov]

Awesome video Jan! Also is there a way to add a customer reviews section on my homepage, if my theme doesn't have one?

[@CodingWithJan]

You can have a testimonial section, but a fully functional review section requires and app. (because reviews are stored in a database)

[@thientranduy9806]

current version 12/20/2022 will not be able to do this. Can you make a new video?

[@ronnymageh]

Oh my! Could you drop a link to the that tutorial at the very end! haha :)

[@CodingWithJan]

Haha 😁

[@bane2256]

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.

[@CodingWithJan]

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 :-)

[@bane2256]

@@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?

[@mvn3949]

Is it possible to make a Shopify app using Python and Django? I am learning Django and would like to build one.

[@nestorviloria6453]

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.

[@CodingWithJan]

Hey Nestor, authentication is now supposed to be done via jwt tokens. Got an intro video on app authenticstion too. Its the next one :-)

[@ak3763]

how do i change position of sale price and regular price in shopify debut theme on product page?

[@kulvindersingh2738]

It was helpful. Can you guide how to build a payment app in Shopify please ?

[@patravel-tv3676]

Nice video! I'd be interested in seeing a routing example

[@deborahaanyuoduman7548]

Could you do a video on how to build a Shopify shipping app using React and Node ?

[@CodingWithJan]

That's pretty much what this video is about 😅

[@deborahaanyuoduman7548]

@@CodingWithJan for shipping? Using the fulfillment APIs.

[@wagiewojak]

SaaS is not "system as a service"

[@anthonygibson3709]

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.

[@tanzimmahiralvi7701]

How to add reviews for shopify app

[@TheStreetArtRecords]

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.

[@CodingWithJan]

Sounds complex 😁 To be honest, I would need to do a lot of research here too.

[@dawid_dahl]

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?

[@CodingWithJan]

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.

[@dawid_dahl]

@@CodingWithJan Thank you kindly. Great advice. 🙌🏻

[@rajeshkushwaha7358]

Hi jan, I want to create third party payment provider app for shopify using Python. So please conform me shopify does support python language

[@kronyxapps]

Im having problems with ngrok its not installing the app

[@learningstudios5305]

Please create a playlist Shopify App development with React and Node Js from scratch...

[@_garebear]

Thanks!

[@task4store-shopifysmalltas667]

Super interesting one! How to approve the app at Shopify quickly?

[@CodingWithJan]

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. :-)

[@youcefwippert]

Great video! Do you think you'll also create a Course like Freemote for Shopify Apps in the future? Would be cool

[@CodingWithJan]

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.

[@samarpanharit4268]

I know Shopify APIs very well. Both REST and GraphQL. What can I do with that? I mean how do I proceed?

[@CodingWithJan]

The real question is, what is your goal?

[@agent4701]

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?!

[@ericksoto6623]

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

[@CodingWithJan]

Hey Erick, you may want to check out Heroku. They also have a free plan :-)

[@ericksoto6623]

@@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

[@amiteshsingh6165]

how to get access token to make admin api calls

[@socialwebwiki]

Awesome!

[@akinfotech8767]

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

[@anthonydavid9269]

Great Work

[@CodingWithJan]

Thanks so much 😃

[@GershonBenYitzhak]

What switches you using?

[@CodingWithJan]

Extra Extra Clicky 😁 I think it's the green ones from razer.

[@GershonBenYitzhak]

@@CodingWithJan Does that mean Box Navy?

[@CodingWithJan]

It's the green ones from here 😀www.razer.com/eu-en/razer-mechanical-switches

[@matteobarberis1149]

Can i communicate with an html element on my shopify theme through my app?

[@CodingWithJan]

Hey Matteo, yes it' possible.😀

[@kulvindersingh2738]

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

[@sane2205]

Can you make video about Buy Button?

[@scherrylovelyrics3110]

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😐😅

[@Aerotk]

Is there any way that i can install shopify app cli with nodejs? because shopify only give the support with Ruby right now.

[@CodingWithJan]

I think you need Ruby. But you can still use it to create NodeJs based apps :-)

[@cyberpvnk]

it seems like it's beginning to get a bit dated. Some of the commands no longer have the same format. Good delivery though. 🙂

[@agent4701]

mach doch mal deine videos auf deutsch! Englisch ist auf dauer echt anstrengend und ätzend :D Danke!

[@ashwindibu1520]

Can We Use Django?

[@CodingWithJan]

yes, you can use any language, but personally would prefer NodeJS, cause you'll find more prebuilt packages for shopify apps.

[@paeldenjustin5271]

Can we make apps like klaviyo?

[@CodingWithJan]

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.

[@dave0811]

Please make a tutorial about how to get paid.

[@collinslife7021]

Very useful

[@CodingWithJan]

Thanks Collin! 😃

[@collinslife7021]

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 😀👌👍

[@dev6716]

how we can show data to shopify store from our app :( still didn't found any solution

[@CodingWithJan]

Hi Sajeel, You can use shopify ScriptsTags or App blocks. shopify.dev/apps/online-store/other-integration-methods Hope this helps :-)

[@dev6716]

@@CodingWithJan Thanks for link #Jan i really like your tutorials and learn a lot from you

[@dev6716]

@@CodingWithJan Please make a tutorial on this we didn't find any single tutorial on it

[@versonality4435]

10:00 problem solving mode = on

[@a.g.hustlegarland4197]

Wow dude bruh this is coool thank you my German bro

[@CodingWithJan]

Super welcome 😃

[@a.g.hustlegarland4197]

@@CodingWithJan I don't know about coding. However I'm familiar with Shopify and I have an app idea for merchant's to use

[@ECOMMichael]

Any experienced developers here looking to partner up?

[@mdmathewdc]

I'm interested

[@marians5015]

Real app would be great

[@danielwall1277]

What is the best way to market a shopify app you have created?

[@CodingWithJan]

--> search traffic on the App store --> direct outreach --> partner with agencies / freelancers on affiliate --> influencer marketing

[@hieucdtspk]

9:56 =))

[@RepayEvilWithGood]

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."

[@coderlicious6565]

His title is fine. Most people viewing this are developers.

[@siphiworatsibe5609]

I WANT TO BUILD A PRICE COMAPARISON WEBSITE.

[@talbertherndon1925]

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

[@ShaikKhizar-q2m]

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)

[@silvrsurfer]

I had an app idea but might as well give up, damn 🥲