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

[@CodingWithJan]

🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=sections-yt 👨‍💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer

[@zerogaming5792]

one of the genuine guys out there non-fancy talks pure work, complete guidance, thankyou mate ., love you

[@TheNewGreenIsBlue]

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]

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 :-)

[@HaseebAdnan0]

Was waiting for this video, thanks!

[@CodingWithJan]

Awesome, super welcome! 😃

[@nestorinchina]

Awesome. Very well explained and fully complete product.

[@Ajaysharma-p5o]

Must appreciated work, explained so well with all the necessary details for better understanding. keep the good work going.

[@user-rx8ob7ob2v]

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

[@stephane5294]

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]

trash

[@mahrukhkhan6496]

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]

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.

[@indie_rok]

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!

[@themakingofahomemaker6991]

This is so helpful. Thank you!

[@davidwatts989]

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]

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]

@@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.

[@roning622]

can you show example using metaobjects for FAQ questions?

[@CodingWithJan]

Hi, I think normal sections and blocks are better here! :-)

[@CharlieV1221]

Fantastic explanation. Thank you!

[@CodingWithJan]

You're very welcome!

[@ryanriaz1163]

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]

same!

[@CodingWithJan]

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.

[@MK-Tech]

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]

Please can I have your number

[@GabriFreire]

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]

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. :-)

[@jimshoes]

where can i copy/paste your html and css from?

[@_scottdixon_]

Another awesome video, thank you Jan! 🙌

[@CodingWithJan]

Thank you, Scott!! 😄🙌

[@Sparoblaise]

Please can I have your number

[@ioannisme7495]

amazing clear explanation! thank you

[@LouisCharlesBlais]

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]

Hi Louis, it should be live from today! :-) You might need to create a new development store also settings the checkbox --> developer preview

[@amirhamza3893]

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]

Sections are hard to copy because people also need to adjust the CSS to any theme. Wouldn't worry about that

[@osamaalsalmi2657]

Good stuff. Thanks for the good breakdown.

[@CodingWithJan]

Awesome, thank you!

[@AidanONeill-zo5ow]

Great tutorial, thank you!

[@CodingWithJan]

Glad you enjoyed it!

[@jmg9509]

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

[@nym49]

How did you get global blocks in Dawn? It's seemingly not yet in the v13 🤔

[@CodingWithJan]

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]

@@CodingWithJan Ahh, I'll check it out and see how to activate this retroactively in my dev store. Thanks a lot!

[@RolandoConcepcion-r6r]

Hi now. Do you have any videos setting up a local Shopify development environment with the new CLI?

[@CodingWithJan]

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. :-)

[@HH-lw2vg]

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]

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]

@@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?

[@TravisRayLive]

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.

[@FarmerBrad]

Can you show how to create one using the new Shopify CLI?

[@AbhixDev]

Learned alot. Thanks.

[@CodingWithJan]

Awesome!

[@3odesign]

So theme blocks will replace snippets ?

[@arifurrahman5993]

Hi, thank you for your video. Is it already possible to apply our theme or it will release soon.

[@CodingWithJan]

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.

[@anotherclown897]

Hi Jan, how can I join the shopify developer bootcamp?

[@rajbista1478]

Much appreciated, thanks.

[@robertpalmer7729]

Good clear video

[@kerimtim]

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]

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

[@muneebjoiya]

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]

Yes JavaScript is probably the most advance! I'll think of some cool usecases.

[@cmscss]

Thank you.

[@Fedgery007]

Great video!

[@rafiullah6552]

Hello jan can you make a playlist from intinal to advance you are to good

[@ahmedbayoumi1090]

Thanks

[@GALA01670]

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]

You could add a third block type called "category" or "separator".

[@GALA01670]

@@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]

@@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

[@raufaamir]

Very straight forward explanation!

[@brandon_shopify_expert]

Great work Jan! Keep it up 😁

[@CodingWithJan]

Thank you Brandon!! :-) Here to stay 😁

[@BF-non]

I love you daddy Jan! keep it going.

[@CodingWithJan]

lol 😂

[@rashidabbas5061]

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]

Images are tricky! That could be done with CSS and media queries for example.

[@Rikeshverma007]

Need a video on ella theme costomisation

[@CodingWithJan]

A little too specific. :-) My Vote would be 1) watch this video 2) understand the concept 3) Apply to any theme

[@wawowewo]

cant you just do this using the already existing snippets and passing props

[@IrynaAbrosimova]

thanks, two days I can't understand how to do that

[@CodingWithJan]

Sometimes all we need is the information in different order. :-)

[@VlogsSidd]

{% 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

[@11001001tm]

🎉😁

[@CodingWithJan]

:-)

[@ShoneTheGenije]

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]

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 :-)

[@dan110024]

you're buying the keyboard arent you??

[@CodingWithJan]

Maybe the Keycap 😁