How to create new Theme Sections and Blocks

[@CodingWithJan]

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

[@moatazsaber3369]

This is the most powerful tutorial I have ever seen! only in 14 mins, you illustrate a huge amount of information in a very simple way. Thanks a lot!

[@CodingWithJan]

Super welcome :-) Awesome you find that helpful

[@minhduong5654]

I honestly agree bro

[@Abdullahkhan-jc3jx]

True

[@saisrichand7136]

Yes great content!!

[@randoms241]

Gratitude for your exceptional teaching! I wanted to express my appreciation for your invaluable lessons that have come to my rescue not once, but twice. Your clear and concise guidance on using meta-tags in Shopify was a game-changer for me. Now, as you delve into explaining Sections, I find myself saved again. Your teaching style is truly remarkable. The way you simplify each topic into easily digestible steps and then demonstrate various creative applications is a fantastic approach. Unlike many tutorials that leave you with a limited understanding, you go the extra mile to dissect all the components, providing a comprehensive 3-dimensional grasp. Thank you immensely for your dedication and effective teaching methods!

[@CodingWithJan]

Shopify already announced that they will introduce dynamic Sections everywhere in the near future. Super excited about this and I will keep you updated. Hope you´re all fine and stay safe :-)

[@daanvs4783]

Hey Jan, I might have some great ideas you could work out on your youtube channel. This would help your followers (including me) enormously. I think a video about encoding a picker type on a product page of which the url links to a completely different article is very instructive. As happened here: www.coolblue.nl/product/837751/philips-2200-ep2224-19.html. Besides the above described, it also seems very instructive to me to encode a filter, so people don't have to subscribe to it. I don't know if the latter is possible, but it seems extremely instructive to me.

[@lol9222]

What does this mean? :)

[@shehryaryaqoob9463]

hello sir can i talk with you if you don't mind ?

[@maximilianbredow6374]

... 8 months later they postponed it again :-D

[@Joel-ho9sm]

Hey, I’m really having trouble with this can you help me. Reply if your willing I’ll send you my email and we can do a zoom meeting.🙏

[@moeezahmed7168]

This is the probably the best shopify related channel as in this channel, the tutor 1- Actually teaches you something practically. 2- Teaches you in a way that even the most beginners can fully understand and implement. You Jan are awesome. God Bless you .

[@totalecomm930]

Kudos to Jan for the most professional tutorials on Shopify coding you can find on KZbin!

[@muhammadtayyab7674]

this channel is a great blessing for all of begineers

[@alishahzad6887]

Most powerful vid of shopify theme customization i have ever seen.

[@Louis-zl4tp]

Great tutorial, best video I have found so far that explains json / liquid in shopify

[@kydsklothing]

Man, Listen!!!!! I APPRECIATE U!!! you have been my go to learning source to help me through building my website through Shopify. I litterally would have given up had it not been for you. This video just helped me put the last piece of my website puzzle together and we will get lauched sooner than expected because of you. Thank you so much!

[@CodingWithJan]

Hey, Thank you so much for your heart warming words.😀

[@amilissaaraneta215]

Hey Sir! I just wanna say thank you! I've searched for a week just to find a tutorial that fits me because I am from Pure Coding web dev to shopify web development and this is really a big help for my work! I hope you have a great day. I just subscribed to you because your are awesome, continue to provide this kind of video!!!

[@CodingWithJan]

Great to hear! :-)

[@danevanoort7534]

I want to say thank you for saving me twice so far with your incredibly easy to understand lessons. You taught me earlier how to use meta-tags in Shopify. Now you are saving me again by showing me Sections. You are an incredible teacher. The way you break down each topic to the most simple steps, and then show a few creative ways to use it is such a wonderful way of teaching a new topic. Most tutorials only show you how to do one thing so you are left not fully understanding how it all works. You take those extra steps and really break down all the moving parts so people can have a 3-Dimensional understanding. Thank you so much!

