Shopify how to use Sections Everywhere and JSON Templates
Вставка
- Опубліковано 1 вер 2021
- 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.com/personal-ca...
👨💻 Find a qualified Shopify Developer for your next project:
codingwithjan.com/hire-a-deve...
► 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.
🎯 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
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.
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 UA-cam.
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.
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 ♡
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.
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!
ua-cam.com/video/9qHKqNHoca4/v-deo.html&lc=UgxvvCs6Qz7bNED7x7V4AaABAg
This is what I couldn't remember how to do from Freemote! Thanks for having this video on YT! Many thanks!
The best explanation of this topic that I've seen so far.
😍 You are the best, Jan! Thank you so much for such insightful videos. They help a lot.
You're the best Jan, You're very helpful.keeping doing it.
Thanks Jan! This was so easy to follow and understand.
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!
This tutorial just saved me SO much struggle. THANK YOU!!!
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! :)
Thank you, this was Very helpful!
I find your videos very easy to follow.
Danke schön, sehr hilfreich. Und an einem einfachen Beispiel nebenbei die Unterschiede json/liquid verdeutlicht. Weiter so !
Great job, exactly what I was looking for!
THANK YOU so much for this!!
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.
Thanks for the video! Can wait for more!
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!
Useful content I have been waiting for. Thank you Jan
Awesome 😃🙌
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 :-)
Ah! I totally get it now. Thanks very clear walkthrough the best!
Useful content Thank you, Jan
Jan you’re the best on youtube 🙌🏼
I'll take it 😄🙌
Wow! Good stuff! Thanks for your time! Subscribed!
Thanks man, was waiting for this one!
Nice 😄
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.
Excellent stuff!
Clear and concise 10/10
Hey Charlene, thanks for your kind words! 😁
Excellent thanks Jan.
Excellent jan that's really help me to understand 2.0 version . Great job ❤️❤️
Awesome 🙌😃
Killed it Jan, again 😃.
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
Thanks Jan. you are a life saver. and you are the best.
Thank you, great video
Love your vids, your smile is contagious && you're a prime example of making learning pleasant!
Thank you Anastasia! 🙌🏻
You're a life saver man!! Thanks!
A+ awesomeness - Feel like i'm learning JSON and Shopify at the same time and it's so easy lol
Thank for the video.
🤩🤩🤩🤩🤩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
Hey bro... world class. I really enjoy your teaching style. Thanks man
Hey Micheal, I am glad that you are enjoying the content 🎉🙌🏻
Thank you bro!
Tnx Jan, always help, thanks to you I know a lot of new things
u are the best)
Thank you! 😃
I love you Jan!!!
Most and most useful video..Thanks a lot
Cool stuff again!
Awesome. You rock!
Thank you that was very useful information.
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.
Thank you!
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 !
Thank you man. Video is helpful and time saving :)
Awesome, thanks so much 😁🙌
can u make a video on how to add customizable options to products with the dawn template plz
Well Explained Jan........i am also a shopify developer
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?
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?
hi, do you have a video showing how to add a custom field for like offer product engraving in a json product file ?
Thanks for a great video. Is there a way we can add sections in product description?
Awesome ❤️ as always 😊
Nice, super welcome :-) 🙌
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)
Thanks!
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?
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!
You Great bro
Thank you for the wonderful video! :-)
I'm using Subtitles/CC function of UA-cam because I'd like to read English subtitles. However, UA-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.
Thanks, this was helpful
Great to hear! :-)
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?
great vids!
new subscriber
Thanks so much for the great feedback, Jay ! :-)
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 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😄
Thank you sooo muccchhhhhh
Awesome!! Glad the content was helpful. :-)
Thank you so much!
Super welcome :-)
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?
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 :-)
awesome bro
you are the best :)
Thank you 😄🙌
quick question: what is the "|" for? between img_url
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)
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
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.
Is json going to replace liquid in shopify themes? just wondering why they switched to json
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?
tag in dawn theme . its not even shadow dom element . what is use of that
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
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.
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
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".
Great vid
Thanks Billy 😄✌️
Thank you.
You're welcome!
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! :-)
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 :-)
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?
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?...
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?
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!
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! 😄
Hello sir, need help
Hello team,
How can I OTP VERIFICATION in cart page .for COD ORDER CONFIRMATION