Shopify how to use Sections Everywhere and JSON Templates

[@CodingWithJan]

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

[@JasonDean-pv4zw]

i enjoy watching your tutorials i'm a beginner to code but you make me want to change my profession. i just started a shopify store sept. 2023 and i've been teaching myself and learning from individuals like you making these videos. so i thank you for the inspiration.

[@hazemsaber4245]

You are amazing, you can't imagine how we enjoy watching you. Very informative and to the point without complications. Hope all the best for you. Please do not stop doing these great videos.

[@smartch3364]

Yoo! I owe you more respect than any of my teachers for the way you explain everything. I'm grateful that you're here on KZbin.

[@ajmalDeveloper]

Today i am a successful( top-rated and about to get Top-Rated Plus) . 25% of my success depends only on this video. I learnt almost liquid from this single video. If it is possible, I would love to have a video call with you man. Huge respect for you!

[@chidiusanga3084]

The best explanation of this topic that I've seen so far.

[@mohiuddinhasan8154]

I followed you channel in the past and got help from you. And I got help from you again. This channel and this course is the genuine development course. How come this course isn't picked up the by the algorithm? I had to watch like 20 video before this one for the solution I was looking for. All clickbaits. But finally, Jan the man got it for me. excellent work, man!

[@CodingWithJan]

Thanks, I am glad this video was useful to you :-)

[@yohanpimouguet4982]

You saved my life man! For a week i was trying to understand why i can't add sections from the customizer and why when i change values in a section that appear twice inmy page it changes the values for both ! This knowlegde between the old and new version is essential to understand things ! Once again, thanks a lot man ♡

[@thomas3636]

This is what I couldn't remember how to do from Freemote! Thanks for having this video on YT! Many thanks!

[@MaximalistAmanda]

This tutorial just saved me SO much struggle. THANK YOU!!!

[@mickeyclaas8648]

Danke schön, sehr hilfreich. Und an einem einfachen Beispiel nebenbei die Unterschiede json/liquid verdeutlicht. Weiter so !

[@MaiPhươngTrần-l6y]

hey just have to drop a huge compliment to your videos. so joyful to watch. Super easy to follow. I don't have any background of tech at all but get it really quick. Love the way u approach problem and guide us thru to a much clearer, insightful understanding. Huge thanks to your great work.

[@CodingWithJan]

Awesome! Thank you so much! :-) You might like the new video on sections aswell! kzbin.info/www/bejne/b6KrfKSEfdSWl5Y&lc=UgxvvCs6Qz7bNED7x7V4AaABAg

[@taylorb2783]

A+ awesomeness - Feel like i'm learning JSON and Shopify at the same time and it's so easy lol

[@human_error1]

Really helpful. This was really informative and well explained. Thanks! I did have an issue with not being able to see the new page template. I was working on a separate development theme and I realised I needed to make the same page and same section on the live theme so that I could then save the files and then choose that template for the page and see my content on my development theme.

[@CustomerService-u9n]

You're amazing!!!! Thank you so much for sharing this video! I was able to take this and use it to create a new page template using the new json format. Thank you again! :)

[@Incomestreamsurfers]

So... if we wanted to make a front-end non-coder friendly version of Dawn theme, we can take the base Dawn theme and add customization options to settings_data.json?

[@babylullaby_official]

You're the best Jan, You're very helpful.keeping doing it.

[@muhammadsajid628]

Well Explained Jan........i am also a shopify developer

[@colleencole3204]

Thanks Jan! This was so easy to follow and understand.

[@jamesrosing]

Thanks!

[@CodingWithJan]

Much appreciated! :-)

[@clementeen]

Jan you’re the best on youtube 🙌🏼

[@CodingWithJan]

I'll take it 😄🙌

[@mahindaperera5995]

Thanks Jan. you are a life saver. and you are the best.

[@SisterNr1]

hi, do you have a video showing how to add a custom field for like offer product engraving in a json product file ?

[@anastasiagazegrowth]

Love your vids, your smile is contagious && you're a prime example of making learning pleasant!

[@CodingWithJan]

Thank you Anastasia! 🙌🏻

[@it2923]

🤩🤩🤩🤩🤩very Usefull Information About old and new template and also about how we can reuse section multiple time this is realy awsome, thnxx a lot from me

[@senorclouds]

Ah! I totally get it now. Thanks very clear walkthrough the best!

[@zeeshanayub7873]