[@rachelrose-baxter848]

MAAAAAAAAATE youre the best! i just found out about you, but I love you so much! I lost 10 hours before i found this video!

[@loganmurray6555]

You are a tutorial guru! You know just what we want and explain it step by step very thoroughly. I thumbs-up every one of your videos.

[@CodingWithJan]

Thank you so much Logan😀

[@davidsonfong9549]

man this is absolute GOLD right here. This is so powerful. Thank you for this very helpful, easy to follow tutorial!

[@CodingWithJan]

Thanks Davidson 🙌🏻

[@irkakhodjaev]

First of all, thank you for your tutorials, they're awesome! However, I didn't understand one thing. Basically, you've created the static section with dynamic blocks in it, right? But still, the section itself with Heading and Description are static, and they are going to be the same on two different pages. That means, if I change the heading on the first page, it is going to be changed in another page as well, right? What I am looking for is the way to include the same type of section from the Homepage in any page I want with different content. For example, it works if I simply include {% section ‘index-section-text_plus_image’ %}, but when I want two include two “text plus image” section there, they become the same. If I change one, another changes as well. So, I have to create tons of “text plus image” sections and include them separately in the page template, which makes a lot of mess on the website. Is there a way to create only one copy of the section from Homepage, so I can include it in all other pages, so they don’t be the same?

[@designforgoodclub]

Have you found a solution to this? I've been trying to do the same thing!

[@irkakhodjaev]

@@designforgoodclub unfortunately no, I couldn’t find proper solution for that.

[@aureliemoinier9344]

I have exactly the same question!

[@kitchensystems]

@@aureliemoinier9344 We all have the same question, but Jan didn't respond to it. Probably this case is covered in his paid course.

[@TestAccount-uu9vp]

@@kitchensystems from what I've read you can only have dynamic sections on the homepage, ive been creating shit loads of static sections which is a painful work around

[@skipperay]

Bro, you have the most useful Shopify dev videos on the planet.

[@CodingWithJan]

Made my day :-) Hope to see you back soon.

[@DrDangleyLegs]

Really good coverage of the material without any fluff or unnecessary excitement. It shows you know your stuff, and these videos are a pleasure to watch. Thank you so much on behalf of everyone who is learning from you. I know some of the videos you make take a lot of time, and we all thank you immensely for taking the time to make them more enjoyable, entertaining yet informative.

[@dbadr80]

Great Video ; was looking to understand the scene behind Section/Blocks themes . Now with this tutorial i have a key elements to enrich my store and make it more customized. Thanks a lot for valuable content.

[@CodingWithJan]

You are welcome!

[@jovanazivkovic2225]

I've just discovered your videos and I love them! You are amazing and really really helpful. Please continue making them :)

[@CodingWithJan]

Thank you for your fantastic feedback :-)

[@rajrohit3004]

Awesome Video, Step by Step instruction ...Great video. Thanks Jan :)

[@vinaygupta1722]

Fantastic one, God bless you ! I am beginner in Shopify, but in 14 minutes you teach me sth extraordinary. I have subscribed your channel :)

[@philippkurzweg21]

great - thx. this is really easy explaned. is it possible that u explane how to set up a new dynamic page so I can use a dynamic front end customizer to rebuild other pages by adding sections with the "+"?

[@nacchi13]

I just wanted to say your videos have been incredibly helpful for me. I hope you never delete them and that your channel continues to grow and you'll create more content (esp. if shopify ever changes anything haha).

[@CodingWithJan]

No worries, I got you 😁

[@Amiashik-t2i]

Awesome!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Explained in an easy way

[@emanuelcarmona9930]

Amazing! my job sometimes uses shopify so this is very valuable! thank you so much

[@dennygreenonyt]

Really helpful. Thanks for this one. Learn more in your 14 min. video.

[@crossmedialisten]

Top. Thanks a lot for this quick tutorial. Much appreciate your explanations!

