Coding with Jan - Shopify Developer
Coding with Jan - Shopify Developer
  • Видео 136
  • Просмотров 3 268 714
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 Advi...
Просмотров: 1 404

Видео

How to Learn Shopify Development in 2024
Просмотров 10 тыс.2 месяца назад
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,6 тыс.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 RUclips: www.you...
How to Sell Personalized Products on Shopify 2024 - Building a Product Configurator
Просмотров 8 тыс.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 RUclips Channel www.youtube.com/@trykickflip/videos ► Let's stay in touch :-) 🤝 LinkedIn (business journey an...
How to Use the Shopify API and Make GraphQL Requests
Просмотров 8 тыс.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 тыс.5 месяцев назад
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)
Просмотров 16 тыс.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,6 тыс.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
Просмотров 11 тыс.7 месяцев назад
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)
Просмотров 3,1 тыс.7 месяцев назад
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
Просмотров 14 тыс.9 месяцев назад
How to Install and Use Shopify's CLI as a Beginner
How to Find Your First Paying Freelance Client
Просмотров 2,5 тыс.9 месяцев назад
How to Find Your First Paying Freelance Client
How to Sell Digital Products on Shopify
Просмотров 4,9 тыс.9 месяцев назад
How to Sell Digital Products on Shopify
Hiring your first Developer as a Freelancer or Agency Owner
Просмотров 1,6 тыс.10 месяцев назад
Hiring your first Developer as a Freelancer or Agency Owner
Shopify's new Checkout Extensibility - The True Reasoning and Opportunities for Developers
Просмотров 8 тыс.Год назад
Shopify's new Checkout Extensibility - The True Reasoning and Opportunities for Developers
Personal Update 2023 - Coding with Jan
Просмотров 3,5 тыс.Год назад
Personal Update 2023 - Coding with Jan
Shopify How to Migrate to Checkout Extensibility (Upgrade from Checkout.liquid and Shopify Scripts)
Просмотров 23 тыс.Год назад
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
Просмотров 70 тыс.Год назад
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
Просмотров 11 тыс.Год назад
Shopify Updates 2023 (for Developers) - Shopify Editions Winter 2023
Shopify How to Add a Size Chart (without code or apps)
Просмотров 55 тыс.Год назад
Shopify How to Add a Size Chart (without code or apps)
Shopify Multiple Variant Images - (How to Display Images Specific to the Selected Variant)
Просмотров 67 тыс.Год назад
Shopify Multiple Variant Images - (How to Display Images Specific to the Selected Variant)
Shopify Tutorial - How To Add Color Swatches (beginner friendly)
Просмотров 46 тыс.Год назад
Shopify Tutorial - How To Add Color Swatches (beginner friendly)
Conversion Rate Optimization (CRO) - Driving more sales systematically
Просмотров 4,9 тыс.Год назад
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

