Shopify how to use Sections Everywhere and JSON Templates

No video

Shopify how to use Sections Everywhere and JSON Templates

Рет қаралды 64,024

2 жыл бұрын

Shopify Theme Sections on Any Page. Not just the homepage.
Learn how to use the new JSON Templates that came with online store 2.0.
► Free Help
--------------------------------------------------------------------------
🎯 Get Personal Career Advice for Shopify Developers:
codingwithjan....
👨‍💻 Find a qualified Shopify Developer for your next project:
codingwithjan....
► Contact
--------------------------------------------------------------------------
🌐 Website
codingwithjan.com
🤝 LinkedIn
/ jan-frey
► SEO Description
--------------------------------------------------------------------------
With the release of Online Store 2.0, Shopify now supports sections everywhere.
Now we can add, remove and rearrange sections through Shopify theme editor on all pages and not the only home page. This major update was announced earlier this year at Shopify Unite 2021.
As Shopify Theme Developers we have to be familiar with the new theme architecture and how the new JSON Templates compare to the older Section Liquid Files.
codingwithjan.com
Shopify's New Store Design Experience gives merchants and developers much more flexibility and is an overall great improvement for themes.

Пікірлер: 199

@CodingWithJan 4 ай бұрын

🎯 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

@hazemsaber4245 2 жыл бұрын

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.

@JasonDean-pv4zw 6 ай бұрын

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.

@smartch3364 2 жыл бұрын

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

@user-vh1nr6it8g 5 ай бұрын

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 5 ай бұрын

Awesome! Thank you so much! :-) You might like the new video on sections aswell! kzfaq.info/get/bejne/b9d4ftR_rdXHkWg.html&lc=UgxvvCs6Qz7bNED7x7V4AaABAg

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

@Incomestreamsurfers 2 жыл бұрын

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?

@human_error1 2 жыл бұрын

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.

@mohiuddinhasan8154 2 жыл бұрын

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 2 жыл бұрын

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

@thomas3636 2 жыл бұрын

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

@chidiusanga3084 2 жыл бұрын

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

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

@MaximalistAmanda Жыл бұрын

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

@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

@clementeen 2 жыл бұрын

Jan you’re the best on youtube 🙌🏼

@CodingWithJan 2 жыл бұрын

I'll take it 😄🙌

@taylorb2783 Жыл бұрын

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

@mickeyclaas8648 2 жыл бұрын

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

@lins_z2 2 жыл бұрын

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 2 жыл бұрын

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

@lins_z2 2 жыл бұрын

@@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 2 жыл бұрын

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

@babylullaby_official 2 жыл бұрын

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

@umerrasheed1318 2 жыл бұрын

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 2 жыл бұрын

Hey great idea :-) Let's see

@user-sv8ux6cp8g Жыл бұрын

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

@lukedorny 2 жыл бұрын

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 2 жыл бұрын

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

@damienbutterworth6374 2 жыл бұрын

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

@colleencole3204 Жыл бұрын

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

@MichaelThomasDev 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

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

@gouravkumar772 2 жыл бұрын

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.

@anastasiagazegrowth 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

Thank you Anastasia! 🙌🏻

@alithearsenalfan Жыл бұрын

THANK YOU so much for this!!

@mahindaperera5995 2 жыл бұрын

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

@westernbid_ua 2 жыл бұрын

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

@hey_benjamin 2 жыл бұрын

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

@vados2491 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

Thank you! 😃

@DEBUGENTITY 8 ай бұрын

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

@DevTechHouse 2 жыл бұрын

Useful content Thank you, Jan

@Stephen-td7xh 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

@@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 2 жыл бұрын

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

@soozey8206 Жыл бұрын

Excellent thanks Jan.

@camiloorjuela5074 2 жыл бұрын

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

@DanaLeeGibson 2 жыл бұрын

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

@zubairblaze 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

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

@tejassarvaiya8018 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

Awesome 🙌😃

@samiullah0011 2 жыл бұрын

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.

@SisterNr1 2 жыл бұрын

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

@buyonjederrick6746 2 жыл бұрын

Useful content I have been waiting for. Thank you Jan

@CodingWithJan 2 жыл бұрын

Awesome 😃🙌

@charlene6306 2 жыл бұрын

Excellent stuff! Clear and concise 10/10

@CodingWithJan 2 жыл бұрын

Hey Charlene, thanks for your kind words! 😁

@fullstackmarketing247 2 жыл бұрын

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

