![Coding with Jan - Shopify Developer](/img/default-banner.jpg)
- Видео 136
- Просмотров 3 268 714
Coding with Jan - Shopify Developer
США
Добавлен 14 авг 2019
Huge believer in online education, and somehow became one of the biggest channels on Shopify Development. 😁
Most proud of working with over 3,000 awesome students in our Freelance Developer Bootcamp - Freemote.
Sharing the things I wish existed when I was starting, in hopes you find them useful.
Cheers,
Jan :-)
Most proud of working with over 3,000 awesome students in our Freelance Developer Bootcamp - Freemote.
Sharing the things I wish existed when I was starting, in hopes you find them useful.
Cheers,
Jan :-)
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...
⭐ 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
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
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.
you are amazing bro, more like this please
Hey, in freemote will you add app development in the future? also, do you use hydrogen framework in freemote?
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
how to import data for metafields from csv.
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?
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
Nice tutorial for color swatch
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
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
@@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!
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.
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.
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!
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.
This info is gold! Thank you blessings!
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.
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"
@@CodingWithJan Top, danke für die Rückmeldung. Fehler entdeckt und gefixt :)
Did you have to pay for a Shopify Plus plan to demo Oxygen?
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.
Very straight forward explanation!
Does this approach work if I'm using page metafield instead of simple text?
Yes it should! :-)
@@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 🙏
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
Could also be screensize, I usually zoom in a bit so people can read it better! Cheers
Do you have a video on how to have multiple colors and the sizes to match those colors?
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?
Here it really depends on the exact code and the theme that's used. You might want to consult with a dev here.
Thank you !
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.
Hi Jan. Will this work on Trade V15? Been looking for a tutorial for this new theme and all doesnt work for V15 😔😔
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
Jan you are the best on all of youtube - truly a light keeper
😊
Hi Jan. It is possible to update this video for the V15? Thank you in advance
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.
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!
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!
Awesome!! :D Thanks for the great feedback!
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! 🙂
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.
Respect Matt a lot, but WideBundles is a terrible app. I’m honestly perplexed how it got to where it is now.
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.
Awesome! :-) I think one is enough, people will find it.
❤
By any chance you could guide me how to update metaobject definition on the app update when releasing a new version?
where do we get the custom data entered by user on the admin side ?
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)
❤
I need to do it tomorrow on my shopify 😅
Kill me u best teacher;)
Thanks for your video. highly helpful. I was wondering if you can propose your services on project ?
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?
Hey Jan, that video is on point. What would you say are the reasons for companies to choose Shopify freelancers over agencies?
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)
Please guide me
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
Hi, I think the next best step for you would be learning liquid! :-)
@@CodingWithJan ❤️
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!
Sorry if I use this checkout extensibility, are there datalayers display when I use checkout extensiblity or these can be add "by hand"?
I'm not 100% sure what this question means. You'd have to build an app to use checkout UI Extensions.
@@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?
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 ?
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 ?
You basically just select the starter template, but can still do everything in one.
6:40
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😢
Thank you for your vids.
code link is not working plz give a new link
what if i want to do this for 50 products. do i have to do all of this for every product seperadet?