Тёмный

How to Create New Shopify Sections in 2024 (Shopify Editions) 

Coding with Jan - Shopify Developer
Подписаться 53 тыс.
Просмотров 20 тыс.
50% 1

Опубликовано:

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 92   
@CodingWithJan
@CodingWithJan 5 месяцев назад
🎯 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
@zerogaming5792
@zerogaming5792 7 месяцев назад
one of the genuine guys out there non-fancy talks pure work, complete guidance, thankyou mate ., love you
@Ajaysharma-p5o
@Ajaysharma-p5o 26 дней назад
Must appreciated work, explained so well with all the necessary details for better understanding. keep the good work going.
@user-rx8ob7ob2v
@user-rx8ob7ob2v 7 месяцев назад
Hi, how can you copy a section code from a theme to another one, let's say section "multicolumn" in Dawn theme, I like how it works, and I want to copy it or make it work on Kalles theme. Please enlight me
@jmg9509
@jmg9509 4 месяца назад
8:30 - basic section Input types 9:27 - Blocks 13:00 - FAQ - Implementation of HTML, CSS 16:18 - Using section/schema values in the HTML 18:40 - Where Data is Stored
@AbhixDev
@AbhixDev 5 месяцев назад
Learned alot. Thanks.
@CodingWithJan
@CodingWithJan 5 месяцев назад
Awesome!
@mahrukhkhan6496
@mahrukhkhan6496 3 месяца назад
Your tutorial was very helpful. Thank you for sharing this. I have one question though, I added a new section for expanding tabs and for testing purposes, I added it on my homepage. I actually wanted add it on my product pages. But now the size of the section is different on both home page and product page. DO I need to do it from the scratch? or simply just make changes in product JSON? Thank you!
@CodingWithJan
@CodingWithJan 3 месяца назад
I think this might more be a CSS / styling issue. Here it depends a bit on the exact section, but you want to have styling rules in place, that look good even if the available space changes.
@AidanONeill-zo5ow
@AidanONeill-zo5ow 4 месяца назад
Great tutorial, thank you!
@CodingWithJan
@CodingWithJan 4 месяца назад
Glad you enjoyed it!
@rashidabbas5061
@rashidabbas5061 3 месяца назад
How to customize a section image that fits on all types of devices like PC, Tab, and cell phone, without changing the image pixel size
@CodingWithJan
@CodingWithJan 3 месяца назад
Images are tricky! That could be done with CSS and media queries for example.
@BF-non
@BF-non 8 месяцев назад
I love you daddy Jan! keep it going.
@CodingWithJan
@CodingWithJan 8 месяцев назад
lol 😂
@stephane5294
@stephane5294 7 месяцев назад
Where did you find all the css classes to use? i know Shopify is using a special claases names and they use Bootstrap but im struggling with that. Thanks
@CodingWithJan
@CodingWithJan 6 месяцев назад
trash
@HaseebAdnan0
@HaseebAdnan0 8 месяцев назад
Was waiting for this video, thanks!
@CodingWithJan
@CodingWithJan 8 месяцев назад
Awesome, super welcome! 😃
@ryanriaz1163
@ryanriaz1163 8 месяцев назад
Hey @CodingWithJan, I follow all of your instruction now-a-days. It helps me a lot to be a good Shopify developer. Jan, Can you guide me how to be a Shopify theme developer as I'm a beginner in 2024? which path should I take like Hydrogen learning or Liquid learning? Or can you explain more in 2024 which is the best career advice for being a Shopify developer?
@Milan_mallhi
@Milan_mallhi 8 месяцев назад
same!
@CodingWithJan
@CodingWithJan 8 месяцев назад
Great questions! :-) As a beginner 100% Liquid and Themes first. Hydrogen is more for enterprise brands, and if you're still developing your portfolio, communication- and sales skills, it will be harder to get in touch with these enterprise brands.
@roning622
@roning622 6 месяцев назад
can you show example using metaobjects for FAQ questions?
@CodingWithJan
@CodingWithJan 6 месяцев назад
Hi, I think normal sections and blocks are better here! :-)
@VlogsSidd
@VlogsSidd 6 месяцев назад
{% content_for "blocks" %} {% schema %} { "name": "theme block test section", "blocks": [ { "type":"@theme" } ], "presets": [ { "name": "test section" } ] } {% endschema %} test section code error Liquid syntax error (line 2): Unknown tag 'content_for "blocks"' how can solve this
@jimshoes
@jimshoes 4 месяца назад
where can i copy/paste your html and css from?
@kerimtim
@kerimtim 2 месяца назад
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 2 месяца назад
Could also be screensize, I usually zoom in a bit so people can read it better! Cheers
@TheNewGreenIsBlue
@TheNewGreenIsBlue 8 месяцев назад
Jan, first of all... I LOVE how approachable your videos are. You don't get too deep in to the weeds of working locally with VS Code or git-integration when explaining something. I love how you break things down to the MVP of what you REALLY need to know. If I can give a small amount of feedback when doing these tutorials. Try to avoid using the same name in a lot of places. It can be confusing for new ones to the platform. For example, rather than the block type being "question" you could use "question_answer" with "Question & Answer" as the label. For the blocks, use "question" as the "id" but "Question" as the label... that sort of thing. Your CSS actually follows this kind of convention (which makes sense because it has to) with `faq_row` and `faq_question` being different. While a developer can follow along easily, these kinds of conventions (when teaching) can make a world of difference to a newbie.
@CodingWithJan
@CodingWithJan 8 месяцев назад
Hey thanks so much for the great feedack. Awesome you find these videos helpful. 😄 Also really appreciate the fair and constructive feedback. Will def keep this in mind for the next videos. Cheers :-)
@themakingofahomemaker6991
@themakingofahomemaker6991 19 дней назад
This is so helpful. Thank you!
@loigideliguer2341
@loigideliguer2341 4 месяца назад
This is the most detailed tutorial I've ever seen. Thanks Jan, keep going!
@CodingWithJan
@CodingWithJan 4 месяца назад
Glad it was helpful! :-)
@indie_rok
@indie_rok 7 месяцев назад
Pretty cool! Thanks Jan, great tutorial and information as always! Stoked about the new Global Theme Blocks implementation going down the reusable components path like most frameworks does. A nice addition this will be :) Cheers!
@GabriFreire
@GabriFreire 3 месяца назад
Great video!! The Dawn theme has a limit of 25 sections per template. How can I increase this limit? Where can I adjust the code to accommodate this limit?
@CodingWithJan
@CodingWithJan 3 месяца назад
Hey Gabri, great question. This is not specifc to the dawn theme, but rather a general limit. "25 sections per template and 50 blocks per section" 25 sections per page seems a lot though, maybe some of the content could be summarized? Or some content that's now a section could actually be a block? Just thinking out loud here. :-)
@FarmerBrad
@FarmerBrad 7 месяцев назад
Can you show how to create one using the new Shopify CLI?
@amirhamza3893
@amirhamza3893 6 месяцев назад
Thank you so much for awesome video. Would you please make a video. How to protect Section code or encrypted. So No one can able to copy code from theme.
@CodingWithJan
@CodingWithJan 6 месяцев назад
Sections are hard to copy because people also need to adjust the CSS to any theme. Wouldn't worry about that
@TravisRayLive
@TravisRayLive 7 месяцев назад
Could you please do a video on the Branding API, for example swapping the default Checkout footer for a new one? Their tutorial for it is awful because you have to make all of these GraphQL mutations but how the heck does that apply to the *any* store if the mutations only exist on certain ones? It's so confusing. Love your videos, thank you for your help.
@MK-Tech
@MK-Tech 7 месяцев назад
Hi, great video! I managed to create a block for my product pages to display our payment methods. It works great, BUT it doesn’t get the blue framing that is showing up for all other blocks in the right preview widow in the theme editor…?! Any idea what’s wrong?
@Sparoblaise
@Sparoblaise 7 месяцев назад
Please can I have your number
@IrynaAbrosimova
@IrynaAbrosimova 5 месяцев назад
thanks, two days I can't understand how to do that
@CodingWithJan
@CodingWithJan 5 месяцев назад
Sometimes all we need is the information in different order. :-)
@HH-lw2vg
@HH-lw2vg 4 месяца назад
It only works when done from the admin panel code editor and not from VS Code, for example. Do Shopify developers mostly work in the Shopify code editor? Or do I need to push the code first if I want to use my own editor for this?
@CodingWithJan
@CodingWithJan 4 месяца назад
if you want to develop professionally --> 100% use VS code. You can use the "Shopify CLI" to download themes, work locally, and push back changes
@HH-lw2vg
@HH-lw2vg 4 месяца назад
@@CodingWithJan Ah alright, I am currently using the Shopify theme kit. But do i have to push canges before i can see new sections in my Shopify store?
@ahmedbayoumi1090
@ahmedbayoumi1090 3 месяца назад
Thanks
@anotherclown897
@anotherclown897 7 месяцев назад
Hi Jan, how can I join the shopify developer bootcamp?
@nym49
@nym49 7 месяцев назад
How did you get global blocks in Dawn? It's seemingly not yet in the v13 🤔
@CodingWithJan
@CodingWithJan 7 месяцев назад
They are in developer preview right now! Means when you create a new development store you have to set that checkbox / select that from the dropdown. Developer preview will disable the store for transfer, but you get early access to the features to make yourself familiar.
@nym49
@nym49 7 месяцев назад
@@CodingWithJan Ahh, I'll check it out and see how to activate this retroactively in my dev store. Thanks a lot!
@rafiullah6552
@rafiullah6552 8 месяцев назад
Hello jan can you make a playlist from intinal to advance you are to good
@ioannisme7495
@ioannisme7495 5 месяцев назад
amazing clear explanation! thank you
@GALA01670
@GALA01670 4 месяца назад
Hello brother, this is amazing. But I have a question about the FAQ section. I have a FAQ section, that has A main title, and some categories like general FAQ, Product FAQ, etc and every category has questions and answers. How can I do it? if I think question and ans as a block then how can do Category?
@CodingWithJan
@CodingWithJan 3 месяца назад
You could add a third block type called "category" or "separator".
@GALA01670
@GALA01670 3 месяца назад
@@CodingWithJan Thanks dear, but as my structure it's some problem for me. I have checked Shopify that they allows nested blocks and blocks folder in the theme, but in dwan theme I don't see it the folder and nested block not work. do you have any idea? Do you have any video about it?
@GALA01670
@GALA01670 3 месяца назад
@@CodingWithJan Thanks brother, but as my structure it's not working properly. This is my structure b1b2 ... ... ... ... if I div make blocks then h3 and p what will do? Blocks inside blocks not work
@3odesign
@3odesign 7 месяцев назад
So theme blocks will replace snippets ?
@LouisCharlesBlais
@LouisCharlesBlais 8 месяцев назад
Great video, thanks! Very nuch excited to be using the new theme blocks! Any idea when this is going to be available to the public? I have messed around with it in a development store but can’t find the actual release date anywhere..
@CodingWithJan
@CodingWithJan 8 месяцев назад
Hi Louis, it should be live from today! :-) You might need to create a new development store also settings the checkbox --> developer preview
@robertpalmer7729
@robertpalmer7729 7 месяцев назад
Good clear video
@Fedgery007
@Fedgery007 6 месяцев назад
Great video!
@rajbista1478
@rajbista1478 8 месяцев назад
Much appreciated, thanks.
@cmscss
@cmscss 8 месяцев назад
Thank you.
@muneebjoiya
@muneebjoiya 8 месяцев назад
I need to know about JavaScript lectures from Jan Sir because I am not very much good in making JS functions I hope you will understand. I need to make some popups or something like that in shopify
@CodingWithJan
@CodingWithJan 8 месяцев назад
Yes JavaScript is probably the most advance! I'll think of some cool usecases.
@RolandoConcepcion-r6r
@RolandoConcepcion-r6r 8 месяцев назад
Hi now. Do you have any videos setting up a local Shopify development environment with the new CLI?
@CodingWithJan
@CodingWithJan 8 месяцев назад
I do have one on installing the CLI and getting it to work. It's called "How to Install and Use Shopify's CLI as a Beginner" As a code editor, I usually use VS Code, which is pretty much the industry standard. Hope this is a helpful starting point. :-)
@ShoneTheGenije
@ShoneTheGenije 8 месяцев назад
Jan, I usually like your video, but in this one you spent to much time on the old stuff, with just a short glimpse something new, that is still on the long string.
@CodingWithJan
@CodingWithJan 8 месяцев назад
Hey no worries, all feedback is always appreciated. I can see where this is coming from. The goal here was to create something that'd also be useful in 6-12 months from here, and more like a full guide for beginners. More advanced topics also coming shortly :-)
@arifurrahman5993
@arifurrahman5993 7 месяцев назад
Hi, thank you for your video. Is it already possible to apply our theme or it will release soon.
@CodingWithJan
@CodingWithJan 7 месяцев назад
So sections are fully available! :-) The new Global Blocks are now in developer preview, but not for production stores yet. This means Developers can already test and get familiar with them.
@osamaalsalmi2657
@osamaalsalmi2657 7 месяцев назад
Good stuff. Thanks for the good breakdown.
@CodingWithJan
@CodingWithJan 7 месяцев назад
Awesome, thank you!
@dan110024
@dan110024 8 месяцев назад
you're buying the keyboard arent you??
@CodingWithJan
@CodingWithJan 8 месяцев назад
Maybe the Keycap 😁
@CharlieV1221
@CharlieV1221 6 месяцев назад
Fantastic explanation. Thank you!
@CodingWithJan
@CodingWithJan 6 месяцев назад
You're very welcome!
@Rikeshverma007
@Rikeshverma007 8 месяцев назад
Need a video on ella theme costomisation
@CodingWithJan
@CodingWithJan 8 месяцев назад
A little too specific. :-) My Vote would be 1) watch this video 2) understand the concept 3) Apply to any theme
@davidwatts989
@davidwatts989 6 месяцев назад
Love the way you explain things. Really helps me wrap my brain around it all. Any chance you could do a similar video to this but for creating a simple section that displays a single image using an image picker. With options to change size,alignment and crop shape eg. Square/circle etc?
@CodingWithJan
@CodingWithJan 6 месяцев назад
Thanks for the great feedback! :-) Also great suggestion! Right now the pipeline is quite busy though. As a quick win I'd recommend, checking how its implemented in themes / chatting with chatGTP / testing things and using the documentation. Hope this is still a helpful starting point.
@davidwatts989
@davidwatts989 6 месяцев назад
@@CodingWithJan thanks mate, I will have to watch more of your videos and see if i can make sense of some of the existing section code and do some testing.
@11001001tm
@11001001tm 8 месяцев назад
🎉😁
@CodingWithJan
@CodingWithJan 8 месяцев назад
:-)
@_scottdixon_
@_scottdixon_ 8 месяцев назад
Another awesome video, thank you Jan! 🙌
@CodingWithJan
@CodingWithJan 8 месяцев назад
Thank you, Scott!! 😄🙌
@Sparoblaise
@Sparoblaise 7 месяцев назад
Please can I have your number
@raufaamir
@raufaamir 2 месяца назад
Very straight forward explanation!
@brandon_shopify_expert
@brandon_shopify_expert 8 месяцев назад
Great work Jan! Keep it up 😁
@CodingWithJan
@CodingWithJan 8 месяцев назад
Thank you Brandon!! :-) Here to stay 😁
Далее
How to Automate Your Shopify Store Using Shopify Flow
17:41
How to build custom Shopify sections (In-depth guide)
20:28
How to Learn Shopify Development in 2024
10:28
Просмотров 18 тыс.
6 Must Have Sections For Every Shopify Store
15:08
Просмотров 17 тыс.
Shopify App Development in 2024
13:14
Просмотров 4,9 тыс.
I tried every website builder. This is the BEST
19:31
Просмотров 113 тыс.
Shopify Theme App Extensions (For Theme Developers)
37:40
13 Things To Remove From Your Website Immediately
12:33