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

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.com/in/jan-frey/
► Resources
--------------------------------------------------------------------------
Shopify Documentation on Input settings
shopify.dev/docs/themes/architecture/settings/input-settings
Shopify Documentation on Sections
shopify.dev/docs/themes/architecture/sections
Shopify Theme Blocks Documentation:
shopify.dev/docs/themes/architecture/blocks/theme-blocks
Learn more about Shopify Metaobjects
kzbin.info/www/bejne/h6DHk6awg8Zqmas
FAQ Section Markup
appp.me/p8k31z
Timestamps
00:00 Today's Video
00:20 What are Sections and Blocks
02:53 Understanding Section Theme Files
05:05 Building a Section from Scratch
18:41 Where Customizer Data is stored
20:37 SchemaTranslation Files
22:00 Global Theme Blocks (Editions 2024)
25:06 Outro
🔍 SEO Description
--------------------------------------------------------------------------
This video covers how to create your first Shopify Theme Section.
At a high level, sections are kind of like the building blocks of a theme. They are added via the theme customizer and can be re-used in multiple places of the online store. Merchants can configure sections by using the customizer settings, even without technical experience. As theme developers we can add a variety of different input settings to our section, by defining them in the section schema. Since the release of Shopify's online store 2.0, section can also be used on any page of the store (sections everywhere). Beyond that we're covering how to configure sections blocks as well as all the latest updates concerning Shopify Theme Blocks. This video provides a full and in-depth guide on how to build Shopify sections in 2024.
codingwithjan.com

[@CodingWithJan]

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

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

[@raufaamir]

Very straight forward explanation!

[@HaseebAdnan0]

Was waiting for this video, thanks!

[@CodingWithJan]

Awesome, super welcome! 😃

[@loigideliguer2341]

This is the most detailed tutorial I've ever seen. Thanks Jan, keep going!

[@CodingWithJan]

Glad it was helpful! :-)

[@ioannisme7495]

amazing clear explanation! thank you

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

[@rajbista1478]

Much appreciated, thanks.

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

[@cmscss]

Thank you.

[@Fedgery007]

Great video!

[@CharlieV1221]

Fantastic explanation. Thank you!

[@CodingWithJan]

You're very welcome!

[@robertpalmer7729]

Good clear video

[@AbhixDev]

Learned alot. Thanks.

[@CodingWithJan]

Awesome!

[@osamaalsalmi2657]

Good stuff. Thanks for the good breakdown.

[@CodingWithJan]

Awesome, thank you!

[@_scottdixon_]

Another awesome video, thank you Jan! 🙌

[@CodingWithJan]

Thank you, Scott!! 😄🙌

[@user-zv9wc1sh4m]

Please can I have your number

[@ahmedbayoumi1090]

Thanks

[@AidanONeill-zo5ow]

Great tutorial, thank you!

[@CodingWithJan]

Glad you enjoyed it!

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

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

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

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

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

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

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

[@rafiullah6552]

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

[@FarmerBrad]

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

[@Jan-jf4th]

I love you daddy Jan! keep it going.

[@CodingWithJan]

lol 😂

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

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

[@3odesign]

So theme blocks will replace snippets ?

[@user-wp3nk8zq4r]

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

[@jimshoes]

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

[@anotherclown897]

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

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

[@user-zv9wc1sh4m]

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

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

[@roning622]

can you show example using metaobjects for FAQ questions?

[@CodingWithJan]

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

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

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

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

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

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

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

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

[@11001001tm]

🎉😁

[@CodingWithJan]

:-)

[@IrynaAbrosimova]

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

[@CodingWithJan]

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

[@brandon_shopify_expert]

Great work Jan! Keep it up 😁

[@CodingWithJan]

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

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

[@dan110024]

you're buying the keyboard arent you??

[@CodingWithJan]

Maybe the Keycap 😁

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