[@Zafri_ShaH]

legend :), you making my dev level high with every single video.🤍🤍

[@2ntuan]

Awesome tutorial, thanks Jan! Hope you can create full series about create a new theme in Shopify!

[@snowtownbunny]

Hands down the most helpful tutorial I've found to get me started! Two thumbs up.

[@willowmoonart]

Thank you SO much...this is exactly what I have been trying to learn and have not been able to understand it, and in 14 minutes you explained it perfectly and I get it now and think I can do what I've been trying to do! THANK YOU!!!

[@CodingWithJan]

Sounds good 😁

[@RomuloQuintanilha2015]

You will never understand how much you helped me, much that I do not believe! Thank you so much for everything. When I'm financially better off, I'll take a course or mentorship with you. Thanks!

[@CodingWithJan]

Hey Romulo, thanks for these kind words! :-)

[@madhusudandubey13]

Your way of teaching is excellent

[@SGDCTVDUBAI]

Awesome presentation, comprehensiveness, smile and cool attitude of showing how to code and loved the last 3 enhancements!

[@lillaraczszabo6720]

Thank you very much, it's a really cool video. I've learnt a lot from you lately. :)

[@fullpreteristnow]

Great teacher. Great top down overview. Taking what could be a complicated subject and making it simple. Thank you. You're the best! I have subscribed.

[@modokgaming236]

Bro just got you on suggestions. Really you are awesome 😎

[@shannster10000]

Damn! I wish I found this video 2 years ago, would have saved me wanting to smash my computer to pieces on many occasions! Thanks for the great tutorial!

[@CodingWithJan]

Haha thanks so much 😄 Just released a video on all the most recent updates a few days ago. Might be interesting too 🙌

[@rafiullah6552]

Hellow Jan this is me. Rafi from Pakistan. I am very Impress from your tuterial tnx u so much. Please make anther tuterial on dynamic section. Use product picker, drop down, and so more

[@juggski]

how do you not have a million likes yet

[@GershonBenYitzhak]

This is really cool. I do have some feedback - I would have liked to seen the end result first. I found myself wondering what you we trying to accomplish and I kind of skipped to the end, then went back, in order to get some context of what you were doing. I'm wondering when I need a new section. So far the built-in sections have sufficed. I will keep my mind open next time and maybe I'll find a good use case for my site. Thanks for the video!

[@Novometix]

super video jan, zur kreierung neuer sections würd ich mir gern noch mehr videos wünschen. insbesondere wie man sections von dem einen theme in ein anderes kopiert und nachher auch alles funktioniert

[@constellation007]

best shopify tutorial guy wow

[@bySterling]

Fantastic highlight vid and much needed here!

[@seppneimusser5723]

Thank you Jan, you helped me a lot^^

[@nilamrakholiya5650]

Perfect video for learn shopify settings ...thank you 😊

[@easywebsolution7044]

Yes I learn many today form you , thanks.

[@JahinShahriar]

you have amazing skill of describing things in a simple way. Do you develop custom theme from psd to shopify? If YES.. then A series will really helpful for us.

[@MattiaRobino93]

You are great, simple, intuitive!

[@jeanmorrison6422]

WOW this step by step how to.. it want me to learn more on coding 🤩

[@JoefreyMahusay]

Thanks for this helpful tutorial. :)

[@kommakarl]

Jan you awesome being, you saved me a lot of time and frustration with this very powerful tutorial. LOVE

[@CodingWithJan]

Thank you Karl, super welcome :-)

[@unposedmtl6171]

Hi Jan, Is there a way to implement dynamic sections in pages or products instead of just the home page?

[@iqbalrazaozbix]

This is amazing thank you I learnt very much

[@cana5312]

Sorry if I miss the information, could I possibly know if there is a way to add the new section to the already existing page and not make the new page in the template section? If so which template do I have to add the Json to? Thank you so much for the wonderful content!!

[@one_dafi]

