Shopify how to use Sections Everywhere and JSON Templates
ฝัง
- เผยแพร่เมื่อ 18 ต.ค. 2024
- 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.
► Offers & Help
--------------------------------------------------------------------------
🌟Learn the JavaScript side of Shopify Development:
codingwithjan....
👨🎓Learn Shopify Development from Scratch:
www.codingwith...
👨💻Find a reliable Developer for your project:
www.codingwith...
► 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.
![[DRIP] ‘BILLIONAIRE’ PREVIEW](http://i.ytimg.com/vi/m0eXQD0gIeE/mqdefault.jpg)
🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript
👨💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer
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.
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.
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?
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!
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 TH-cam.
The best explanation of this topic that I've seen so far.
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 ♡
This tutorial just saved me SO much struggle. THANK YOU!!!
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.
Awesome! Thank you so much! :-)
You might like the new video on sections aswell!
th-cam.com/video/9qHKqNHoca4/w-d-xo.html&lc=UgxvvCs6Qz7bNED7x7V4AaABAg
This is what I couldn't remember how to do from Freemote! Thanks for having this video on YT! Many thanks!
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.
Hey bro... world class. I really enjoy your teaching style. Thanks man
Hey Micheal, I am glad that you are enjoying the content 🎉🙌🏻
Danke schön, sehr hilfreich. Und an einem einfachen Beispiel nebenbei die Unterschiede json/liquid verdeutlicht. Weiter so !
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! :)
You're the best Jan, You're very helpful.keeping doing it.
Jan you’re the best on youtube 🙌🏼
I'll take it 😄🙌
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!
Thanks, I am glad this video was useful to you :-)
A+ awesomeness - Feel like i'm learning JSON and Shopify at the same time and it's so easy lol
Thanks Jan! This was so easy to follow and understand.
🤩🤩🤩🤩🤩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
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
What did you figure out? I'm working on a similar problem.
@@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.
@@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.
😍 You are the best, Jan! Thank you so much for such insightful videos. They help a lot.
You're a life saver man!! Thanks!
Thanks Jan. you are a life saver. and you are the best.
Love your vids, your smile is contagious && you're a prime example of making learning pleasant!
Thank you Anastasia! 🙌🏻
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.
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?
Thanks man, was waiting for this one!
Nice 😄
Ah! I totally get it now. Thanks very clear walkthrough the best!
THANK YOU so much for this!!
Wow! Good stuff! Thanks for your time! Subscribed!
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.
Hey great idea :-)
Let's see
can u make a video on how to add customizable options to products with the dawn template plz
hi, do you have a video showing how to add a custom field for like offer product engraving in a json product file ?
Thank you, this was Very helpful!
I find your videos very easy to follow.
Well Explained Jan........i am also a shopify developer
Thank you that was very useful information.
Thanks for the video! Can wait for more!
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!
Killed it Jan, again 😃.
Useful content I have been waiting for. Thank you Jan
Awesome 😃🙌
Excellent jan that's really help me to understand 2.0 version . Great job ❤️❤️
Awesome 🙌😃
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!
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!
Nice 😃
I think we can do metafields as a standalone video. But implementing this would be a great exercise!
@@CodingWithJan I agree, I think Luke raises a great point.
Excellent stuff!
Clear and concise 10/10
Hey Charlene, thanks for your kind words! 😁
Excellent thanks Jan.
Thanks for a great video. Is there a way we can add sections in product description?
Most and most useful video..Thanks a lot
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 !
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?
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!
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)
Great job, exactly what I was looking for!
Thank you, great video
Thank you for the videos. Possible to teach how to create Custom Product Options in this new 2.0?
Hey Joey, great idea :-)
I'll prep a video, but it might take a week or two.
Thank you for the input!
@@CodingWithJan Thank you for the reply! take your time😄
Tnx Jan, always help, thanks to you I know a lot of new things
u are the best)
Thank you! 😃
Thank you for the wonderful video! :-)
I'm using Subtitles/CC function of TH-cam because I'd like to read English subtitles. However, TH-cam 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.
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.
Alright uploaded in a few days :-)
Thank for the video.
I love you Jan!!!
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?
Cool stuff again!
Thank you bro!
Awesome. You rock!
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
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
Hey Jacquelou,
Debut isn't a a Shopify 2.0 theme.
So unfortunatly you can't 😄
Have a nice day :-)
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)
Thank you!
quick question: what is the "|" for? between img_url
Thanks for the video. Gr8 tutorial as always. Some day I shall come to you to thank you personally.
Hey Zubair, I am glad you are enjoying the content😄
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.
Did you find any insights?
Is json going to replace liquid in shopify themes? just wondering why they switched to json
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?
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.
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?
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.
@@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.
@@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!
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?...
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?
Hey Mike,
The template needs to be added to the live theme for it to show on the dropdown!
Hope this helps! :-)
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.
Thank you man. Video is helpful and time saving :)
Awesome, thanks so much 😁🙌
tag in dawn theme . its not even shadow dom element . what is use of that
bro how can we add css classes to design the content which we add
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
Thanks!
Thanks, this was helpful
Great to hear! :-)
Hey Jan, is it possible to ad a section only in one page and don’t go in all pages by default
Yes it's possible! 😄
Awesome ❤️ as always 😊
Nice, super welcome :-) 🙌
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?
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".
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?
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...
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?
Did u fund an answer to this? (I'm using Venture too and "second" is not working...)
@@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
Oh, I see. Thnx. Mind replying with his/her link? Thnx.
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.
You Great bro
Awesome! Would the new approach work on other themes such as debut?
Yes :-)!
@@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
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.
@@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!
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
This JSON files is not working with market place pages. What is the reason?
Thank you so much!
Super welcome :-)
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
I forgot to mention that the Section doesn't get include or won't show like @ 08:45 .....
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 :-)
Thank you sooo muccchhhhhh
Awesome!! Glad the content was helpful. :-)
Hello sir, need help
Hello team,
How can I OTP VERIFICATION in cart page .for COD ORDER CONFIRMATION