Getting Started with Shopify App Bridge - Create a Shopify App

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 ก.ค. 2024
  • 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...
    ✅ Take my Shopify Theme Development Course (ThemeKit):
    weeklyhow.com/courses/shopify...
    ✅ Get my Shopify App Development Course:
    weeklyhow.com/courses/shopify...
    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:
    ► / @weeklyhow
    Join our discord server:
    ► / discord
    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:
    ► th-cam.com/users/WeeklyHow?sub...
    Official Website:
    ► weeklyhow.com/
    Support us on Patreon:
    ► / weeklyhow
    Follow us on our Social Media:
    - Facebook ► / weeklyhow
    - Twitter ► / weeklyhow
    - Instagram ► / weeklyhow
    GitHub Repository used by this video:
    github.com/shopify/reference-...

ความคิดเห็น • 32

  • @WeeklyHow
    @WeeklyHow  3 หลายเดือนก่อน +1

    Join our community!
    Discord: discord.gg/MduJpcwm
    Become a TH-cam member: th-cam.com/channels/Ua4yMJ3mVquTL5TIpxatqQ.htmljoin
    Wear our merch: weeklyhow.shop/

  • @amine-ammari
    @amine-ammari 3 หลายเดือนก่อน +3

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

    • @WeeklyHow
      @WeeklyHow  3 หลายเดือนก่อน

      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 ❤️‍🔥

  • @EdwardCox2016
    @EdwardCox2016 3 หลายเดือนก่อน

    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
      @WeeklyHow  3 หลายเดือนก่อน +1

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

  • @ajayrabari433
    @ajayrabari433 3 หลายเดือนก่อน +2

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

    • @WeeklyHow
      @WeeklyHow  3 หลายเดือนก่อน +4

      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
      @ajayrabari433 3 หลายเดือนก่อน +1

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

    • @WeeklyHow
      @WeeklyHow  3 หลายเดือนก่อน +1

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

    • @ajayrabari433
      @ajayrabari433 3 หลายเดือนก่อน +1

      @@WeeklyHow Okay.

  • @ZWinner-vt8ft
    @ZWinner-vt8ft 3 หลายเดือนก่อน +1

    soo amazing bro very helpfull love u brother🥰

    • @WeeklyHow
      @WeeklyHow  3 หลายเดือนก่อน

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

  • @KhasimAli-pv9zm
    @KhasimAli-pv9zm 2 หลายเดือนก่อน

    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.

  • @adityapanwar19
    @adityapanwar19 3 หลายเดือนก่อน

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

    • @WeeklyHow
      @WeeklyHow  3 หลายเดือนก่อน

      There's plenty more coming soon!

  • @ThinkAtCloud
    @ThinkAtCloud 3 หลายเดือนก่อน

    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?

  • @hariprasanths2973
    @hariprasanths2973 2 หลายเดือนก่อน

    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?

  • @bestmotivationspeekar4384
    @bestmotivationspeekar4384 3 หลายเดือนก่อน

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

  • @raeesahmed7283
    @raeesahmed7283 3 หลายเดือนก่อน +1

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

    • @WeeklyHow
      @WeeklyHow  3 หลายเดือนก่อน +1

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

    • @raeesahmed7283
      @raeesahmed7283 3 หลายเดือนก่อน +1

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

  • @arifurrahman5993
    @arifurrahman5993 3 หลายเดือนก่อน

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

    • @WeeklyHow
      @WeeklyHow  3 หลายเดือนก่อน

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

  • @sadavarshsaini9801
    @sadavarshsaini9801 2 หลายเดือนก่อน

    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
      @WeeklyHow  2 หลายเดือนก่อน +1

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

  • @samuellima7230
    @samuellima7230 3 หลายเดือนก่อน

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

    • @WeeklyHow
      @WeeklyHow  3 หลายเดือนก่อน

      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`

  • @UmarAhmedQureshi
    @UmarAhmedQureshi 3 หลายเดือนก่อน +1

    how to fetch all of the store's product

    • @WeeklyHow
      @WeeklyHow  3 หลายเดือนก่อน

      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.

  • @ZWinner-vt8ft
    @ZWinner-vt8ft 3 หลายเดือนก่อน +1

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

    • @WeeklyHow
      @WeeklyHow  3 หลายเดือนก่อน

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

    • @ZWinner-vt8ft
      @ZWinner-vt8ft 3 หลายเดือนก่อน

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