Getting Started with Shopify App Bridge - Create a Shopify App

Building a Shopify app is never hard. So is designing it! With Shopify Polaris and Shopify App Bridge, you can create a Shopify app that is perfectly embedded to the Shopify admin.
In today's video, I will show you how to create a Shopify app from scratch using Shopify CLI and use Shopify app bridge to display a UI navigation, UI Title Bar, UI Modal, Toasts, and Resource List of products from an online store.
NEW MERCH JUST DROP! 🤯
Get it now at weeklyhow.shop/
Wanna learn more about Shopify Theme Development? Take a look at my course:
✅ Take my Shopify Theme Development Course (Shopify CLI):
weeklyhow.com/courses/shopify-theme-development-tailwindcss/
✅ Take my Shopify Theme Development Course (ThemeKit):
weeklyhow.com/courses/shopify-theme-development-masterclass-learn-how-to-create-shopify-themes/
✅ Get my Shopify App Development Course:
weeklyhow.com/courses/shopify-app-development-vanilla-php-graphql-app-bridge-rest-api/
Need a website? Get yours here!:
► weeklyhow.com/go/hostinger-2023
Try Shopify for 14-days!
► weeklyhow.com/go/shopify
Join this channel to get access to perks:
► kzbin.info/door/Ua4yMJ3mVquTL5TIpxatqQjoin
Join our discord server:
► discord.gg/MduJpcwm
Timestamps:
0:00 - Introduction
0:49 - What is Shopify app bridge
2:24 - Getting started with Shopify development
2:58 - Creating a new Shopify app with Shopify CLI
7:43 - Creating the ui-menu-nav
11:41 - Displaying a toast on button click
12:32 - Creating the ui-title-bar
14:20 - Creating the ui-modal
17:28 - Fetching data using GraphQL
22:39 - Fetching products using GraphQL
27:51 - Creating the resource list
34:06 - Outro
#Shopify
#ShopifyDeveloper
#shopifyapps
🔔 Subscribe now for more tech content:
► kzbin.info
Official Website:
► weeklyhow.com/
Support us on Patreon:
► www.patreon.com/weeklyhow
Follow us on our Social Media:
- Facebook ► weeklyhow
- Twitter ► weeklyhow
- Instagram ► weeklyhow
GitHub Repository used by this video:
github.com/shopify/reference-theme

[@WeeklyHow]

Join our community! Discord: discord.gg/MduJpcwm Become a KZbin member: kzbin.info/door/Ua4yMJ3mVquTL5TIpxatqQjoin Wear our merch: weeklyhow.shop/

[@yuriy1196]

The most excellent tutorial that i have seen! Intro and editing is awesome🤩 Thank you! You helped me a lot, really!

[@ZWinner-vt8ft]

soo amazing bro very helpfull love u brother🥰

[@WeeklyHow]

Thank you for the support as always! Love to you too 💛❤️‍🔥

[@EdwardCox2016]

BIG Welcome back to you Bernard! What a great video. You actually got me interested in learning Remix to do Shopify Apps. Keep up the excellent work. Thank you. 🙂

[@WeeklyHow]

Thank you so much Edward for the warm welcome and kind words! I'm happy to hear that the video piqued your interest in Remix. Best of luck! 😊

[@ThinkAtCloud]

Hello, I purchased your course this morning, but I didn't notice that it uses an outdated approach with PHP. This video is perfect. Will you be adding a new course on building apps using Next.js and React like in the video?

[@thatshopifyguy]

Amazing video. Would love to see more videos of creating production ready public shopify app with Remix?

[@WeeklyHow]

There's plenty more coming soon!

[@KhasimAli-pv9zm]

Thanks for the video! Can you please let me know if a customer can update his email or any other field from his account through the storefront. I have not seen an option to edit the details from the storefront.

[@bestmotivationspeekar4384]

how can uase custum api with authintication in app & Theme app extension ?????? plesss make a video also includeed billing system

[@hariprasanths2973]

Hello brother... I'm looking for the Shopify API endpoint to include tracking number and shipping company details before the order status is marked as fulfilled. What's the appropriate endpoint for this?

[@arifurrahman5993]

Great video, but where to host the app. Can you inform which hosting you used and best.

[@WeeklyHow]

Thank you! I had host my apps before using Hostinger (weeklyhow.com/go/hostinger-2023). For free hosting, you can try Vercel.

[@amine-ammari]

Love the intro and the editing! you killed it, man!

[@WeeklyHow]

Thank you Amine! It was definitely better than the previous one. I had fun working on this and I'm glad you have enjoyed it ❤️‍🔥

[@ajayrabari433]

Thanks for the video. Can you please create a video for production ready Shopify app with core PHP?

[@WeeklyHow]

Thanks Ajay! I'm not gonna lie, at this point I don't know how to PHP 😂. I might get back to it if the demand is high

[@ajayrabari433]

@@WeeklyHow I guess you were running few your apps in core PHP at some points. Is not it?

[@WeeklyHow]

Yes, but it was like 5 years ago and a lot of the libraries I used got deprecated so I moved to React.

[@ajayrabari433]

@@WeeklyHow Okay.

[@sadavarshsaini9801]

I try to make a partially paymet app for my shopify store where user choose option partially payment 10% advance and remaining amount cod or full payment advance but i don't understand which api i use admin api or storefront api

[@WeeklyHow]

I would say use the Admin API since it's more flexible to whatever type of payment methods you wish to develop

[@raeesahmed7283]

Hi i want to learn shopify development and then want to start freelancing your which course would be best to start on udemy ?

[@WeeklyHow]

Thank you for watching! I would say start with Liquid, then Shopify Theme Development, then Shopify App Development. Best of luck Ahmed!

[@raeesahmed7283]

@@WeeklyHow ok bro I will start with liquid after that which course would you suggest theme dev or app dev what's the difference and which one would be better for freelancing?

[@samuellima7230]

Bro, when I access the app link, a big message appears: 401 Unauthorized. Do you know how I can solve this?

[@WeeklyHow]

This could either mean that you are using a wrong development store or there's a problem in the auth. Try to relogin using `shopify auth login`

[@ZWinner-vt8ft]

brother can u ceate a complete subscription app using react complete setup playlist

[@WeeklyHow]

Great request! I'll work on this but maybe in just one long video. 🙂

[@ZWinner-vt8ft]

@@WeeklyHow i will be very thank full to you if you do it brother😍

[@UmarAhmedQureshi]

how to fetch all of the store's product

[@WeeklyHow]

Great question! It depends how much products you have though, if you only have 100 products in your online store, you can simply use the same GraphQL query I used in this video but change the value of `first` to 100. If you have 1000 plus products, there's no way to get those without using pagination because there is a maximum products per API request.