Coding with Jan - Shopify Developer
Coding with Jan - Shopify Developer
  • 136
  • 3 236 810
Shopify App Development Tutorial - POS UI Extensions
A concise crash course on Shopify's point of sale and building POS UI Extensions.
⭐ Resources:
--------------------------------------------------------------------------
POS UI Extensions: shopify.dev/docs/api/pos-ui-extensions
POS UI Extensions Figma UI Kit: www.figma.com/community/file/1255225508400961281
Partners and developers community: community.shopify.com/c/partners-and-developers/ct-p/appdev
POS UI Components: shopify.dev/docs/api/pos-ui-extensions/2024-04/components
Discount Functions for POS Extensions: changelog.shopify.com/posts/discount-functions-support-on-shopify-pos
► Free Support
--------------------------------------------------------------------------
🎯 Get Personal Career Advice for Shopify Developers:
codingwithjan.com/personal-career-advice?
👨‍💻 Find a qualified Shopify Developer for your next project:
codingwithjan.com/hire-a-developer?
► Contact
--------------------------------------------------------------------------
🌐 Website
codingwithjan.com
🤝 LinkedIn
www.linkedin.com/in/jan-frey/
Timestamps:
00:00 Today's Video
00:17 Opportunity behind POS Extensions
01:33 Shopify POS Crash Course and Interface
04:30 POS UI Extensions Overview
05:17 Creating your first POS Extension
07:32 Code Files Overview
09:31 Using Components (Date Picker)
11:28 Using Components (Camera Scanner)
13:02 Using the API (Cart API)
18:09 Shopify Discount Functions and the POS
18:29 Outro
🔎 SEO Description
In this video, we're exploring the Shopify POS and how you can get started developing POS UI extensions. We're starting with a quick overview of the Shopify POS interface and the initial setup. Then we create your very first POS UI extension using the Shopify CLI, and showing you the essential code files as well as some of the prebuilt UI components like Date Pickers and the Camera Scanner. Further we explore an example use case of working with the Cart API, which is just one of many APIs Shopify offers. This video provides a getting started guide to developing extensions for the the Shopify Point of Sale.
Переглядів: 1 028

Відео