Hello, I would greatly appreciate your assistance in making the collection title centered on the screen, and placing the mobile logo on the left side in the dawn theme. Thank you!

[@CodingWithJan]

Hi Zeeshan, Thanks for your comment. Centering the collection title and adjusting the mobile logo's placement in the Dawn theme can be done with some customization to the theme's code. However, it can be a bit complex if you're not familiar with Shopify's Liquid templating language. If you need assistance with this, connecting with a developer expert would be a wise move. We can definitely help you find one if needed. (link in the description) Best, Joy (Team)

[@MichaelThomasDev]

Hey bro... world class. I really enjoy your teaching style. Thanks man

[@CodingWithJan]

Hey Micheal, I am glad that you are enjoying the content 🎉🙌🏻

[@lins_z2]

Thank you for the video! Been trying to reproduce a section based on an old template and didn't know why it didn't work on Dawn theme! Really clear and helpful

[@tkoghdn]

What did you figure out? I'm working on a similar problem.

[@lins_z2]

@@tkoghdn that in themes such as Borderless, you can’t copy other themes because it is translated to tons of languages and that things in Dawn (only 2.0 theme at the time) has JSON in then templates and liquid in the sections, compared to the older versions. Some css is also nested inside of scss files in older versions.

[@tkoghdn]

@@lins_z2 Yeah I noticed the change to JSON in the templates. I was trying to take the debut theme/sections and convert them to 2.0 style so that I can import them into the dawn theme. It...kind of worked...but not to the degree that I need it to. I decided to go ahead and just work on building the feature I want. It has been a great learning experience for liquid.

[@jemjem8902]

You're a life saver man!! Thanks!

[@umerrasheed1318]

Hi Jan, Excellent video!!! I always watch your tutorials whenever I need help in Shopify. It would be great if you can make a video about how to add a slideshow section in the dawn theme since there is no slideshow section in it. Thank you in advance.

[@CodingWithJan]

Hey great idea :-) Let's see

[@fullstackmarketing247]

Wow! Good stuff! Thanks for your time! Subscribed!

[@alithearsenalfan]

THANK YOU so much for this!!

[@gauravagarwal6584]

Killed it Jan, again 😃.

[@gouravkumar772]

Hey Jan! It's really useful for me, can you make a video on auto scrolling/slider section as recommended products , to show on below the product page.

[@umslopogaas]

Thanks man, was waiting for this one!

[@CodingWithJan]

Nice 😄

[@joshuaaraujo1176]

can u make a video on how to add customizable options to products with the dawn template plz

[@aliraza6628]

Thank you that was very useful information.

[@j.b.9474]

Thanks for the video! Can wait for more!

[@nilamrakholiya5650]

Most and most useful video..Thanks a lot

[@LukeDorny]

This was excellent, Jan. Clearly, though, next steps to this would be to extract out the product rating and tax texts as meta-fields in each product, making this information dynamic per product instead of being static/hard coded. Of course, a truly dynamic rating system is a whole other topic. But for demo purposes this was very informative. Thanks!

[@CodingWithJan]

Nice 😃 I think we can do metafields as a standalone video. But implementing this would be a great exercise!

[@damienbutterworth6374]

@@CodingWithJan I agree, I think Luke raises a great point.

[@M4thijsss]

Thank you. I was wondering, lets say you use this template for multiple products. Where does it save it's unique settings for each product specifically?

[@vados2491]

Tnx Jan, always help, thanks to you I know a lot of new things u are the best)

[@CodingWithJan]

Thank you! 😃

[@soozey8206]

Excellent thanks Jan.

[@hihi-c4c7g]

quick question: what is the "|" for? between img_url

[@buyonjederrick6746]

Useful content I have been waiting for. Thank you Jan

[@CodingWithJan]

Awesome 😃🙌

[@joey8808]

Thank you for the videos. Possible to teach how to create Custom Product Options in this new 2.0?

[@CodingWithJan]

Hey Joey, great idea :-) I'll prep a video, but it might take a week or two. Thank you for the input!

[@joey8808]

@@CodingWithJan Thank you for the reply! take your time😄

[@zubairblaze]

Thanks for the video. Gr8 tutorial as always. Some day I shall come to you to thank you personally.

[@CodingWithJan]

Hey Zubair, I am glad you are enjoying the content😄

[@charlene6306]

Excellent stuff! Clear and concise 10/10

[@CodingWithJan]