Great job! I think i've got a new hobby - To learn HTML. Thank you very much!

[@CodingWithJan]

awesome you are welcome 😁

[@one_dafi]

@@CodingWithJan Do you have coding courses only?How can i get in touch with you for more details?

[@iljaaverdieck5433]

Really good content. Straight to the point, thank you!

[@CodingWithJan]

Hey Ilja, thanks for your feedback🎊🎉

[@glacycantos6953]

Hello Jan, I am on marathon of your videos. Thanks for the content. Wishing you good health and more good videos to come.

[@CodingWithJan]

Hey there, awesome you like the content and thank you for your positive feedback :-) Wish you all the best too.

[@byshiri1751]

Discovered yor channel recently, probably the most helpful videos I've found - it really makes me feel like im in actual school/college lesson. Love the way you explain the code with some programming theory with examples & animations. Please continue making more videos, would love if you could do a indepth series/course on each HTML & CSS, JS and Liquid

[@muratkaya2357]

Love your videos jan. It's so...simple👌

[@emmanuelsoetan1620]

Hi Jan. Thank you for all the quality of your videos . I am curious why is the page created in the admin section added to a page template?

[@andrerugebregt90]

That's a very good content. You explained it all in a very simple way. Thank you, Jan! Can you please show us how to add Sections into the Header? I'm having trouble doing it.

[@CodingWithJan]

Hey Andre, Thank you for your feedback Andre 😄 The header is already a section on its own, it would be better to edit it directly, generally called header.liquid in the sections folder. If you want to add a section that shows up on all pages like the header you can add it in the theme.liquid file I hope this was helpful :-)

[@andrerugebregt90]

@@CodingWithJan thank you, Jan! I appreciate it!

[@ajaxtyson]

Superb stuff. Glad I stumbled upon your video. Subscribed your channel 👍

[@pulse5863]

This is really helpful 👌🏼

[@CodingWithJan]

glad to hear :D

[@letsbegin2lv]

Such an incredibly simple and good tutorial. Do you take freelance work?

[@adambalint8217]

Hello Jan, Thank you for the content! Did I miss how the content will be different on the two landing pages?

[@CodingWithJan]

Hi Ádám, thanks for your feedback and sorry for my alte reply. You would need 2 seperate Sections for the two pages in order to make them independent. You could develop the section for you first page and then copy & paste it into a new section file and include that in your second page. Hope that helps :-)

[@zenissart]

@@CodingWithJan why you have to use different section files, when in the homepage you could add many identical section with different content in each?

[@James-wz9eq]

Are you JSON? You definitely explained it very well ! ! !

[@byedwardleung]

amazing video, do you have one about styling?

[@adeisaac]

This is great, I have been playing around with this. Very valuable information. Thank you

[@mohamedatik8065]

thanks bro, you are really honest guy

[@CodingWithJan]

Super welcome, nice to meet you Ahmed 😀

[@mohamedatik8065]

@@CodingWithJan thanks again jan! you are my best online mentor

[@nomangulzaar6746]

Very informative video. Please make a series on how to convert a PSD to a Shopify theme from scratch.

[@AppScavenger]

Thanks for the valuable info. Question. Is there a way to modify a Variant's price by code (liquid/javascript) based on what buyers select? I don't want to have predefined variants for each combination each one with its own price. Think of a simple case: a t-shirt with 3 sizes, and different price for each size. I could have three variants each with the correct price. I don't want to create one variant for each option buyer could choose. I'd like to have a t-shirt product with a base price--e.g. for S size, and change the price if the buyer chooses M, or L sizes. And pass all this info to the cart. Size would be passed to the cart as a property. I'd appreciate your help.

[@daymaker_trading]

Thanks for this tutorial!

[@gibbooptom]

Great video, code in html, css and javascript and this let me start using blocks for shopify, thanks 👍

[@andersonenvy]

Thank you! You are a great teacher