Комментарии

  • @Tivabox
    @Tivabox День назад

    Hi Jan, should this still work on version 15.0.0? Because I can't get the variant ID. I've put the script on the main-product.liquid and I see the variant ID's followed by the configured description when I look in console. But it doesn't change the text, probably because I don't have the "this.currentVariant" element in my global.js file.

  • @HealthyFitness-vl2xg
    @HealthyFitness-vl2xg 2 дня назад

    you are amazing bro, more like this please

  • @militaryforcestv1
    @militaryforcestv1 2 дня назад

    Hey, in freemote will you add app development in the future? also, do you use hydrogen framework in freemote?

  • @aaronbowersock
    @aaronbowersock 3 дня назад

    what an amazing tutorial. I only wanted to change my radio buttons to swatch circles. i didnt want the 10 or 20 other customizations for a product, and i didn't want to manuall add swatches to every product like most shopify apps were designed to do. I JUST wanted to have little circles. I have experience in HTML, some css and other stuff. This tutorial was fantastic and helped me do what I needed

  • @usr829
    @usr829 3 дня назад

    how to import data for metafields from csv.

  • @NativeSonsCoffee
    @NativeSonsCoffee 5 дней назад

    I have a metaobject image added to my product metafields and I would like to add it as a block inside the product information section, however it seems it isn't a recognized block type. How could I add that block so that the image is added at the bottom of the product information?

  • @aashirjamil4134
    @aashirjamil4134 6 дней назад

    Hey Jan, I hope you're doing well. I want to express my appreciation for your efforts in Shopify development; I've never come across a developer like you. I have a request: could you please publish a new playlist on Shopify development that includes both front-end and back-end development from scratch, all in a single playlist? I've been searching for a course like this but haven't been able to find one. Your attention to this request would be greatly appreciated. Thank you very much. Best regards, Aashir Jamil

  • @farukweb
    @farukweb 6 дней назад

    Nice tutorial for color swatch

  • @maxoys45
    @maxoys45 7 дней назад

    This may be a stupid question, but if I have a currently live store, how do i get an extension i've made on my development store, onto my live shopify store? Thanks

    • @CodingWithJan
      @CodingWithJan 5 дней назад

      Not a stupid question at all 😄 So Checkout UI extensions must be connected to an App (especially if you have an interface to configure them) Then you can deploy that app to a server (Heroku for example) and install the app on the clients' store

    • @maxoys45
      @maxoys45 5 дней назад

      @@CodingWithJan Thanks Jan, appreciate it. I've managed to get somewhere with it now, still think the flow is a bit weird when you're an in-house developer having to make a separate Partner account but at least it's working!

  • @homeware75
    @homeware75 9 дней назад

    Great video!. It is mad that shopify could "Easily" just add the variant metafields to the product page like product metafields, removing the need for any potentially unscalable custom work.

  • @grephenson
    @grephenson 10 дней назад

    Would love a video on where you think the industry is going. You mentioned “upmarket”. I’m really trying to figure out where to focus my energies.

    • @CodingWithJan
      @CodingWithJan 10 дней назад

      If you like the technical side of things: Custom Integrations / Shopify Functions / Checkout UI Extensions. Qualified App developers are in huge demand, and hard to find. This is not beginner friendly though!

  • @hemangsharma9358
    @hemangsharma9358 12 дней назад

    Hi, Is there a way to store text in a metaobject without linking it to any metafield or other data and access the value in <h2>{{ here }}</h2>? I have used Gempages Builder to build my home page for the Shopify website. I want to translate the text in it using Translate and Adapt, but it's not working. I can achieve this by translating the text of a metaobject and then accessing the value in Gempages Builder.

  • @purple88able
    @purple88able 12 дней назад

    This info is gold! Thank you blessings!

  • @julianpaus9517
    @julianpaus9517 12 дней назад

    Hi Jan, danke dir! Mega Video. Bekomme den Fehler "Run Code: TypeError: cannot read property 'orders' of null. Was tun um das zu beheben? Hat es was mit dem Kunden in der Shopify Bestellung zu tun? Habe die Bestellung im Admin angelegt, da der Shop noch nicht ganz konfiguriert ist.

    • @CodingWithJan
      @CodingWithJan 12 дней назад

      Hi Julian, besten Dank! :-) Was du da siehst in ein Javascript Fehler. Aktuell sind die noch etwas schwierig zu debuggen. Der Fehler oben passiert zum Beispiel, wenn du versuchst auf etwas zuzugreifen, was nicht existiert. zum Beispiel meineVariable = data.orders; Aber sagen wir es gibt "data" garnicht. Oder Data hat keinen Wert (null). Dann gibts auch nicht data.orders. --> TypeError: cannot read property 'orders' of null. Du könntest dein Script mal zusammen mit dem Fehler bei ChatGTP rein kopieren und sagen "try to fix this / or add a check to prevent my code from crashing"

    • @julianpaus9517
      @julianpaus9517 11 дней назад

      @@CodingWithJan Top, danke für die Rückmeldung. Fehler entdeckt und gefixt :)

  • @jamesauble8091
    @jamesauble8091 13 дней назад

    Did you have to pay for a Shopify Plus plan to demo Oxygen?

    • @CodingWithJan
      @CodingWithJan 12 дней назад

      This was a Shopify Collab and I received special access rights on my development store. However, this might also be available in the public developer preview now, I'd have to check.

  • @raufaamir
    @raufaamir 14 дней назад

    Very straight forward explanation!

  • @Klee87278
    @Klee87278 16 дней назад

    Does this approach work if I'm using page metafield instead of simple text?

    • @CodingWithJan
      @CodingWithJan 13 дней назад

      Yes it should! :-)

    • @Klee87278
      @Klee87278 10 дней назад

      @@CodingWithJan not working, it's showing page link/url instead of page content 🥲 Hope for part 2 on how to display page metafield for different variants 🙏

  • @kerimtim
    @kerimtim 16 дней назад

    9:10 For those who are wondering why the Input does not show when clicked. It shows on the right hand side of the screen, just a small update or change idk

    • @CodingWithJan
      @CodingWithJan 13 дней назад

      Could also be screensize, I usually zoom in a bit so people can read it better! Cheers

  • @zapawasglitter6871
    @zapawasglitter6871 17 дней назад

    Do you have a video on how to have multiple colors and the sizes to match those colors?

  • @MichelleGreen-ne1dd
    @MichelleGreen-ne1dd 17 дней назад

    I have a different theme, however, everything was going well, exactly as the video showed but then, when I got to the part with the global.js file, the word "variant" wasn't used even once in that file. So, I looked in the file "critical-global.js" it had nearly the exact same code as the global.js file shown in the video. I added the code instructed in the video but it didn't log to the console. Did anyone else have a similar issue or does anyone know how to fix this?

    • @CodingWithJan
      @CodingWithJan 13 дней назад

      Here it really depends on the exact code and the theme that's used. You might want to consult with a dev here.

  • @mabelandreasalazar5125
    @mabelandreasalazar5125 17 дней назад

    Thank you !

  • @dynamn
    @dynamn 18 дней назад

    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 19 дней назад

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

    • @CodingWithJan
      @CodingWithJan 13 дней назад

      It greatly depends on the exact theme code, and would need to look into this a bit too! Chances are the theme is slightly different though, so the code would need to be adjusted

  • @yahavhonig7218
    @yahavhonig7218 19 дней назад

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

  • @VABianne_2023
    @VABianne_2023 19 дней назад

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

  • @bsewall
    @bsewall 20 дней назад

    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.

    • @CodingWithJan
      @CodingWithJan 13 дней назад

      Hey I'm glad you ask! 😄 I'm making good progress and already uploading the first videos to the learning platform. I think I'll launch the first prototype within the next 2 weeks (and early birds get a big discount + access to all future updates of course). If you'd like you can send me a message on LinkedIn or just an email, and I'll provide more details as soon as I have them! :-) Appreciate it and have an awesome day!

  • @bsewall
    @bsewall 20 дней назад

    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!

    • @CodingWithJan
      @CodingWithJan 13 дней назад

      Awesome!! :D Thanks for the great feedback!

  • @simplelifeofsusan
    @simplelifeofsusan 21 день назад

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

    • @CodingWithJan
      @CodingWithJan 13 дней назад

      Thanks Susan, I'll be going through all requests in a minute! :-) Also sorry for the delay, last week was too hectic because of Shopify Editions and traveling to Toronto.

  • @thenecroyeti1
    @thenecroyeti1 22 дня назад

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

  • @ilanoszerowicz6216
    @ilanoszerowicz6216 23 дня назад

    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.

    • @CodingWithJan
      @CodingWithJan 13 дней назад

      Awesome! :-) I think one is enough, people will find it.

  • @DJMarylicious
    @DJMarylicious 23 дня назад

  • @mindaugaslukosiunas
    @mindaugaslukosiunas 23 дня назад

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

  • @amitprabhu2457
    @amitprabhu2457 24 дня назад

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

    • @CodingWithJan
      @CodingWithJan 13 дней назад

      Should be right on the order. (you should also be able to see it during checkout already, so in order to test this, just put an item in the cart and navigate to the checkout)

  • @DJMarylicious
    @DJMarylicious 24 дня назад

  • @DJMarylicious
    @DJMarylicious 24 дня назад

    I need to do it tomorrow on my shopify 😅

  • @DJMarylicious
    @DJMarylicious 24 дня назад

    Kill me u best teacher;)

  • @JoHdsgn
    @JoHdsgn 24 дня назад

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

  • @adilabaseer558
    @adilabaseer558 24 дня назад

    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 24 дня назад

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

    • @CodingWithJan
      @CodingWithJan 24 дня назад

      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 25 дней назад

    Please guide me

  • @ahsanmahtab
    @ahsanmahtab 25 дней назад

    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 24 дня назад

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

    • @ahsanmahtab
      @ahsanmahtab 24 дня назад

      @@CodingWithJan ❤️

  • @riessgroup
    @riessgroup 25 дней назад

    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 25 дней назад

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

    • @CodingWithJan
      @CodingWithJan 13 дней назад

      I'm not 100% sure what this question means. You'd have to build an app to use checkout UI Extensions.

    • @user-qg9ec1pp9g
      @user-qg9ec1pp9g 13 дней назад

      @@CodingWithJan Sorry, I did not express myself clearly. I meant that if when migrating the Checkout to Extensibility I can only use the datalayers that are activated by default, can I add variables to them or do I have to make custom datalayers?

  • @msbdx4
    @msbdx4 26 дней назад

    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 27 дней назад

    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 ?

    • @CodingWithJan
      @CodingWithJan 13 дней назад

      You basically just select the starter template, but can still do everything in one.

  • @nghiahoang765
    @nghiahoang765 27 дней назад

    6:40

  • @satishsingh9053
    @satishsingh9053 27 дней назад

    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 28 дней назад

    Thank you for your vids.

  • @zohaibali888
    @zohaibali888 29 дней назад

    code link is not working plz give a new link

  • @MEYERBIJOUXCO
    @MEYERBIJOUXCO 29 дней назад

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