How to Learn Shopify Development in 2024
Переглядів 8 тис.Місяць тому
The most beginner-friendly path to becoming a Shopify Developer and landing your first paid projects quickly. ⭐️ Freemote - The Freelance Developer Bootcamp: www.codingwithjan.com/developer-bootcamp 🆕 Waitlist Shopify JavaScript Mastery www.codingwithjan.com/waitlist-javascript-mastery ► Free Help 🎯 Get Personal Career Advice for Shopify Developers: codingwithjan.com/personal-career-advice? 👨‍💻...
Building a Shopify App in 2024 - interview with Mat de Sousa
Переглядів 1,5 тис.2 місяці тому
Is it still possible to launch successful Shopify apps? How to get start started in 2024? That and more we're discussing in today's interview with Mat de Sousa. ⭐ Wide Event www.eventbrite.fr/e/the-wide-event-a-shopify-partner-event-for-merchants-and-partners-tickets-872624151327 🤝 Mat's Socials: LinkedIn: www.linkedin.com/in/mat-de-sousa-20a365134/ Twitter: DsMatie UA-cam: www.yout...
How to Sell Personalized Products on Shopify 2024 - Building a Product Configurator
Переглядів 7 тис.3 місяці тому
How to offer custom products with image uploads, text inputs, live previews, custom pricing rules, and much more. ⭐ Get started for free gokickflip.com/landing/codingwithjan ► Resources: See Product examples across different industries gokickflip.com/product-examples Checkout Kickflip's UA-cam Channel www.youtube.com/@trykickflip/videos ► Let's stay in touch :-) 🤝 LinkedIn (business journey and...
How to Use the Shopify API and Make GraphQL Requests
Переглядів 7 тис.3 місяці тому
Learn how to make GraphQL requests and work with the Shopify API. ⭐ Shopify Editions Page 2024 www.shopify.com/editions? ► Free Help 🎯 Get Personal Career Advice for Shopify Developers: codingwithjan.com/personal-career-advice?QL 👨‍💻 Find a qualified Shopify Developer for your next project: codingwithjan.com/hire-a-developer?QL ► Contact 🌐 Website codingwithjan.com 🤝 LinkedIn www.linkedin.com/i...
How to Automate Your Shopify Store Using Shopify Flow
Переглядів 9 тис.4 місяці тому
Learn how to automate tasks and workflows using Shopify Flow's low-code editor ⭐ Shopify Editions Page 2024 www.shopify.com/editions? ► Free Help 🎯 Get Personal Career Advice for Shopify Developers: codingwithjan.com/personal-career-advice? 👨‍💻 Find a qualified Shopify Developer for your next project: codingwithjan.com/hire-a-developer? ► Contact 🌐 Website codingwithjan.com 🤝 LinkedIn www.linke...
How to Create New Shopify Sections in 2024 (Shopify Editions)
Переглядів 15 тис.5 місяців тому
Everything you need to know about building Shopify Theme Sections in 2024. ⭐ Shopify Editions Page 2024 www.shopify.com/editions? ► Free Help 🎯 Get Personal Career Advice for Shopify Developers: codingwithjan.com/personal-career-advice? 👨‍💻 Find a qualified Shopify Developer for your next project: codingwithjan.com/hire-a-developer? ► Contact 🌐 Website codingwithjan.com 🤝 LinkedIn www.linkedin....
The Secrets of a Shopify Plus Partner - Exclusive Interview with a Shopify Plus Agency Owner
Переглядів 3,4 тис.6 місяців тому
What does it mean to be a Certified Shopify Plus Partner and how can you become one? In this Episode we're interviewing Nic Dunn, who runs his own Shopify Plus Agency in London. 👨‍💻 Check out Nic's Agency, Charle: www.charle.co.uk/ 🎤 Find Nic's Podcast here: www.youtube.com/@charlechats 👋 Stay in touch with Nic on LinkedIn: www.linkedin.com/in/niccharlesdunn/ Timestamps 00:00 Todays' Interview ...
How to Add Different Descriptions Per Variant - Shopify Tutorial
Переглядів 10 тис.6 місяців тому
In this video we'll learn how to add unique variant descriptions to your products. ► Free Help 🎯 Get Personal Career Advice for Shopify Developers: codingwithjan.com/personal-career-advice? 👨‍💻 Find a qualified Shopify Developer for your next project: codingwithjan.com/hire-a-developer? ► Contact 🌐 Website codingwithjan.com 🤝 LinkedIn www.linkedin.com/in/jan-frey/ 🔍 SEO Description: We're cover...
5 Realistic Ways to Make Money While Learning to Code (as a Shopify Developer)
Переглядів 2,9 тис.6 місяців тому
Development Services you can offer including specific price points. ► Free Help 🎯 Get Personal Career Advice for Shopify Developers: codingwithjan.com/personal-career-advice? 👨‍💻 Find a qualified Shopify Developer for your next project: codingwithjan.com/hire-a-developer? ► Contact 🌐 Website codingwithjan.com 🤝 LinkedIn www.linkedin.com/in/jan-frey/ ⌚ Timestamps: 00:00 What we're covering 00:20...
Reasons to use Shopify (and how to explain them to your freelance clients)
Переглядів 1,6 тис.7 місяців тому
Reasons to use Shopify (and how to explain them to your freelance clients)
How to Install and Use Shopify's CLI as a Beginner
Переглядів 13 тис.8 місяців тому
How to Install and Use Shopify's CLI as a Beginner
How to Find Your First Paying Freelance Client
Переглядів 2,5 тис.8 місяців тому
How to Find Your First Paying Freelance Client
How to Sell Digital Products on Shopify
Переглядів 4,8 тис.9 місяців тому
How to Sell Digital Products on Shopify
Hiring your first Developer as a Freelancer or Agency Owner
Переглядів 1,6 тис.9 місяців тому
Hiring your first Developer as a Freelancer or Agency Owner
Shopify's new Checkout Extensibility - The True Reasoning and Opportunities for Developers
Переглядів 7 тис.11 місяців тому
Shopify's new Checkout Extensibility - The True Reasoning and Opportunities for Developers
Personal Update 2023 - Coding with Jan
Переглядів 3,4 тис.Рік тому
Personal Update 2023 - Coding with Jan
Shopify How to Migrate to Checkout Extensibility (Upgrade from Checkout.liquid and Shopify Scripts)
Переглядів 22 тис.Рік тому
Shopify How to Migrate to Checkout Extensibility (Upgrade from Checkout.liquid and Shopify Scripts)
Building Shopify Themes in 2023 - Trends, Development and Advice (ft. Clean Canvas)
Переглядів 9 тис.Рік тому
Building Shopify Themes in 2023 - Trends, Development and Advice (ft. Clean Canvas)
Shopify Functions 2023 - Overview and how to get started
Переглядів 28 тис.Рік тому
Shopify Functions 2023 - Overview and how to get started
How to use Shopify Metaobjects
Переглядів 69 тис.Рік тому
How to use Shopify Metaobjects
Interviewing a Successful CRO Agency Owner
Переглядів 2,9 тис.Рік тому
Interviewing a Successful CRO Agency Owner
Shopify Updates 2023 (for Developers) - Shopify Editions Winter 2023
Переглядів 10 тис.Рік тому
Shopify Updates 2023 (for Developers) - Shopify Editions Winter 2023
Shopify How to Add a Size Chart (without code or apps)
Переглядів 52 тис.Рік тому
Shopify How to Add a Size Chart (without code or apps)
Shopify Multiple Variant Images - (How to Display Images Specific to the Selected Variant)
Переглядів 65 тис.Рік тому
Shopify Multiple Variant Images - (How to Display Images Specific to the Selected Variant)
Shopify Tutorial - How To Add Color Swatches (beginner friendly)
Переглядів 45 тис.Рік тому
Shopify Tutorial - How To Add Color Swatches (beginner friendly)
Conversion Rate Optimization (CRO) - Driving more sales systematically
Переглядів 4,8 тис.Рік тому
Conversion Rate Optimization (CRO) - Driving more sales systematically
How to Design Your Own Shopify Theme (Advice from Thomas Kelly, CEO of Archetype Themes)
Переглядів 5 тис.Рік тому
How to Design Your Own Shopify Theme (Advice from Thomas Kelly, CEO of Archetype Themes)
How to create a wildly successful Theme Company - Meet the CEO of Archetype Themes
Переглядів 4,6 тис.Рік тому
How to create a wildly successful Theme Company - Meet the CEO of Archetype Themes
How to find and evaluate Shopify App Ideas
Переглядів 16 тис.Рік тому
How to find and evaluate Shopify App Ideas

КОМЕНТАРІ

  • @mabelandreasalazar5125
    @mabelandreasalazar5125 7 годин тому

    Thank you !

  • @dynamn
    @dynamn День тому

    Thanks in advance if you can shed some light. We sell car styling kits, hundreds of products but there’re only few styles and colours, while for many different car models. Is there a feature within shopify, or an app will let us create individual modules of product description, such as modules for each style description; modules for each colour description; modules for each car models. So we can pre-create all those modules and store in the system. When compose description for a product, we can just select its relevant style module; colour module; and compatible car model module, instead of have to repeatedly write up description for each product. Maybe it’s like metafield with pre-filled contents, not under each product, but store in the system and available for each product to select and utilise.

  • @VABianne_2023
    @VABianne_2023 День тому

    Hi Jan. Will this work on Trade V15? Been looking for a tutorial for this new theme and all doesnt work for V15 😔😔

  • @yahavhonig7218
    @yahavhonig7218 2 дні тому

    Jan you are the best on all of youtube - truly a light keeper

  • @VABianne_2023
    @VABianne_2023 2 дні тому

    Hi Jan. It is possible to update this video for the V15? Thank you in advance

  • @bsewall
    @bsewall 2 дні тому

    Thanks for this roadmap! I've been working as a FT Shopify developer for the past 6 years and still learn things every time I watch your videos. Is the javascript course mentioned in this video available? I have a buddy trying to get into the space.

  • @bsewall
    @bsewall 2 дні тому

    FANTASTIC walk-through Jan. Thanks so much! I love the general rule liquid = before page loads, javascript = after page loads. Never thought about it in such a simple way, but totally makes sense!

  • @simplelifeofsusan
    @simplelifeofsusan 4 дні тому

    Hello! This is a great tutorial! I am having trouble adding multiple collapsible rows to my products. Also, turning them off for specific products. I sent in a request for help with this. Just letting you guys know! 🙂

  • @thenecroyeti1
    @thenecroyeti1 5 днів тому

    Respect Matt a lot, but WideBundles is a terrible app. I’m honestly perplexed how it got to where it is now.

  • @ilanoszerowicz6216
    @ilanoszerowicz6216 5 днів тому

    Fantastic explanation! Thank you! I want to ask you if its a good idea to have the Size Chart both as a collapsible and as a pop-up. What do you think? Keep just one or better to have both.

  • @DJMarylicious
    @DJMarylicious 6 днів тому

  • @mindaugaslukosiunas
    @mindaugaslukosiunas 6 днів тому

    By any chance you could guide me how to update metaobject definition on the app update when releasing a new version?

  • @amitprabhu2457
    @amitprabhu2457 6 днів тому

    where do we get the custom data entered by user on the admin side ?

  • @DJMarylicious
    @DJMarylicious 6 днів тому

  • @DJMarylicious
    @DJMarylicious 6 днів тому

    I need to do it tomorrow on my shopify 😅

  • @DJMarylicious
    @DJMarylicious 6 днів тому

    Kill me u best teacher;)

  • @JoHdsgn
    @JoHdsgn 6 днів тому

    Thanks for your video. highly helpful. I was wondering if you can propose your services on project ?

  • @adilabaseer558
    @adilabaseer558 7 днів тому

    Hi, I have multiple variants, and on add to cart or buy it I want the selected item to show exact details except the featured image. I want the variant to be associated with first vatiants image kn cart and checkout is it possible?

  • @mwutal9051
    @mwutal9051 7 днів тому

    Hey Jan, that video is on point. What would you say are the reasons for companies to choose Shopify freelancers over agencies?

    • @CodingWithJan
      @CodingWithJan 7 днів тому

      Awesome. :-) Freelancers are usually preferred if clients want a bit more flexibility or better deals. (because agencies have to charge a bit more due to their complexity in project management for example)

  • @ahsanmahtab
    @ahsanmahtab 7 днів тому

    Please guide me

  • @ahsanmahtab
    @ahsanmahtab 7 днів тому

    I have learnt HTML and CSS but unable to change or edit section by coding. Shopify coding sections are completely different. It js not simple html

    • @CodingWithJan
      @CodingWithJan 7 днів тому

      Hi, I think the next best step for you would be learning liquid! :-)

    • @ahsanmahtab
      @ahsanmahtab 6 днів тому

      @@CodingWithJan ❤️

  • @riessgroup
    @riessgroup 7 днів тому

    Shopify POS extensions are amazing. Shopify POS is the next huge area of growth. Very lucky and glad to be working with our clients in this space!

  • @user-qg9ec1pp9g
    @user-qg9ec1pp9g 7 днів тому

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

  • @msbdx4
    @msbdx4 9 днів тому

    Thank you very much for your videos which are of great quality and very helpful. Once the Metaobject's field is created, the option to edit it are very limited. Is there a way to edit the field without having to delete it and re-doing all the entries for that specific field ? For example if I have a new fabric material coming, how can i add it to my list of preset choices of the material field ?

  • @HaroonCodes-fj8mp
    @HaroonCodes-fj8mp 9 днів тому

    Our store have two scripts one is for "line items" and other is for "Shipping". which type should I select when generating the extensions for both ?

  • @nghiahoang765
    @nghiahoang765 9 днів тому

    6:40

  • @satishsingh9053
    @satishsingh9053 9 днів тому

    I always get error unable to install wdm 0.1.1 while executing theme pull cmd on windows 11. Is there any fix gem install wdm also gives same error. This is my first time with Shopify terrible dev experience. Forced to use browser interface😢

  • @djdiva5
    @djdiva5 11 днів тому

    Thank you for your vids.

  • @user-un5nm7rc5f
    @user-un5nm7rc5f 11 днів тому

    code link is not working plz give a new link

  • @MEYERBIJOUXCO
    @MEYERBIJOUXCO 12 днів тому

    what if i want to do this for 50 products. do i have to do all of this for every product seperadet?

  • @methebee
    @methebee 12 днів тому

    Shopify costs so much and this is not built in?

  • @Louis-zl4tp
    @Louis-zl4tp 13 днів тому

    Just found your content and you have helped me so much understand how liquid and JS works. You break it down so clear. Thank you!

  • @Louis-zl4tp
    @Louis-zl4tp 13 днів тому

    Great tutorial, best video I have found so far that explains json / liquid in shopify

  • @lucasbreton6591
    @lucasbreton6591 13 днів тому

    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!

  • @loveyourpeachesclothingco.3433
    @loveyourpeachesclothingco.3433 14 днів тому

    This is the perfect “how to” video, bravo! Update: June 2024, Spotlight theme. Slight change to the order of the process for adding meta fields. Do not just add a meta field from the main menu, then try to connect the dynamic source in the product template customization menu. Just go to the product template customization menu, select “connect dynamic source, and from THERE, click on + new metafield.

  • @liamgriffin6897
    @liamgriffin6897 14 днів тому

    Nice! POS UI extensions have huge opportunities for developers!!

  • @nicoroman
    @nicoroman 14 днів тому

    Awesome

  • @kazuofficialye
    @kazuofficialye 15 днів тому

    Great video as always! Do you think POS extension apps sell well? It really does seem like an untapped area on the Shopify marketplace. Competition is small, but maybe that's because not many people really use Shopify POS.

    • @CodingWithJan
      @CodingWithJan 15 днів тому

      Hi great question! So Shopify is pushing more on the POS front, but you're also right. The potential user base is smaller than for native online store apps. However, as you mentioned, it's also easier to become the number one app for a specific problem in a less competitive market. (And you have early mover advantage as POS market share grows) Also cool if you can integrate your existing app into the POS as well. So if you have a good idea, I'd say go for it! :-)

    • @kazuofficialye
      @kazuofficialye 15 днів тому

      @@CodingWithJan Thanks for such a quick response! I've been thinking about diving into the Shopify POS market for weeks and your video and response gave me more confidence :) Love your content!

  • @user-qh1lh3cj8t
    @user-qh1lh3cj8t 15 днів тому

    Hi Jan, always amayzing tutorials. I have a question though. How do you add an auto-reply for the contact page in Shopify?

  • @Ucisneros
    @Ucisneros 16 днів тому

    Great video Sir! Much appreciated.

  • @deerajt3166
    @deerajt3166 18 днів тому

    Hi how can we fetch home page content(rendered via sections on theme customizations) or fetch via template names?

  • @maybufe11
    @maybufe11 19 днів тому

    I like how you help this way. so we can be successful also, YOU ARE AMAZING!

  • @juanortegaa6916
    @juanortegaa6916 20 днів тому

    I got lay off almost 1 month ago, I think it has a big reason and I believe it, because I did not have enough time to dedicate/focus to learn to the things I wanted such as Adobe Premiere Pro, Adobe After Effects, Webflow and Shopify, I am a mechanical engineer too and work on IT since 3 years ago as a Frontend dev, also worked with backend. In almost one month I finished the courses I wanted, I am practicing and doing freelancing, I am moving, creating synergia, energy, I wake up at 4 am, exercise, study and improving myself and even enjoying more life. Now, I will apply for jobs again. Everything is discipline and being on movement creating synergia. God is good ! Thanks for this video, I am subscribing to your channel.

    • @isaiasjulio1
      @isaiasjulio1 11 днів тому

      Love this energy Juan.... & Jan, thank you for creating this video / community. *Subscribed* ... Recently finished a Full Stack BootCamp (PERN Stack) and now I'm learning a cool framework (Next.js) to build my portfolio/blog with. After seeing your video, I am 85% convinced this a good path to make money/gain experience in... I noticed you said the market is shifting in about 2 years @codingwithJan , can you exand on that ?

  • @agent4701
    @agent4701 21 день тому

    Warum Englisch :D :D sprich doch bitte deutsch

  • @pixobe
    @pixobe 21 день тому

    Thank you for the Video. Cart Transformstion API is listed as only for Shopify Plus Merchants. Does it mean if I use the function in my public app, then it will fail for non Plus merchants ?

  • @Headdancer1
    @Headdancer1 22 дні тому

    Amazing demonstration. I will give this a try!

  • @sowndharyakrishnan6957
    @sowndharyakrishnan6957 22 дні тому

    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 22 дні тому

      too specific, I'd need to research this

    • @CodingWithJan
      @CodingWithJan 22 дні тому

      but good question!

    • @sowndharyakrishnan6957
      @sowndharyakrishnan6957 22 дні тому

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

  • @user-xs9yv1cu9o
    @user-xs9yv1cu9o 22 дні тому

    thank you so much for video it's awesome

    • @CodingWithJan
      @CodingWithJan 22 дні тому

      You'd love the new version! (one of the most recent videos on my channel)

  • @rdarktemplar1989
    @rdarktemplar1989 23 дні тому

    Error parsing data-flickity on products-carousel js-flickity: SyntaxError: Expected property name or '}' in JSON at position 4 (line 2 column 3)

    • @CodingWithJan
      @CodingWithJan 22 дні тому

      Syntax error means there's probably a mismatching bracket or comma. ChatGTP can help you correct this.

  • @user-dk5sd4vw6b
    @user-dk5sd4vw6b 23 дні тому

    Thanks alot ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