[@markthered2007]

Hi Jan, 2 questions for you: How does one add line_items in Shopify 2.0 and how does one create templates in 2.0?

[@CodingWithJan]

Hey Mark, In Shopify 2.0 you can add sections everywhere, and also create a new template just by using the customizer. Concerning creating sections it's exactly the same thing in Shopify 2.0 Good luck 👍🏻

[@markthered2007]

@@CodingWithJan Hi Jan, thanks a lot I think the penny has dropped now!

[@koraad21st]

Thank you. You are the best🙏🏼❤️

[@CodingWithJan]

nice to hear you are welcome 😁

[@kapildhameja7335]

Hi, Thanks for very interesting video. I am interested in better formatting by adjusting the size of image and text in the sections. Do you have a video tutorial that explains that?

[@mixtips8266]

Do you have any video about a custom filter for the Debut theme on the products page?

[@faiezahmedkhan]

Awsome Video. Love from India

[@CodingWithJan]

You'll also love the updated version :-)

[@demenyzo]

Thanks, it was really good! Is it possible to add unique menu section to each collection pages in the filter section? (but not like a filter because I want to keep the collection URL)

[@letsgok.k.1148]

Thank you so much for the useful video, I got a question. I'm try to use blocks for collection page hero section but can't create dynamic block so that I can have separate image for each collection instead of one image for all. Can you please me how to setup?

[@cyberspider78910]

Amazing and Golden Nuggets...!

[@phillriley9688]

Hi Jan! Thanks for the lesson. I'm wondering,is there a way to add presets to the footer section of a theme as well?. I find the default footers to be quite basic and boring and the navigation settings don't help as they are really very limited for this section of the page. Again Thanks a lot!

[@DhrumitTecheshta]

super video

[@docasar00]

Hi Jan, fantastic video, thank you so much. I have a question, is it possible to add all the sections that are available for the homepage to a custom page? At the moment the theme only shows header and footer section for pages, while for homepage and blog, for example, there are special sections. Thanks a lot again!

[@selectadrizzle5123]

I have a technical question. Is there anyway to have images preloaded and the user select images? I don't want them to upload images from the image picker. Or do I really need to do some advanced JS and React customization?

[@abubakarbakhtiar874]

Thank You Jan for making such nice videos. I love ur smile and pray for this as well, That mighty God may keep smile on ur face. I did not understand the part from where you made the section dynamic or is it just by adding *preset* makes the section dynamic. And where can I get the information about the "type: image" etc. Kindly explain a little more. Best Regards _Muhammad Abubakar_

[@priyapatel8711]

Amazing video.........thanks a lot...

[@feernaandoo67]

Felicidades por la explicación, es genial. Muchas gracias.

[@CodingWithJan]

you are welcome :)

[@nikeshponnen]

Awesome ... thanks for the tutorial

[@CodingWithJan]

Hey Nikesh, happy to help😁

[@johanvanwambeke723]

Top quality. Good job

[@shopify1againf]

how come the shopify section settings are on the right side sometimes for some of the shopify themes?

[@mrevergreen9049]

Thanks mr Jan best of shopify as always^^

[@CodingWithJan]

😁 🚀

[@paulsalazar1345]

Hi Jan! Is there any way to have the same sections as the home page but into "pages" per se? I want to build other pages with theme sections but I cant find the way to do it

[@user-br4tb7en1l]

Great video. Very clear instructions which makes it easy to follow. Thanks a lot! 1 question. Is there a way to change the colour for a specific static section?

[@CodingWithJan]

You implement a color picker and combine the selected value with a CSS rule for the background color. Hope that helps :-)

[@randoms241]

Thanks a lot...This is awesome...

[@Usman_AsgharBT]

Great Sir! Good learning from you :)

[@CodingWithJan]

Super welcome, hope you do well :-)

[@AtifAli-re3io]

Brilliant Can you please make a tutorial on header as well with a mega menu.