Hey Charlene, thanks for your kind words! 😁

[@DanaLeeGibson]

Thank you, this was Very helpful! I find your videos very easy to follow.

[@Stephen-td7xh]

Hi Jan, I have a dumb question here. Say if I added an Image with Text section in home page and edited the CSS code to customize it, later I want to use Image with Text section in other pages however the style is the same as the one in home page. How can I customize the section so they can have different look in different pages?

[@philsole]

There are different ways to go about that. Most simply, you could rely on CSS selector specificity to target the section on other pages. For example use a class on the body tag like "page-about" then add your overriding styles within that more specific selector. Alternatively, and I think this is a more "dry" coding technique, you could include another setting in your section, e.g. an "alternate layout" checkbox, and then conditionally add a class to the liquid in your section.

[@Stephen-td7xh]

@@philsole Thank you Philip, can you elaborate on the "dry" coding approach a bit more please? I created new sections by copy/pasting from the original sections and give them names, thus I am able use the "same" section in different pages with different styles.

[@philsole]

​@@Stephen-td7xh I thought I had replied to this but must not have saved the comment or it was deleted or something. Do you just want different "styles" or do you want different "content" in those other sections? If it's just styles, just use CSS selector specificity. If it's new content needed, the new JSON templates allow you to include the same section in multiple places. So you really need multiple JSON templates to store different section data sets. In the Theme Editor, there is a dropdown to select which template to edit. You can also create a template here based on an existing template. This will create another JSON file that stores a different set of section data. I'm just getting familiar with this new 2.0 stuff today myself but hopefully that helps a bit even if I've explained it a bit whack!

[@ronnydalia]

Hey/Hallo Jan (Akzet richtig geraten?) :D Thank you for your great tutorials!!! Very straight forward and helpful, earned the sub !!! I got 1 Problem and 1 Question: Problem: I can't include the new created (product) Template to my Product like you did in 06:56, beause it won't be listed there. Only "Default" and "Alternate", which are there by Default. I did it the same way with the same names and Syntax as you did?!? Question: I would like to create a dynamic section on my webshop where the customer can select the Product and a Color. How do i do it best?? Kind Regarts :D

[@ronnydalia]

I forgot to mention that the Section doesn't get include or won't show like @ 08:45 .....

[@CodingWithJan]

Hey Robin, Make sure the product template is created on the live theme as well to show up on the product options And for the section to show up you just need to double check that it's added on the Json file with the right name To answer your question, I think the featured product section would work fine for you. It's present on most of the themes I hope this helps :-)

[@bl4ckw1z4rd3]

Hi! Great Video, and easy to understand!🙏❤️🙌

[@westernbid_ua]

😍 You are the best, Jan! Thank you so much for such insightful videos. They help a lot.

[@Tom-ow6gw]

Great job, exactly what I was looking for!

[@ArbeeDesignsNZ]

Excellent! Shop 2.0 is great, but there is one thing I don't like about it and that's the product gallery. I did find someone had written some code for a slider gallery (similar to how it used to be) but am unsure how/where to add it in the code. I'd love to see how you'd create a suitable gallery as your instructions are so easy to follow - thanks!

[@ajaxtyson]

Thanks for a great video. Is there a way we can add sections in product description?

[@TheLuc234]

Thank you, great video

[@tejassarvaiya8018]

Excellent jan that's really help me to understand 2.0 version . Great job ❤️❤️

[@CodingWithJan]

Awesome 🙌😃

[@mirayb.7071]

Hi Jan, thanks for the instructions, it worked amazing! Just one thing that I'd like to add, I used these codes with "image-with-text" for 3 times on the same page, and then I added the content to the text area. Once I did it, all text areas became to have same content. How can I solved this problem? Thanks again!

[@mqamarhanif]

Hi Jan, You are doing great. I want to display variant meta fields on product page. I have already created variant meta fields but unable to display on product page. So how to display variant meta fields on product page?

[@hirenprajapati1]

tag in dawn theme . its not even shadow dom element . what is use of that

[@davidherrera2957]

This is my case, there is a live website with a template, I bought another template and I want to edit the custom page, can I do this if the template (in this case the new one) is not live or published? or does it have to be live to make these modifications? Great video and very useful !

[@takaakiyamada7294]

Thank you for the wonderful video! :-) I'm using Subtitles/CC function of KZbin because I'd like to read English subtitles. However, KZbin seems to think this video is spoken in Germany, so it automatically try to translate what you are speaking into English. Could you check the configuration of this video? I'm wondering the language is set to Germany.

