Shopify How to Migrate to Checkout Extensibility (Upgrade from Checkout.liquid and Shopify Scripts)

On August 13, 2024 Shopify Scripts and Shopify.liquid will no longer be supported.
All stores have to migrate to the new checkout extensibility before this date.
► 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
► Timestamps
--------------------------------------------------------------------------
00:00 Today's Topic
00:38 Checkout Extensibility from 30.000 ft
01:50 Step by Step Upgrade Path
05:40 Hands on Example
06:15 Initial App Setup
09:43 Implementing the Date Picker
18:00 Wrapping up
► SEO Description
--------------------------------------------------------------------------
Checkout Extensibility Opens New Ways to Customize Checkouts on Shopify.
Further, it will also replace the checkout.liquid file as well as Shopify Scripts.
As a consequence, all merchants have to migrate to the new Checkout Extensibility.
In the first part we get ourselves an overview about all the technologies included in Shopify's Checkout Extensibility. Namely we're taking a look at Checkout UI Extensions, Shopify Functions, Webpixel Extensions, and Post Purchase Extensions. In the next step, we cover a step by step framework for successfully migrating to checkout extensibility, if you're currently using checkout.liquid or Shopify scripts.
codingwithjan.com

Пікірлер: 96

  • @CodingWithJan
    @CodingWithJan8 ай бұрын

    🎯 get personal advice for your developer career. (free for a short time) codingwithjan.com/career-advice

  • @adeisaac
    @adeisaac Жыл бұрын

    My goodness, that summary of the technologies was soooo on point, so perfect. Thankkkkkkkk you. I am superexcited....wooooo

  • @CodingWithJan

    @CodingWithJan

    Жыл бұрын

    Super welcome 🤜🤛 :-)

  • @TongMichael
    @TongMichael Жыл бұрын

    Thank you so much Jan! Your videos are so inspiring and useful! That's what I need!!!😄

  • @CodingWithJan

    @CodingWithJan

    Жыл бұрын

    Awesome! Thanks Michael! 😄

  • @TongMichael

    @TongMichael

    Жыл бұрын

    @@CodingWithJan The Shopify function video that you made is awesome too! It would be nice if you can also make a new video about Branding API 😄 Btw, have you thought about launching a Udemy course about Shopify Theme 2.0? I will definitely support it!

  • @CodeInspire
    @CodeInspire Жыл бұрын

    You nailed it Jan. 👏

  • @CodingWithJan

    @CodingWithJan

    Жыл бұрын

    Thank you Hujjat! Glad it's helpful. 😄🙏

  • @chika-ibeneme
    @chika-ibeneme Жыл бұрын

    Thank you Jan! :)

  • @jatin0sangani
    @jatin0sangani Жыл бұрын

    That's what we are looking for :)

  • @gabrielbourke1194
    @gabrielbourke1194 Жыл бұрын

    You da man Jan!

  • @CodingWithJan

    @CodingWithJan

    Жыл бұрын

    🤜 🤛

  • @muhammadaqibshahzad9494
    @muhammadaqibshahzad949411 ай бұрын

    Thank you for amazing videos

  • @CodingWithJan

    @CodingWithJan

    10 ай бұрын

    Awesome!! Glad the content was helpful. :-)

  • @pramodwagh8864
    @pramodwagh8864 Жыл бұрын

    Hey Jan, it's a very good video. thank you Can you please make one video on the web pixel extension?

  • @nguyenthanh2524
    @nguyenthanh25243 ай бұрын

    Good video thank you for sharing

  • @fenbo-cx3hz
    @fenbo-cx3hz2 ай бұрын

    thanks!

  • @minhucvu3106
    @minhucvu3106 Жыл бұрын

    Thanks for great video. Can you make a video regarding bundle pls?

  • @user-et9mc1rj9x
    @user-et9mc1rj9x Жыл бұрын

    Hello Jan, thank you, this video is so helpful. Still I don't think that an app can embed a payment form or payment fields in checkout page and adapt shopify checkout logic, do you think it is possible?

  • @antoinebohssain1077
    @antoinebohssain10778 ай бұрын

    Thank you very much

  • @CodingWithJan

    @CodingWithJan

    8 ай бұрын

    Any time!

  • @viksjangid7751
    @viksjangid7751 Жыл бұрын

    Can you create a short video to how can i setup shopify app on server side ?

  • @icy4640
    @icy46404 ай бұрын

    how can we have 2 elements in one checkout UI extension? like a title and an input

  • @suarezalexjohnpadillo692
    @suarezalexjohnpadillo69210 ай бұрын

    Great Tutorial man! Just want to know, Is there a way that I can communicate the DATA from my APP (admin panel, which has data) and fetch to another APP (checkout UI extension)

  • @phantazzor
    @phantazzor10 ай бұрын

    I have a shopify vocab issue ! as a developer when I hear migration, I expect to go to a newer version of the same tech, but here you just mean change/ improve ? what do migration stand for within that sphere ? theme migration ? liquid to hoxygen ? plugin versioning ? very good content btw

  • @XinChaoLumina
    @XinChaoLumina9 ай бұрын

    Could you do more a sample for discount ?

  • @nishmamaskey1093
    @nishmamaskey109311 ай бұрын

    Hey Jan, great video! can you do a tutorial on if customer selects any particular state or country then display a specific message? Thanks!

  • @CodingWithJan

    @CodingWithJan

    10 ай бұрын

    Hi Nishma, Thank you for the positive feedback and the interesting video suggestion! I will be sure to pass this along to Jan and if it aligns with our upcoming plans, we can certainly consider adding a tutorial on displaying specific messages based on customer location to our list of video topics. Thanks again for your input! Best, Joy (Team)

  • @SanSan-TR
    @SanSan-TR Жыл бұрын

    Hello! Really really nice video! And perfect timing I must say Just a question, what about AB Testing on Checkout for lets say custom UI elements? Where should we place the optimize (or whatever) script?

  • @TheNewFaceOfHSP

    @TheNewFaceOfHSP

    10 ай бұрын

    Not going to happen according to my research. Shopify will need to make an A/B testing solution or you will need to have multiple components and switch them for certain periods of time.

  • @rakibahmed1011
    @rakibahmed101110 ай бұрын

    Please make video on how can we create app using remix js. Share your thoughts on building app using remix js. Future aspects of shopify app development using remix js

  • @techforyou245
    @techforyou2459 ай бұрын

    Is there a way we can instead of send it as order notes rather than metafields?

  • @hunghuy2156
    @hunghuy2156 Жыл бұрын

    Can you make a video about Checkout Branding api, the document is so hard to understand. The old checkout i can custom css whatever i want but don't know how to bring all my css to new checkout :(

  • @eugenechumak
    @eugenechumak Жыл бұрын

    Please please please make the same about Branding API!

  • @spelarnet
    @spelarnet Жыл бұрын

    how do I pick a date between a range ? cause when I do "disabled={[start='2023-05-15', end='2023-05-25']}" it only disables those dates not the ones inbetween

  • @erik_sava
    @erik_sava Жыл бұрын

    Hi Jan, will this be available for the regular Shopify plan? I believe that checkout customizations are only available on Shopify plus plans. Thank you

  • @shivamjha8985

    @shivamjha8985

    8 ай бұрын

    yes that is what I also had a doubt about!!

  • @user-vc5qc5lc8u
    @user-vc5qc5lc8u Жыл бұрын

    Is this only working for Shopify Plus plan ? For me "App home" always ends up with a 502

  • @Zota12
    @Zota12 Жыл бұрын

    I have applied the freemote. How can I get the curriculum you told? please

  • @codewithaditya6255
    @codewithaditya62555 ай бұрын

    Hello, I found this channel more helpful than the Shopify community portal. Please just let me know can I render an containing multiple coupons and offers on my Shopify checkout page? Just at the bottom of the information section. Will be waiting for your response or any one else.

  • @PriyankaKumari-jl3nl
    @PriyankaKumari-jl3nl Жыл бұрын

    Hello Jan I hope you are good you have excellent knowledge about shoipify. I am also shopify developer and I saw your video. Please mke a video on shopify websites speed, I mean how to increase shopify speed and how many ways we can increase the speed. Thanks

  • @mutluemre93
    @mutluemre938 ай бұрын

    Hello, how can I change a field on the checkout page? I have an input area for the City name; however, I want to make it a Dropdown field. Do you know how I can do that?

  • @tuanang8739
    @tuanang8739 Жыл бұрын

    Not too little information, not too long also, just enough to build the first stepping stone

  • @AndrewDelman
    @AndrewDelman3 ай бұрын

    Great video thanks for the help! Can you make one on Web Pixel Extensions. I had pasted a script in the checkout.liquid in the past, but now that doesn't seem to work. Would love help on creating a Web Pixel extension that captures cart/checkout variables like cart total, cart quantity, orderID, orderTotal etc. Thank you!

  • @CodingWithJan

    @CodingWithJan

    3 ай бұрын

    Interesting topic, but will take a while to get there, as the pipeline is quite busy right now 😄

  • @Msz-pm4dl
    @Msz-pm4dl2 ай бұрын

    can we edit order summary section ?, I am developing a custom app for tax and duty calculation, app is sending shipping methods on checkout page containing shipping, tax and duty, page is showing shipping in order summary section but not taxes and duties, any solution for this,?

  • @nickmirabella1
    @nickmirabella16 ай бұрын

    do you have a video on how to get google enhanced conversions to work with shopify checkout extension?

  • @AmericanBluesDenimBoutique

    @AmericanBluesDenimBoutique

    4 ай бұрын

    Just went through this yesterday with our google tag team. If you contact google directly they will assist in the setup of the new checkout system in Shopify.

  • @user-qg9ec1pp9g
    @user-qg9ec1pp9g4 күн бұрын

    Sorry if I use this checkout extensibility, are there datalayers display when I use checkout extensiblity or these can be add "by hand"?

  • @priyankadasila1129
    @priyankadasila1129 Жыл бұрын

    Hey Jan! Thanks for informative video. I want to add address fields validation that allows only English character. I have created an checkout UI app for this. However it's working correctly but it's validating fields on submitting information (when clicking continue to shipping button) . Is there any way to implement this on change also character limit to address fields is not working with checkout UI?

  • @CodingWithJan

    @CodingWithJan

    Жыл бұрын

    Thanks for the great feedback! :-) The questions are quite specific. I would need to look into this more myself.

  • @TheBongLearner
    @TheBongLearner Жыл бұрын

    bro, please make a video how to add custom css or js. 😊

  • @tejassarvaiya5589
    @tejassarvaiya558911 ай бұрын

    Hey jan thanks for best explaining ever. I have a few question , in my developer preview customizing checkout like settings that i added in extension it didn't work. I have also push extension using npm run deploy. Please give me some guide for this issue

  • @CodingWithJan

    @CodingWithJan

    10 ай бұрын

    Hi Tejas, Thanks for the comment. If you still need help with this, you might need to connect with a developer expert. We can definitely help you find one if needed. (link in the description) Best, Joy (Team)

  • @jamesvelopmenthagood8998

    @jamesvelopmenthagood8998

    9 ай бұрын

    I think on the newer versions you have to add it to the checkout as an app block

  • @viksjangid7751
    @viksjangid7751 Жыл бұрын

    I try according to your video but it’s not working can you help me this code will work on shopify or plus account

  • @halogenic
    @halogenic Жыл бұрын

    This is excellent, just what I needed. But it doesn't show the deploy process. For example if you want to deploy as a custom app to a single client store.

  • @CodingWithJan

    @CodingWithJan

    Жыл бұрын

    Thanks! :-) You can deploy the App to a server / hosting service like Heroku. And this article on costum apps could be helpful too: help.shopify.com/en/manual/apps/app-types/custom-apps

  • @halogenic

    @halogenic

    Жыл бұрын

    @@CodingWithJan 🙇‍♂ Thank you!!!

  • @grajekpl8423
    @grajekpl8423 Жыл бұрын

    This works only on Shopify Plus stores.

  • @fabiosg2
    @fabiosg2 Жыл бұрын

    Hello Jan! Thanks for the viedo. How would you make a API request in the checkout to get data from a third app? I am trying to get pickup points from a delivery service's API but Checkout UI does not seem to let us make API requests...

  • @miguelcastillob1979

    @miguelcastillob1979

    Жыл бұрын

    Thats right, we cant get any external resources from The checkout extensions

  • @conidigianluca

    @conidigianluca

    Жыл бұрын

    same here! following the request

  • @CodingWithJan

    @CodingWithJan

    Жыл бұрын

    Excellent question! Unfortunately I don't have the answer at hand and need to look into this a bit more myself. But will def forward this to the dev Team as feedback! :-) 🙏

  • @PatrickWood
    @PatrickWood9 ай бұрын

    What I don't see is a way to display a Backorder status on the checkout page in the item properties. Wish there was a way to do that. That would be super useful.

  • @CodingWithJan

    @CodingWithJan

    9 ай бұрын

    You mean some kind of pre-order / back-in-stock notifications?

  • @PatrickWood

    @PatrickWood

    9 ай бұрын

    @CodingWithJan Correct. To keep the customer appraised of when their order will ship. We use {status} metafield on the cart and order email already. Just need one on the checkout. Was thinking of using Additional Fields to accomplish it with some script. An App might do it, but that is a last resort.

  • @lucasbreton6591
    @lucasbreton659110 күн бұрын

    Is it possible to create custom UI in checkout such as a booking component that allows you to select date and time and connect availabilities to a 3rd party app? @CodingWithJan Great video!

  • @sowndharyakrishnan6957
    @sowndharyakrishnan695719 күн бұрын

    Hi , Inside the checkout page , i added one custom field that should be mandatory field so used useBuyerJourneyIntercept hook to block the progress , but i am getting error message on hover of the continue button. But it should show error message on click of continue button, because all other mandatory fields are working on click. Is there any alternative to achieve this validation?

  • @CodingWithJan

    @CodingWithJan

    19 күн бұрын

    too specific, I'd need to research this

  • @CodingWithJan

    @CodingWithJan

    19 күн бұрын

    but good question!

  • @sowndharyakrishnan6957

    @sowndharyakrishnan6957

    19 күн бұрын

    @@CodingWithJan 😂 please help me on this. If you need I will give me more information also

  • @onsb3887
    @onsb3887 Жыл бұрын

    Hello jan do you know how to make a live theme a development store? I am trying the checkout extention app and i cant find the store i believe the problem is its not a dev store do you know why i cant see my store in the Console ? My shop is live and shopify plus theme

  • @CodingWithJan

    @CodingWithJan

    Жыл бұрын

    Checkout Ui Extension are Shopify Plus only. (Or dev store with checkout preview)

  • @user-wc2vt4jc1l
    @user-wc2vt4jc1l3 ай бұрын

    Hi Jan. I am working on a Shopify account that has a lot of stores. After 'npm run dev', it only shows me 6 stores, without the store that I am working on. How will I select the exact store that does not exist in the options?

  • @CodingWithJan

    @CodingWithJan

    3 ай бұрын

    Make sure you have access to all stores in your partner dashboard. They should appear when using the CLI.

  • @user-pe8gw8qz4g
    @user-pe8gw8qz4g10 ай бұрын

    To create a public app of shopify, code has to be added to the server. Where should i put the code of checkout ui extension to create a public app?

  • @CodingWithJan

    @CodingWithJan

    10 ай бұрын

    Hi Ankit, If you still need help with this, you might need to connect with a developer expert. We can definitely help you find one if needed. (link in the description) Best, Joy (Team)

  • @samlearning9579
    @samlearning957911 ай бұрын

    how can i add paypal button to shopify and connect to paypal?

  • @carguy1320
    @carguy13204 ай бұрын

    I absolutely hate this forced change! What I can do in a few minutes on checkout.liquid will now take significantly longer having to build apps for simple css and JavaScript changes. Like I don’t have enough crap to build already. FML!

  • @siddharthkevadiya721
    @siddharthkevadiya721 Жыл бұрын

    Can we add custom JS or CSS to update existing elements? Hide/Show, Add field in the form, etc...

  • @CodingWithJan

    @CodingWithJan

    Жыл бұрын

    Yes! For example you can have a checkbox, and then hide/show an input field. Here's a tutorial: shopify.dev/docs/apps/checkout/custom/fields/getting-started

  • @siddharthkevadiya721

    @siddharthkevadiya721

    Жыл бұрын

    @@CodingWithJan i mean update on the existing fields, Ex: convert city field into a dropdown.

  • @tejassarvaiya1830
    @tejassarvaiya1830 Жыл бұрын

    Hello jan, can we test this checkout Ui in developement store??

  • @CodingWithJan

    @CodingWithJan

    Жыл бұрын

    yes! (the store just needs to be created under checkout extensibility developer preview)

  • @andrevangijsel957
    @andrevangijsel957 Жыл бұрын

    Only for shopify plus?

  • @user-pe8gw8qz4g
    @user-pe8gw8qz4g10 ай бұрын

    How to create -> Customer data request endpoint, Customer data erasure endpoint, Shop data erasure endpoint Shopify app webhooks?

  • @notadilnaqvi
    @notadilnaqvi8 ай бұрын

    hand gestures++

  • @gregoriofracassi9776
    @gregoriofracassi9776 Жыл бұрын

    Hello man. I'm a MERN stack developer. I have to code a Shopify app that allows you to upload products on different stores based on tag. I am using the Shopify boilerplate and I'm beyond confused as to how to use the API so that I can make calls to different stores from my app. Been going over videos and documentation for three days now. Anyone willing to spend half hour with me?

  • @youtubewts
    @youtubewts10 ай бұрын

    Is it just me or does this seem like a really over complicated way for people to have to extend the UI? Not Jan's fault of course, just the way Shopify is forcing devs to have to work. Editing .liquid files is much nicer by comparison but as I understand it this won't be possible for the check out area from August next year unless you want to pay 2,000USD per month?!

  • @salamanca_
    @salamanca_ Жыл бұрын

    hello mr. Jan I hold you all respect and loved❤ I am now unemployed and all I have on my card is $1,100. I beg you and I ask God and you to make me join freemote because it is my passion to be a developer And I don't have enough money to join the course. Even if you want, I can complete the payment of the rest of the amount after I start work. I beg you not to return me disappointed.All respect, love and appreciation❤

  • @CodingWithJan

    @CodingWithJan

    Жыл бұрын

    Hello my friend, thanks so much for the kind words. Can you send us an email to support@freemote.com? I'll take care and see what we can do. :-)

  • @salamanca_

    @salamanca_

    Жыл бұрын

    ​@@CodingWithJan I've already sent a letter to this mentioned email I'll do it again, hopefully you read it. Thank you so much for all your attention, I really appreciate that ❤️‍🔥🥰.

  • @intertop10
    @intertop10Ай бұрын

    Is this video just for Shopify Plus users?

  • @CodingWithJan

    @CodingWithJan

    Ай бұрын

    correct! checkout customizations are proprietary to plus stores

  • @shubhamsharmaENS
    @shubhamsharmaENS Жыл бұрын

    I faced this error again and again>> Bugsnag.notify() was called before Bugsnag.start() how to Resoved it and create metafields but value is not stored when i order metafields is blank