@ArbeeDesignsNZ 2 жыл бұрын

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!

@nilamrakholiya5650 2 жыл бұрын

Most and most useful video..Thanks a lot

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

@TheLuc234 2 жыл бұрын

Thank you, great video

@umslopogaas 2 жыл бұрын

Thanks man, was waiting for this one!

@CodingWithJan 2 жыл бұрын

Nice 😄

@M4thijsss 10 ай бұрын

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?

@AllinflexGeraldine 2 жыл бұрын

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?

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

@joshuaaraujo1176 2 жыл бұрын

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

@umslopogaas 2 жыл бұрын

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)

@jemjem8902 Жыл бұрын

You're a life saver man!! Thanks!

@Tom-ow6gw 2 жыл бұрын

Great job, exactly what I was looking for!

@muhammadsajid628 2 жыл бұрын

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

@j.b.9474 2 жыл бұрын

Thanks for the video! Can wait for more!

@hirenprajapati1 Жыл бұрын

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

@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

@user-qf6ep6ih2q Жыл бұрын

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

@ahsanulhaque805 2 жыл бұрын

Thank for the video.

@aliraza6628 2 жыл бұрын

Thank you that was very useful information.

@NQuiz52 2 жыл бұрын

Can somebody please help me figure this out in JSON... 1. When I try to create a duplicate of the default product, the sidebar is gone. 2. When I follow the instruction in this video the sidebar is beneath the product instead of on the left like it should be 3. When I duplicate the sidebar template, the product section is completely gone. How can I make the sidebar and product page element placement the same as the default product page?

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

@gauravagarwal6584 2 жыл бұрын

Killed it Jan, again 😃.

@katecampione8309 2 жыл бұрын

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?

@OutBoxAds 2 жыл бұрын

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 2 жыл бұрын

Alright uploaded in a few days :-)

@yashang_1ne161 2 жыл бұрын

I love you Jan!!!

@andrewshannon1169 6 ай бұрын

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?

@guilhermealbino8737 2 жыл бұрын

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

@pangiras 2 жыл бұрын

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 2 жыл бұрын

Did you find any insights?

@abdelkarimnasri3294 2 жыл бұрын

Thank you bro!

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

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

@bobanumaracine 2 жыл бұрын

Cool stuff again!

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

@rubyandtherainbow5228 2 жыл бұрын

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.

@leereedembroidery Жыл бұрын

Thank you!

@dionlim1765 2 ай бұрын

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

@vitalii6709 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

Awesome, thanks so much 😁🙌

@takaakiyamada7294 2 жыл бұрын

Thank you for the wonderful video! :-) I'm using Subtitles/CC function of KZfaq because I'd like to read English subtitles. However, KZfaq 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 2 жыл бұрын

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?

@sithell503 Жыл бұрын

Awesome. You rock!

@VirusGamingz 7 ай бұрын

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

@joey8808 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

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

@joey8808 2 жыл бұрын

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

@davidherrera2957 2 жыл бұрын

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 !

@abubakarbakhtiar874 2 жыл бұрын

Hello Jan, Love from Pakistan. I was working on a theme from scratch on localhost and found this video, in between. Now when I change from .liquid to .json format my *page.test.json* does not work, And even I do not get any error. How Can I solve this problem. And one more thing I want to know that, does shopify provide support for building themes from scratch, like I am trying to do on vs code. _THERE ARE LOT OF SOURCES BUT AS SHOPIFY UPGRADED, I THINK non-shopify SOURCES WILL TAKE TIME TO MEET THE NEW REQUIERMENTS._ Kindly Help.

@mikecmw8492 2 жыл бұрын

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 2 жыл бұрын

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

@ajaxtyson 2 жыл бұрын

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

@ashasikander9334 2 жыл бұрын

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

@harunshk 2 жыл бұрын

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

@philip9677 2 жыл бұрын

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

@sirlawrencet Жыл бұрын

Thanks!

@jacqueloucolitoy4714 2 жыл бұрын

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 2 жыл бұрын

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

@AliAhmed-ed4yy 2 жыл бұрын

You Great bro

@ronnydalia 2 жыл бұрын

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 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

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

@fabiomangolini 2 жыл бұрын

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 2 жыл бұрын

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: kzfaq.info/get/bejne/oOCYprx-3bvUaKc.html Have an awesome day 🙌🏻

@fabiomangolini 2 жыл бұрын

@@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 2 жыл бұрын

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