[@larisanozhovnik1664]

Hi, Jan. You did coding using the Dawn Theme. Can you tell me whether the Dawn them needs creating Schema Markup file, Or adding Schema Markup to the Header, Product page and Collections?

[@jacqueloucolitoy4714]

omg this is so helpful! can i also use this on debut theme? I have a client right now and I use this theme on his account

[@CodingWithJan]

Hey Jacquelou, Debut isn't a a Shopify 2.0 theme. So unfortunatly you can't 😄 Have a nice day :-)

[@b24trader]

Brother can you please tell us how to add load more button using json template because my all files are json not a liquid files. So, please

[@OutBoxAds]

Please make a Detailed video on "Metafield" feature available in shopify settings, how we can use it to showing different values on different products/pages.

[@CodingWithJan]

Alright uploaded in a few days :-)

[@skynethell]

I'm a little confused. So I'm using the Venture theme and I only have .liquid. Do I need to convert the entire theme code to Json in order to utilize the "second" feature in order to avoid the global values?

[@CairnMyLife]

Did u fund an answer to this? (I'm using Venture too and "second" is not working...)

[@skynethell]

@@CairnMyLife I ended up paying a guy on fiverr to do the legwork. There’s more to it than I initially thought so unfortunately I don’t have the answer

[@connier570]

Oh, I see. Thnx. Mind replying with his/her link? Thnx.

[@philip9677]

Is json going to replace liquid in shopify themes? just wondering why they switched to json

[@umslopogaas]

Hey Jan, since we can't use liquid code directly inside JSON template, then how can we use alternate layout for my custom page template? (custom JSON page template obviously)

[@vitalii6709]

Thank you man. Video is helpful and time saving :)

[@CodingWithJan]

Awesome, thanks so much 😁🙌

[@pangiras]

Hi Jan, I really like your teaching style, you explain everything clearly because you yourself understand it thoroughly and then try to explain it to us, same can't be said about other tutors who try to explain things without having clear understanding of concepts. Jan if you can share how did you master shopify, are you self taught and read through the official documentations, or you came across some resource that might like to share, I have been working with shopify for about a year know, and I know little bit of this and little bit of that, but nothing thoroughly, as I learn while working for clients and what they need and then reading through internet and shopify developer forum. Will I master shopify with time or is there a another way to be the master of the art like you. Kindly share your insight. Thank you so much for the awesome tutorial and sharing your knowledge.

[@talhaamjad5740]

Did you find any insights?

[@yashang_1ne161]

I love you Jan!!!

[@ahsanulhaque805]

Thank for the video.

[@bobanumaracine]

Cool stuff again!

[@abdelkarimnasri3294]

Thank you bro!

[@JayFFresh]

great vids! new subscriber

[@CodingWithJan]

Thanks so much for the great feedback, Jay ! :-)

[@samiullah0011]

HI I work on theme kit for customizing themes. I have issue for schema code indentation. I looks so ugly when I press CTRL + S to save. The whole schema format changes and some time it gives error. Can you tell me any extension or method to make it beautiful and indent.

[@Jordis71]

Hey Jan, is it possible to ad a section only in one page and don’t go in all pages by default

[@CodingWithJan]

Yes it's possible! 😄

[@AllinflexGeraldine]

How can you stop google showing the price in the search? In this case a wholesale website which doesn't have any prices. They hidden in the sections but show up on google search as 'free'. Could we delete some code to end up with a display store with no prices?

[@maheshwarib734]

Awesome ❤️ as always 😊

[@CodingWithJan]

Nice, super welcome :-) 🙌

[@roymehedi7453]

Thanks, this was helpful

[@CodingWithJan]

Great to hear! :-)

[@ashasikander9334]

bro how can we add css classes to design the content which we add

[@mikecmw8492]

Hi, good stuff. But I have a store already and noticed I just edited Dawn, but when I go to products, the templates do not exist in the dropdown for the product. Do I need to "publish" Dawn when we are building it. So my existing store would be offline?

[@CodingWithJan]

Hey Mike, The template needs to be added to the live theme for it to show on the dropdown! Hope this helps! :-)

[@robertischud]

Awesome! Would the new approach work on other themes such as debut?

[@CodingWithJan]

Yes :-)!

[@robertischud]

