Dev With Alex
Dev With Alex
  • 18
  • 160 091
Polaris: A Shopify Dev's Secret Weapon
Polaris - The design system that all Shopify app devs should be deeply familiar with. In this video we talk about the what, why, how of Polaris and why, as a Shopify app dev, you NEED to be familiar with the Polaris docs.
📕 Chapters
-------------------------
0:00 Intro
0:36 What is Polaris?
1:45 Polaris Docs
3:40 React Component Library
4:48 Polaris Components
5:14 Polaris is a Design System
7:40 Order Detail Page Rebuild
29:04 Outro
🔗 LINKS
-------------------------
Polaris Docs:
polaris.shopify.com/
Pre-Built Polaris Components (Speed up your UI development!):
www.polariscomponents.com/
✉️ INQUIRIES
-------------------------
Email: contact@devwithalex.com
Twitter/X: x.com/devwithalex
🛠️ WORK WITH ME
-------------------------
Want to work with me to build or improve your app?
Go to devwithalex.com for more info on my packages + pricing!
🙋🏽‍♂️ About Me
-------------------------
Hi there! My name is Alex and I have been programming for over 5 years. Programming has changed my life for the better, and I am on a mission to share my knowledge with you so that you can reap the rewards of a satisfying and fulfilling career in software development. My favorite thing about software development is that you are constantly learning, and I want to share the things I learn. I am always looking for ways to improve and new things to learn, so feel free to reach out or leave a comment letting me know where I can improve or if I should cover a specific topic!
มุมมอง: 637

วีดีโอ

