Shopify how to use Sections Everywhere and JSON Templates

Рет қаралды 63,846

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

Пікірлер: 199

@CodingWithJan 3 ай бұрын

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

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

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

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

@chidiusanga3084 2 жыл бұрын

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

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

@babylullaby_official 2 жыл бұрын

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

@colleencole3204 Жыл бұрын

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

@westernbid_ua 2 жыл бұрын

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

@thomas3636 2 жыл бұрын

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

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

Great job, exactly what I was looking for!

@clementeen 2 жыл бұрын

Jan you’re the best on youtube 🙌🏼

@CodingWithJan 2 жыл бұрын

I'll take it 😄🙌

@charlene6306 2 жыл бұрын

Excellent stuff! Clear and concise 10/10

@CodingWithJan 2 жыл бұрын

Hey Charlene, thanks for your kind words! 😁

@umslopogaas 2 жыл бұрын

Thanks man, was waiting for this one!

@CodingWithJan 2 жыл бұрын

Nice 😄

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

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

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

@MaximalistAmanda Жыл бұрын

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

@gauravagarwal6584 2 жыл бұрын

Killed it Jan, again 😃.

@buyonjederrick6746 2 жыл бұрын

Useful content I have been waiting for. Thank you Jan

@CodingWithJan 2 жыл бұрын

Awesome 😃🙌

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

Thanks for the video! Can wait for more!

@alithearsenalfan Жыл бұрын

THANK YOU so much for this!!

@DanaLeeGibson 2 жыл бұрын

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

@soozey8206 Жыл бұрын

Excellent thanks Jan.

@fullstackmarketing247 2 жыл бұрын

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

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

@mahindaperera5995 2 жыл бұрын

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

@hey_benjamin 2 жыл бұрын

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

@mickeyclaas8648 2 жыл бұрын

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

@DevTechHouse 2 жыл бұрын

Useful content Thank you, Jan

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

@TheLuc234 2 жыл бұрын

Thank you, great video

@yashang_1ne161 2 жыл бұрын

I love you Jan!!!

@nilamrakholiya5650 2 жыл бұрын

Most and most useful video..Thanks a lot

@jemjem8902 Жыл бұрын

You're a life saver man!! Thanks!

@ahsanulhaque805 2 жыл бұрын

Thank for the video.

@bobanumaracine Жыл бұрын

Cool stuff again!

@abdelkarimnasri3294 2 жыл бұрын

Thank you bro!

@santanagonsalves6461 Жыл бұрын

Thank you!

@anastasiagazegrowth 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

Thank you Anastasia! 🙌🏻

@aliraza6628 2 жыл бұрын

Thank you that was very useful information.

@tejassarvaiya8018 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

Awesome 🙌😃

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

@sithell503 Жыл бұрын

Awesome. You rock!

@taylorb2783 Жыл бұрын

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

@maheshwarib734 2 жыл бұрын

Awesome ❤️ as always 😊

@CodingWithJan 2 жыл бұрын

Nice, super welcome :-) 🙌

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

@sirlawrencet Жыл бұрын

Thanks!

@vitalii6709 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

Awesome, thanks so much 😁🙌

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

You Great bro

@vados2491 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

Thank you! 😃

@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 🎉🙌🏻

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

@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

@roymehedi7453 2 жыл бұрын

Thanks, this was helpful

@CodingWithJan 2 жыл бұрын

Great to hear! :-)

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

@SN-ig8ny 2 жыл бұрын

Thank you so much!

@CodingWithJan 2 жыл бұрын

Super welcome :-)

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

@muhammadsajid628 2 жыл бұрын

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

@JayFFresh Жыл бұрын

great vids! new subscriber

@CodingWithJan Жыл бұрын

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

@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

@twinklemittal5754 Жыл бұрын

Thank you sooo muccchhhhhh

@CodingWithJan Жыл бұрын

Awesome!! Glad the content was helpful. :-)

@Itsmohsingill 2 жыл бұрын

awesome bro you are the best :)

@CodingWithJan 2 жыл бұрын

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

@billys8148 2 жыл бұрын

Great vid

@CodingWithJan 2 жыл бұрын

Thanks Billy 😄✌️

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

@phamvanhan7037 9 ай бұрын

Thank you.

@CodingWithJan 9 ай бұрын

You're welcome!

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

@ajaxtyson 2 жыл бұрын

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

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

@joshuaaraujo1176 2 жыл бұрын

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

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

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

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

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

@liamgriffin6897 2 жыл бұрын

Yesssssss

@CodingWithJan 2 жыл бұрын

:-)

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

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

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

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

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

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

@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

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

@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

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

@ashasikander9334 2 жыл бұрын

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

@hirenprajapati1 Жыл бұрын

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

@philip9677 2 жыл бұрын

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

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

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

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

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

@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

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

@lorandhorvath4466 2 жыл бұрын

Ha! Dawn 2.0.0 - released 2 days ago.

@hannanmujtaba7901 Жыл бұрын

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

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

good morning cus its 4 am lol

@CodingWithJan 11 ай бұрын

Hey Regium, thank you!!

@jonice4229 2 жыл бұрын

amazing

@CodingWithJan 2 жыл бұрын

Thanks so much 😄🙌

@jonice4229 2 жыл бұрын

@@CodingWithJan To be honest with you, you better start a course on udemy or another platform for shopify 2.0 a store from scratch.

@CodingWithJan 2 жыл бұрын

Personally I love courses that also have a coaching component and more direct contact to the students. That's why Freemote is going to be the main program for now. :-)

@jonice4229 2 жыл бұрын

@@CodingWithJan i saw that and is quite expensive to be honest again. But is your work you can put any price you want.

@CodingWithJan 2 жыл бұрын

True, it's definitely an investment. Beyond video content, students can get personalized feedback for their code projects, join a community of like minded people and end up with an amazing portfolio that they can leverage to land freelancing projects or developer positions in tech companies. We also have weekly live calls and an internal job board. The ultimate goal is to make people see a positive return on their initial investment. And because it's working consistently, we even offer a 60 days money back guarantee. :-)

@robertischud 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

Yes :-)!

@robertischud 2 жыл бұрын

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

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

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

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