@@CodingWithJan On that note. I still wonder to this day how we could add custom sections in the homepage/index. In this tutorial, I get it. We create another template in product/collection/etc. But what about homepage. All it does is create index.alternate(or whatever you can call it), this obviously has drawbacks since we need to redirect. I'd want to add a custom section in my homepage as well. I see custom liquid as block but, I'm all for visual presentation. If that make sense

[@CodingWithJan]

It's actually very similar, you just have to create a section file, and then add the "presets" tag to your schema. You can easily find an example on Google. Then it automatically appears on your homepage / in the customizer.

[@robertischud]

@@CodingWithJan Indeed. I was already there; however, it's like static sections. Not something I can do with the built-in ones. Like re-arranging sections, or adding via the button. I guess my question is directed towards being more admin-friendly for my clients. I can add custom sections, then rearrange them etc but via code. I hope that makes sense :) Btw, keep this up. I feel like this is your year! Your channel will explode!

[@rubyandtherainbow5228]

thanks so much for this - really helpful. I am trying to add a display of the customers cart to the bottom of a landing page. Is this possible? So far the code I have is... }, "cart-template": { "type": "cart-template" } I also included the "cart-template" in the order section. However shopify error appears saying: Error: Section id 'cart-template' must exist in sections I'm not sure what I have done wrong as this section named exactly as I have in the code is there. Any help you could give me would be greatly appreciated.

[@camiloorjuela5074]

I follow the steps, but when it comes to apply de Template to the Product...it´s not showing the template i created in the dropdown list. I have the Palo Alto theme in case anyone can help me

[@andrewshannon1169]

If I use one section in multiple places and each of those sections can have independant content now, is there any need for Snippets anymore?

[@katecampione8309]

Using new Atlantic theme: When I create a new collection template JSON file and click 'add section' in the theme editor I only get the option of my instafeed app don't get all of the sectons from the index file. Why would that be?

[@DEBUGENTITY]

i have made a shopify custom section, so its working fine but when i tried to use same custom section multiple times in one template, then only one works & when i change the color or font size of one section is reflects to others to. so anyone facing this issue?...

[@Itsmohsingill]

awesome bro you are the best :)

[@CodingWithJan]

Thank you 😄🙌

[@hitarthshah6466]

Do you know how manny dynamic source we can add in one template ? When i add more than 50 it give me this error "Maximum number of dynamic sources added to template".

[@VirusGamingz]

This JSON files is not working with market place pages. What is the reason?

[@fabiomangolini]

Hi did you have a method to translate sections and blocks content in the Customize? I thought of duplicating same section for different languages but then sections and blocks limits for a template is a problem.

[@CodingWithJan]

Hey Fabio, 😀 You can just remove the line of the limit in the schema tags, it will be like this: 'limit':5 If you want to know more about sections and blocks, you can check out my video about the topic: kzbin.info/www/bejne/oKvLpIyDrbqjbtU Have an awesome day 🙌🏻

[@fabiomangolini]

@@CodingWithJan Hi as long as i’ve seen there are limits of 20 sections in a template and 16 blocks in a section, and this is a problem in my case.

[@CodingWithJan]

Sadly we can't go past this limit imposed by Shopify, but it's rare that you need to go past it. Concerning the 16 blocks limit, you can just duplicate the section below it If you want a workaround it might be a good idea to work with a developer. We can help you to find one: codingwithjan.com/developers. Hope that helps :-)

[@maurocifuentes4068]

Is this the only difference between the old "Sections" and "Sections 2.0"? The old "Sections Anywhere" app allowed you to load different content onto different pages, unlike these new sections where all pages that share a template will have the same content. It's a slight improvement, but it doesn't work (at least for me). I can't build a content editor with the sections because I would have to create a template for every page/post the user adds, which is completely unfeasible...

[@harunshk]

Hello sir, need help Hello team, How can I OTP VERIFICATION in cart page .for COD ORDER CONFIRMATION

[@hannanmujtaba7901]

9:16 the exactly i want to use the whole sections from theme

[@guilhermealbino8737]

Hello, would you be able to make a video about blocks? I noticed that main-product.liquid now does a "{%- for block in section.blocks -%}. And inside that does a {%- case block.type -%} rendering the blocks by type. But when I try to render the @apps block, it brings me all installed apps and not a specific one. Thanks

[@dionlim1765]

why does my theme not have those "add a new template" buttons in the editor?