Shopify Checkout Extensions for beginners
ฝัง
- เผยแพร่เมื่อ 6 ก.พ. 2025
- Checkout app extensions allow you to add code directly to the checkout. They make it easy to customize many aspects of the checkout experience. In this video, we'll learn what they are exactly and how to get started.
► Offers & Help
--------------------------------------------------------------------------
🌟Learn the JavaScript side of Shopify Development:
codingwithjan....
👨🎓Learn Shopify Development from Scratch:
www.codingwith...
👨💻Find a reliable Developer for your project:
www.codingwith...
► Contact
--------------------------------------------------------------------------
🌐 Website
codingwithjan.com
🤝 LinkedIn
/ jan-frey
#Shopifypartner
► Resources
--------------------------------------------------------------------------
Create a 3.0 Shopify app: shopify.dev/ap...
Checkout extension overview: shopify.dev/ap...
Checkout UI extensions: shopify.dev/ap...
Shopify Partners: www.shopify.co...
Ngrok account: ngrok.com/
► SEO Description
--------------------------------------------------------------------------
Announced in the Shopify summer 2022, The Shopify checkout extensions are new types of apps that enable Shopify plus stores to customize the checkout in a more secure and reliable way. Checkout extensions provide an easy way to implement new features like upsells, custom fields, custom UI ...
codingwithjan.com
🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=checkout-ext-yt
👨💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer
for those who are struggling with the yarn scaffold command, in the latest yarn releases it was changed to "yarn generate", you're weolcome :)
Yes, kudos to you🎉
Actually I should have to watched your comment before doing 1.2hr of research on it 😅
kudos
Thank alot 😂
Thank you, you helped me
Very good introduction! Thanks! I would like to have a video that shows what Kind of extensions and Apps are possible and how they can be packaged.
Now I learned that I can extend the checkout process, but what about other areas? E.g. delivery tracking, returns, recent orders, repeating orders? And what if I want to create a solution where I extend shopify in different places? Is it possible to deliver those extensions as ONE App? All in all I find this topic still very confusing! So a video with an overview of everything that can be extended would be really great!
Thank you Jan ! This is the most detailed tutorial I have found regarding Checkout Extensions. Helped me a lot!
Awesome, thank you ! :-)
You might also like the new one:
"Shopify How to Migrate to Checkout Extensibility"
I have an example in there as well
@@CodingWithJan Thanks Jan, will check it out. What is your Twitter handle? Do you have any examples of making external api requests within checkout extensions?
I was waiting for this one. You are doing great job Jan.
I would like to see full video on upsell extension with multiple products based on tags or category
Awesome! Thanks for the great feedback! :-)
Nice explanation as always. Lots of love 🎈❤️❤️🎈
Don't see option to do some custom styling, only some limited base styling options. Can we add say our own colors to this banner background?
Awesome!!! Legend!!! Keep uploading useful content for shopify dev..
Thanks so much for the great feedback, MC ! :-)
Hey Jan sir, Please make a complete playlist on this, or suggest any YT channel, that gives quality content
:-)
Since it's still brand new, I doubt there is a ton of content available just yet.
However, you might want to check out the Shopify Devs YT channel and the resources in the description!
Is it possible to connect with external database and store information in that database with Shopify function? If so where the database should be hosted for get my app running fast and less maintenance?
Are extension still only available for shopify plus?
Nice facing some issue with the command
error Command "scaffold" not found.
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 ?
Thank you for the tutorial! I`m having problems using already already-created store to change checkout there. I connected it through Collaborator access to Partners. After, I followed all of the steps, used npm run shopify app dev command, I was asked did i finish creating a dev store. I am only responding yes to it, but this question reloads all over again all of the time after the answer. I would really appreciate any assistance on how can I solve it and create my own checkout 😀
Is it a Shopify Plus store though? (required for checkout extensions)
Hello, Thanks for the video.
I am getting an error when I try to run
yarn scaffold extension
error Command "scaffold" not found.
Hello Jan, on the checkout page, I want to make the postcode dropbox, I will write the district names in it. can you help me with this?
could display a component according to the selected shipping method. Any idea how to do that?
great video, you are an inspiring teacher!
🧘♂️ :-)
Thks Jan for all your videos. Created a checkout extension to add in delivery instructions but end up cant implement in the basic store :(. Should have read the fine line.. Adding delivery instructions is such a basic requirement for any online store. Not sure why Shopify insist that it must be on Plus plan which we dont really need.
great brief tutorial, I have a small question I would like to ask here since everyone here is interested in Shopify: is there a way to redirect the checkout page from inside the app? I have try several React ways to do it, didn't work
please make a video on Shopify web pixel extension
Super insights and advice here Jan - really enjoyed watching this!
Thanks so much, Liam!! :-)
Looking forward to having you back on the show soon. 😄🙌
Great video! Is there any news when this functionality will be available to non plus stores? Can't seem to find any dates
I would also like to know if there is any information regarding availability to non-plus. Is that even considered?
It is possible to get logged in customer's details in checkout page? any api for it?
What an amazing video! Great explanation, good energy, I had a really great time and learned a lot!
So, I have to be a shopify plus membership to access these features for my store right? I guess this is more geared towards a business that is already making considerable profit every month.
Informative as always
Glad you think so! 😄🙌
Great video, thanks!
Thanks for sharing this, Jam, great job! Your videos are very helpful and the way you explain it makes it very easy.
You're very welcome! :-)
Thanks for the great feedback Vini!
Hy Jan, Thanks for this amazing video, just wanted to understand, if now I want to create a checkout app, it would only be for shopify plus merchants right(for development stores as well)
Hey Jan,
How can we resolve private auth token error issue? Is it because of account? Do we need store owner access?
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?
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)
Ich feiere deine Videos bro..danke dir!!
Danke für das gute Feedback, freut mich sehr 😁🙌
Hi Jan, I have been following you from past year. I have a question in checkout page. In Mobile number column (generally 10 digits in mobile number) even if we enter 9 digits in it, Shopify can complete the order. How to get the warning here?
Its not about whether Shopify's design choices are better or ours, its just that if even a good design gets repeated too much it becomes boring.
Ability to customize should always be there.
Thanks for the great feedback, Elhaam ! :-)
Can make a video with laravel ?
Hey jan your doing great work, just a little suggestion keep updating your video bio when there is some new release in commands if possible!
thanks sir very helpful video Great explanation, good energy
Are these extension only for checkout page or we able to use anywhere in the shopify app?
need store plus or update account ngrok or something? I do like you but not work in last step (dont show any Banner in checkout page)
Did you figure this out? I've got the same issue
Superb...
Please make some more video related to Shopify Extension.
Please explain How to Create or Add Custom Payment Gateway in shopify.
@Coding with Jan - Shopify Developer
Hi is possible to create shopify checkout ui extension on laravel. If is possible then please how can I create Shopify Checkout UI extension on larabel?
when I run the command npm run dev it is throwing error like cannot read property 'isbatchinglegacy' of undefined
Hi Anand,
I'm sorry to hear you're experiencing this issue. We can definitely help out or find someone who can assist you. Please send us a message via our website. (link in the description)
Best,
Joy (Team)
It's so frustrating, checkout customization options is only possible for Shopify plus enterprises. Pay 2k monthly for a subscrip, no thanks. This should be an option for every merchant of Shopify.
Thanks for sharing this video.
Hi Jan, I am looking to add an option for customers to purchase an addon item when adding products tagged with a certain phrase in my product catalog. Do you know if this is easy to do without the use of apps?
I'm getting the error "zsh: command not found: yarn" when trying to execute the first command. Any idea why?
Yarn is a package manager.
You might have to install it first:
npm install --global yarn
Hello guys, I have allready followed the tutorial and I have created an app with node and react but when I run yarn dev command Im getting the following error: The above error occurred in the component: at Banner. My app have the code base, do you have any idea how to solve it?
Hey Jan,
Can you please help me to how to load 3rd party JS code in checkout Extensions?
Have you find any solution for it?
Is it me or did the "scaffold" command got changed for the "generate" command? n_nU Hope this helps someone
Have you ever tried to add the network_access capability within the .toml config file? I'm running into some issues where I've enabled the network access setting on the app, but it's not recognized as enabled when I test the extension.
working for me
[capabilities]
network_access = true
block_progress = true
Thanks Jan, the video is great. If I have a regular Shopify account and want to build an extension for myself will this allow me to integrate it as a Custom App or will this only be allowed to integrate with Shopify Plus? I read other comments in which you mention this will only be available for Plus merchants, but have some hope this could be integrated into a regular Shopify account if you build it yourself and don't download it from the Shopify App Store.
would love to know that. I don’t understand how you can create an app for a regular shopify store
Hi Jan, do you need a Shopify Plus partner account to test drive these features?
Hey Brett,
no you can test them on any development store that you create under the Developer preview "Checkout Extensions".
Later, in production, your app will be for Plus merchants only! (which is a pretty good audience though 😄)
Oh nice! Thanks :D Is that typical for Shopify Plus features to be available on shopify dev stores? I'm currently a BigCommerce dev but more interested in Shopify, but it doesn't seem clear whether features like wholesale channels, pricelists, giftcard + multipass + user apis are available in dev stores.
Is It only for shop plus stores?
Hi Alfonso, yes for the moment it is!
There are quite a few plus stores out there though, and especially CRO apps can have a huge impact on plus stores.
(Because order volume is already high and small changes can lead to substantial revenue in absolute numbers)
(+ Shopify plus merchants have the liquidity to pay for apps if they are worth it)
Hey man, when I try yarn scaffold extension, it throws "error Command "scaffold" not found."
me also, have you solve this problem?
same error
Hello Jan, thanks for awesome video, I would like to know how to upload extension with my client shopify store, I have access with my email address of that store. please make video If possible or article. thanks in advance.
Hello! Amazing video G! Quick question can I build custom integration app with stripe and przelewy24 + BLIK payment methods to shopify based on this tutorial?
hmm that sounds a little more complicated than a 10 min tutorial 😁
Also not sure if we're actually allowed to circumvent the Shopify Payment flow.
Would need to read up on that in the terms and conditions. Sorry.
@@CodingWithJan I think I didn't described well what I meant, can I send a whole descriptive video to you on pm? You could save thousands of store owners in Poland bcs all the agencies charging like 2000 pln for this integration, and yea it is legal. Shopify just didn't made yet integration that is automated
👊👊👊👊👊👊
Love you content! But I really don’t love the swoosh you’ve put in your transitions. It’s rather very annoying and not a good move 😅
Hey Dan, constructive feedback. Also thought it might be a bit too much, will forward it to the editor! :-)
Cheers
Great content, I sent you an email
Good! thx you video!