How to Set Up Managed Pricing for Shopify Apps
มุมมอง 5882 หลายเดือนก่อน
Let's go through and set up managed pricing in a Remix Shopify app! We also look at how to query subscription status and cancel a subscription using the Remix app package. 📕 Chapters 0:00 Intro 0:19 Getting Started 0:53 Enable Managed Pricing 3:34 Add Billing Page 6:02 Query Subscription Status 9:20 Cancel Subscription 13:08 Outro 🔗 LINKS Managed Pricing Overview: shopify.dev/docs/apps/launch/b...
Shopify's NEW Managed Pricing For Apps
มุมมอง 1.2K6 หลายเดือนก่อน
Shopify has a brand new Managed Pricing option for your app billing needs! In this video we’ll talk about what it is and why you might want to use it for your public apps And don't forget to follow me on Twitter/X! devwithalex 📕 Chapters 0:00 Intro 0:57 Managed Pricing Features Limitations 2:02 Setting Up Managed Pricing 4:14 Managed Pricing in Action 5:30 Wrapup/Final Thoughts 🔗 LI...
Build a Cart Validation - Shopify Functions
มุมมอง 1.3K7 หลายเดือนก่อน
Shopify functions are powerful ways to customize your store and they are much easier to work with than you might think. Today we'll learn a bit about functions and build a quantity limit cart validation function! Please let me know in the comments down below if you have any questions or run into any problems while following along in the video, I'd love to help out in any way I can. And don't fo...
Shopify Customer Account Extensibility Is Here!
มุมมอง 4.1Kปีที่แล้ว
We're going to explore the new Customer Account Extensibility that Shopify recently released for Developer Preview! We'll talk a bit about how to set up your store for this and also create a small extension together Please let me know in the comments down below if you have any questions or run into any problems while following along in the video, I'd love to help out in any way I can. Feedback ...
Shopify Remix QR Code App Tutorial Walkthrough
มุมมอง 8Kปีที่แล้ว
Let's do a video walkthrough of the QR Code App Tutorial on shopify.dev! Since they've updated the tutorial to use the newest Remix template, we go over some remix concepts and how we integrate Shopify utilities for app building. Please let me know in the comments down below if you have any questions or run into any problems while following along in the video, I'd love to help out in any way I ...
Remix - New Era of Shopify App Development
มุมมอง 29Kปีที่แล้ว
Shopify released their new app template based entirely on Remix. In this video we explore the template a bit and do a surface level overview of some Remix concepts. Please let me know in the comments down below if you have any questions or run into any problems while following along in the video, I'd love to help out in any way I can. Feedback and constructive criticism is also highly appreciat...
Handling Webhooks in Your Shopify App: HTTP + Amazon EventBridge
มุมมอง 12Kปีที่แล้ว
Webhooks are an important part of any Shopify app, in this video I walk you through step-by-step how to set them up through standard HTTP and Amazon EventBridge. Please let me know in the comments down below if you have any questions or run into any problems while following along in the video, I'd love to help out in any way I can. Feedback and constructive criticism is also highly appreciated!...
Shopify "Featured Review" Checkout UI Extension in 30 minutes!
มุมมอง 4.6Kปีที่แล้ว
Today we're building a Checkout UI Extension to display a featured review at checkout for customers, and we're going to do it in 30 minutes! *Special thanks to Gadget for sponsoring this video, sign up for an account here: gadget.dev/* Fork this Gadget project here (Sign up for an account first): app.gadget.dev/auth/fork?domain=featured-review-app-tutorial.gadget.app Code for `index.jsx` file i...
How to Host Your Shopify App STEP BY STEP | Fly.io, Heroku, and DigitalOcean
มุมมอง 17Kปีที่แล้ว
In this video we'll cover how to host your Shopify app using 3 popular hosting options: Fly.io, Heroku, and DigitalOcean. *Get a $200 credit for DigitalOcean when you sign up with my link: m.do.co/c/7c776f49302b* Fly.io: fly.io/ Heroku: www.heroku.com/ Please let me know in the comments down below if you have any questions or run into any problems while following along in the video, I'd love to...
Build A Shopify App #4 - Putting It All Together
มุมมอง 4.7Kปีที่แล้ว
This video is the 4th and final part of a series where we build a small Shopify app together! The point of this app is to learn the basics of Shopify app development through "doing", we'll keep the codebase and feature set small, but learn a lot in the process! GitHub repo to follow along with the code: github.com/RAAbbott/Build-A-Shopify-App Each branch in the above GitHub repo corresponds to ...
Build A Shopify App #3 - Polaris
มุมมอง 6K2 ปีที่แล้ว
This video is part 3 of a series where we build a small Shopify app together! The point of this app is to learn the basics of Shopify app development through "doing", we'll keep the codebase and feature set small, but learn a lot in the process! GitHub repo to follow along with the code: github.com/RAAbbott/Build-A-Shopify-App Each branch in the above GitHub repo corresponds to a video in the s...
Build A Shopify App #0 - Introduction
มุมมอง 2.8K2 ปีที่แล้ว
This video is an intro to the series where we build a small Shopify app together! The point of this app is to learn the basics of Shopify app development through "doing", we'll keep the codebase and feature set small, but learn a lot in the process! There is a newer version of the template and Shopify API available, so in this video I’m addressing the changes and how I plan to finish this serie...
Build A Shopify App #2 - Admin API
มุมมอง 12K2 ปีที่แล้ว
This video is #2 of a series where we build a small Shopify app together! The point of this app is to learn the basics of Shopify app development through "doing", we'll keep the codebase and feature set small, but learn a lot in the process! GitHub repo to follow along with the code: github.com/RAAbbott/Build-A-Shopify-App Each branch in the above GitHub repo corresponds to a video in the serie...
Build A Shopify App #1 - App Structure
มุมมอง 24K2 ปีที่แล้ว
In this video we kick off a series where we build a small Shopify app together! The point of this app is to learn the basics of Shopify app development through "doing", we'll keep the codebase and feature set small, but learn a lot in the process! If you want to check out the official example app guide made by Shopify which is a bit more complex and a better example of a "real-world" applicatio...
*NEW* Getting Started With Shopify App Development - CLI 3 + NodeJS!
มุมมอง 7K2 ปีที่แล้ว
*NEW* Getting Started With Shopify App Development - CLI 3 NodeJS!
Build Your Own Shopify App - Part 1 (Polaris)
มุมมอง 17K3 ปีที่แล้ว
Build Your Own Shopify App - Part 1 (Polaris)
Getting Started With Shopify App Development
มุมมอง 7K3 ปีที่แล้ว
Getting Started With Shopify App Development

ความคิดเห็น

  • @Resurgence73
    @Resurgence73 11 ชั่วโมงที่ผ่านมา

    Great tutorial. Really appreciated the detailed explanation of each of the functions. Wondering if anyone is getting a 404 when scanning the QR code with their phone?

    • @devwithalex
      @devwithalex 11 ชั่วโมงที่ผ่านมา

      Hard to tell without seeing your code, but sounds like the redirect url isn't being generated correctly. I'd double check your `getDestinationUrl` function to see why it's not returning what you want

    • @Resurgence73
      @Resurgence73 6 ชั่วโมงที่ผ่านมา

      @@devwithalexIt was user error on my part. I named the file “$id.scan.jsx” instead of “qrcodes.$id.scan.jsx”. 😅 Thanks for replying to my comment and sorry for wasting your time. And thanks again for the great tutorial!

  • @dddd-q4f
    @dddd-q4f 8 วันที่ผ่านมา

    The video is gold mine. So informative. Thank you Alex. Keep going.👍Wishing you a Happy New Year in advance!

  • @ukstudio6668
    @ukstudio6668 14 วันที่ผ่านมา

    I think this video is only a promotional video.. we could've done it with coding any theme

    • @devwithalex
      @devwithalex 11 ชั่วโมงที่ผ่านมา

      ? I never said this can only be done w/ Gadget haha. And not just a promo video, I genuinely like Gadget and still use it regularly for projects. Goal of this video was showing how it can help speed up parts of the dev process, which it does.

    • @ukstudio6668
      @ukstudio6668 11 ชั่วโมงที่ผ่านมา

      @ if you can save the snippet, and can use on any new theme. That's what i do. I have extracted snippets and made some of my own as well.. Never needed extensions.. speed is always up

  • @YairOhana-h3f
    @YairOhana-h3f 18 วันที่ผ่านมา

    Great tutorial. not sure why, but I have encountered so many issues with the sqlite db. any chance that you could help with these ?

    • @devwithalex
      @devwithalex 11 ชั่วโมงที่ผ่านมา

      What issues are you seeing? This video is sadly a little outdated now, but if you follow the hosting instructions on the shopify[dot]dev guide I linked it should work

  • @nsulanov312
    @nsulanov312 26 วันที่ผ่านมา

    Great video Bro, but I have one question, what about apps in marketplace which works with several stores ? Do I need to ask my customers to create event sources with my AWS id ?

    • @devwithalex
      @devwithalex 11 ชั่วโมงที่ผ่านมา

      No, you don't need to create multiple sources. It'll receive webhooks for all of the stores installed on your app. The store info comes through the webhook

  • @TheNewGreenIsBlue
    @TheNewGreenIsBlue 28 วันที่ผ่านมา

    WOW, Alex! As someone who is building an app with Polaris, this video and the thought you put into it is amazing. You have no IDEA how valuable this insight is... especially the way you break the page down and replicatee it. It took me days of trial and error to get to this points, and you summarized much of my pain points ( not reading the docs and jumping in ) succinctly in just a few minutes. Your tips on using the inspector to reverse engineer is also fantastic.

  • @TheNewGreenIsBlue
    @TheNewGreenIsBlue 28 วันที่ผ่านมา

    Great video! Thank you! I am building an internal (custom) app that will be used on a couple of our stores (but not available on the store). Is it possible to run it on storeA and storeB just by putting different `toml` files on different branches or is more involved?

  • @JakeShivers
    @JakeShivers 29 วันที่ผ่านมา

    Is there anybody here who is stuck getting the project to download? I've been trying for 3 hours, and the install gets stuck. I have scoured the internet for a solution but nothing seems to work.

  • @anik-mazumder
    @anik-mazumder หลายเดือนก่อน

    Really loved the video

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

    Not sure what changed in last few weeks but billing.check() is not working anymore. It need BillingConfig to be passed through check()

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

    Shopify dev video 🐐, nice videos Alex!

  • @dangerzone-136
    @dangerzone-136 หลายเดือนก่อน

    please make a video, how can We deploy shopify custom app or extension for free and how can we used it on my client store?

  • @dangerzone-136
    @dangerzone-136 หลายเดือนก่อน

    please make a video, how can We deploy shopify custom app or extension for free and how can we used it on my client store?

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

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

    Great video! Thank you for making this.

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

    great video Alex! Polaris is definitely undervalued

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

    Polaris is maybe the best UI design system, I played with it, it had everything or most things you need to develop shopify app. I wish they opensource it so you can use it outside shopify.

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

    You the 🐐 for this tutorial bro

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

    HI great video, just a doubt about the all cycle. Do we need to manually call billing.check() in each component to see if a subscription is present and block the user if not? Because it is not so clear in Shopify docs. Thanks

  • @SunilPatel-c8x6b
    @SunilPatel-c8x6b หลายเดือนก่อน

    Hello, how to get payment details? I want to prevent an order from being placed if Kount identifies fraud. Is there a way to achieve this?

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

    Cool video thanks! Curious how Shopify expects us to pull the subscription plans into the code so we can use them within the product. Feels like we’re gonna have to manually hardcode plans when we deploy to the App Store and manually manage them. It also makes it hard to be able to test this on a dev instance when running things locally. Are there posted solutions for this or are we expected to just figure something out

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

    Thank you for this!

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

      I think I'm on an old version of the remix app, none of my code works this smoothly

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

    @shopify, sponsor this guy and put these videos on the docs! Thanks Alex, this was really helpful! Keep it going! btw, you might wanna put that toast in a use effect

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

    How can I create a meta field app by using the remix temple?

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

    Someone found his youtube password :)

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

      Haha yes 😂 didn’t realize how long it’d been since my last video, time flies by!

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

    Thank you Alex! That was great an super easy to follow. I did test it perfectly in my developer store and I shared the link with another production store that I own. I installed it correctly, but I can't add it as a rule in the Checkout. Am I missing something? I would really appreciate an answer. Thank you!!!

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

      Now what I've noticed is that the messages are not rendered on the side cart in the production store, as they do in the development store. I wonder if there is another target I should choose to make the error message available on the side cart

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

      Hey! Did you deploy using `npm run deploy`?

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

      @@devwithalex Hi Alex, I wrote a message answering myself but I don't see it here :/ I realised later that I had to update the shopify.app.toml file to set the access scopes for the app, then I deployed it wit npm run deploy, and finally I installed it in the production site. The function works wonderful! I even modified it a bit to work with product and customer tags, but the localizedMessage is not shown in the side cart :/ I checked the docs and the target is right and there is no target for the side cart specifically... so maybe is a configuration from my store (?) I don't know

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

    Wonderful explanation. How can I call it in liquid section? Have I need to use Iframe?

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

    this is great but Shopify docs suck

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

    Is this shopify remix app? Because I follow same process but i am not able to deploy my app Error - Deploy Error: Non-Zero Exit Code

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

    This is great but there is still no documentation on how to set this up with shopify-remix :(

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

      Sounds like this is something people want, will add to my list for a video!

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

      @@devwithalex I tried so many different ways and got so many different errors that I just gave up. Also they dropped the ball on giving a change log or upgrade guide for shopify-remix v2 -> shopify-remix v3

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

    i am having issue when hosting my shopify node app Redirecting outside of Shopify Apps can only use /exit to reach Shopify or the app itself. it will to much urgent please give me solution

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

    well explained, thank you!

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

    mah men! Thanks you!!!

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

    npm run dev isnt working for me, I tried with js and typescript both.. This is what I am getting npm run dev > dev > shopify app dev Suite of commands for developing apps. See shopify app <command> --help for usage of each command. Usage: shopify app [ connect | create | deploy | open | serve | tunnel ]

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

    Awesome video! Thank you

  • @shreyankjadiya
    @shreyankjadiya 4 หลายเดือนก่อน

    Anyone coming here after deploying to digitalocean using remix app instead and faces an error of invalid appUrl , Please replace your environment variable name from HOST to SHOPIFY_APP_URL in digital ocean and you should be good to deploy afterwards. Learned from docs after scratching my head for almost 2 hours ! Keep going @devwithalex ! Helpful Video !

  • @subaak
    @subaak 4 หลายเดือนก่อน

    Thanks for the video! I have a question: with the new managed pricing, do I still need to integrate with Billing API? I am looking for a free plan for few months and submitted my app listing but seems like they expect Billing API to be integrated. Any thoughts?

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

      No, you don't need to do anything else with the Billing API if you're using managed pricing

  • @JayRootways
    @JayRootways 4 หลายเดือนก่อน

    Hi @Alex, I want to ask you that How to manage the app with theme app extension as you know app extension are hosted by shopify So How should I prevent them from hosting on digital ocean. Can you please provide solution or a make video on it. It will be better if you make video based on the latest template i.e. Remix app template

  • @machans-203
    @machans-203 4 หลายเดือนก่อน

    I got a problem. When i run npm run dev in vs code. It occurs error, the error is No organization found. Please tell me how to fix this error.

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

      Sounds like a CLI auth issue, when you run npm run dev it should automatically prompt you to log in

  • @r1x609
    @r1x609 4 หลายเดือนก่อน

    Amazing tutorial 🎉 Is it possible to get customer order history? so I want to say "per day user can only but this product 2 quantity only"

  • @xixlabs
    @xixlabs 4 หลายเดือนก่อน

    Thanks Alex!

  • @Traveling_with_Tyler
    @Traveling_with_Tyler 4 หลายเดือนก่อน

    Thank you for the video. It seems like there is a big change in the system, I do not see web folder any more

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

      Yes, the template app structure has changed quite a bit at this point

  • @nopainnogame9897
    @nopainnogame9897 5 หลายเดือนก่อน

    hi! do you still have that Discord link for Shopify developers?

    • @devwithalex
      @devwithalex 5 หลายเดือนก่อน

      They shut down the discord actually, there’s just the Shopify slack now

  • @KinnghHeura
    @KinnghHeura 5 หลายเดือนก่อน

    This is such a good video - thank you!

  • @user-jg5zh9de2q
    @user-jg5zh9de2q 5 หลายเดือนก่อน

    Very nice video, Many Thanks I would like to know how to trigger GA4 events from web pixel extension within the App specially on checkout page.

  • @ConscioAI
    @ConscioAI 5 หลายเดือนก่อน

    Does anyone has a complete coding tutorial to fully implement managed pricing on remix app?

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

      Not that I've seen, I'll add to my list!

  • @dannyboris1323
    @dannyboris1323 5 หลายเดือนก่อน

    Hey, where can i set the webhook url in shopify itself without using the test method?

  • @kypac99
    @kypac99 5 หลายเดือนก่อน

    Great video, probably next video could be about checkout ?

  • @main5344
    @main5344 5 หลายเดือนก่อน

    Hey Alex! Are you considering updating the Digital Ocean deployment workflow? Since the CLI, Remix template and other packages have updated.

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

      Yes, I'll make a note of that!

  • @sienagroup
    @sienagroup 5 หลายเดือนก่อน

    Wow, thanks for the video. Maybe you could explain a bit how does this work with Remix apps? I suppose I still need to check if the user is subscribed to particular plan to make certain parts of the app available. Maybe an idea for one more video? ;)