How to Migrate Shopify Themes to Online Store 2.0 (Liquid to JSON Templates)
Вставка
- Опубліковано 31 сер 2021
- skl.sh/2MCrJIE
7-day free trial for new Skillshare.com users
Wanna go deeper into Shopify Theme Development? Join my mastermind community.
shopifythemedeveloper.com/
Do you run a business on Shopify and want help with your store? Get in contact
form.typeform.com/to/Zg0k4BEP
Episode Overview
-----------------------------
As part of the Online Store 2.0 announcements, Shopify finally announced the arrival of a feature that they’d been talking about for some time, ‘Sections Everywhere’.
Previously, the homepage was the only template that merchants were able to add, re-order and remove sections from. Now, with the advent of JSON templates, that functionality has been extended to all templates such as, the product template, the collection template and the page template to name a few.
In this video, I’m going to show how to replace your Liquid templates with JSON templates, therefore allowing you to take advantage of this new feature.
Check out my stuff online...
My Skillshare.com channel:
www.skillshare.com/r/profile/...
My travel channel:
/ christhefreelancer
My website:
christhefreelancer.com
My socials:
Instagram: / christhefreelancer
Facebook: / christhefreelancer
Twitter: / chrisrdodd
![Shopify CLI for Theme Development (How to use) [Version 2.0]](http://i.ytimg.com/vi/YM0XOa2LZSs/mqdefault.jpg)
It's just WOW, Chris! ❤️ You made a very simple guidelines to convert theme to Shopify 2.0. Thank you very much Chris. 👍
Beautifully explained, with the right amount of detail, and moving to more complex operations (like product template, article template). Thanks! 👍🙏
underrated tutorial🙌🏼 Thanks Chris🔥
Finally got time to convert to json templates. This video could not make that job simpler. Thanks for the video.
Wow, that’s much simpler a concept than I’d figured. Thanks for the demo. Also, the more complex the functionality, the more you’ll need to think ahead, right? Like, “should comments be a section that can be available everywhere or do they only work when used in the article?”, for example.
Nice job!
🥰 thank you chris for this amazing guide
Your a really good teacher dude. I’m going to purchase your skill share Shopify stuff. Keep up the good work
Great! So helpful Chris!
Just WOW! I loved it. Thank you bro!
clear and helpful, much appreciated!
So good bro!!!
this is a really great update from shopify that is why I love this platform
Well explained Shopify 2.0 theme template migration to JSON. I am also a shopify developer.
Amazing brother really helpful
Thank you for this video, it helped me. This amazing guide
Wow. Very useful. Thanks a lot.
Best Guide Thanks :)
Amazing Video. Love you from pakistan
Thank so much Chris!! the best step by step I found. God bless you for your time and dedication for your followers. Chris I do have en liquid template different product template for each of my products (because I use hero and (hura) videos on sections). how I do now? because when I create the json product template I don't see the option to add a different title name
With JSON Templates, you now have the ability to update and re-arrange sections in the customiser for that template but it doesn't mean you can create separate selections for each product. For that you need to use either an alternative templates or metafields with customiser data linking.
Very interesting thank you
Thanks Chris. Very well explained! I actually managed to change a liquid template to a json one. Only thing is that the new json template does not allow me to add a "product info" section in theme developer. I'm using Venture. Have asked shopify support but they can't help other than point me to a developer...
What do you mean by 'theme developer', you mean 'theme customiser'? Using JSON templates, you simply create a section and link it in the JSON.
Great video! How would you add line item properties in the new layout? Everything references the old way of doing it.
I wasn't aware of any changes to how line item properties work. What makes you think it's somehow different now?
I incorporated some things from your GitHub and Shopify CLI tutorials into my workflow. This is my basic workflow for development store theme customization:
1. Choose a theme
2. Create local folder and open in VSCode
3. Pull the theme w/ Shopify CLI
4. Create GitHub repo
5. Connect master branch from repo as the live theme to Shopify admin
6. Create new branch for testing and development
7. Connect development branch in the shopify admin as the development theme
8. Run the dev command to start live preview
9. Make changes
10. Once you’re happy with your changes, merge to the master branch
What do you think?
sounds pretty good to me
Thanks Chris, Can you make videos of Shopify theme development with JSON?
Hey Monsur. Everything is virtually the same. The only difference would be that you code all your Liquid in sections (and snippets) rather than the templates.
thank you!!!
Well explained. Correct me if I’m wrong, but it sounds as if I only need to edit templates that I want to use the new functionality? So if for example I didn’t want to change the 404 page, it could stay untouched? Not that it’s a big deal to change just that it means you could update your theme in bits instead of all at once.
Thanks again - glad I found your channel.
Yes. That's correct Mark. You only need to migrate the templates that you want to be able to re-order into JSON Templates.
@@CodewithChristheFreelancer thanks for confirming!
Hi thank you for your help!
But I still don’t have all the functions that I’d have if i use dawn… for example I want a metafield underneath the price of my products but I can’t put anything into the product
Hi Helena. Why not? What is preventing you from doing so?
Great vid Chris! I am having trouble with converting index.liquid to index.JSON. I have referenced the new Dawn theme but can't get it working(converting the old theme to store 2.0). Thanks.
Hey Markus. Your index.liquid should just hold {{ content_for_index }} which is a list of sections. If you follow the documentation, you should be able to figure it out
shopify.dev/themes/architecture/templates/json-templates
Otherwise, if you need additional help, you can send a question through in the Patreon.
www.patreon.com/shopifydeveloper
Hey Chris, thanks for this awesome walkthrough! As I am converting the template files from liquid to json, I'm running into the issue of the some of the styles for those pages not displaying the same as before. I haven't been able to wrap my head around why this is. Only conclusion I tried was that it has to do with the styles being in a single theme.scss file as opposed to using section-specific css files. Do you have any solutions for this? Thanks in advance!
Hi Mike. Not sure why that would be the case. Before Dawn came out, I'm pretty sure most (if not all) themes had the CSS in the one file so chances are, your themes does just have one CSS file. That being said, if the CSS file is being linked in the layout file and you're not specifying a different layout in your template file then it should still load the stylesheet.
@@CodewithChristheFreelancer Thanks for the reply Chris! Yeah, not sure why the stylesheet is only loading for liquid templates and not json templates. (especially for collection and product). Will continue to look into it, hopefully find an answer soon!
Thank you, so is it gonna be a requirement in the future to migrate all the entire templates in the code section, to Json, don’t know if I should only do the template I need the new functionality. (Partial with products template) because I am thinking about all my past clients which I don’t know if I need to migrate their entire themes to 2.0. Thks
Hi Sandra. We can't know for sure as I don't think Shopify have made those plans public but I'm sure they would give us adequate warning before deprecating Liquid templates.
Thanks for simplifying this process for us.
Is the skillshare class fully updated for os2.0?
Hi Kreshav. Yes it is.
@@CodewithChristheFreelancer Hi, Chris, there are multiple extensions for Shopify in vs code, there is rarely any proper info regarding which ones are good & how use them optimally.
.
Do you recommend any? or a video regarding this would be great.
The one I use is called 'Liquid' by Νίκος
hi chris, i have a question. for the sections that were listed in the json template, how do i add css classes to the individual section before it references the liquid file? based on the web inspector on the product page, theres a default css class added to these sections but im not sure where its getting it from.
That's just the "class" field in the section schema (not in the JSON Template)
Hi Chris, is there anything else that we can do with Shopify 2.0 or it's mostly the liquid to json template conversion?
Check out my video on 'Online Store 2.0: What you need to know'
Hi Chris ! First of all, thank you for this wonderful tutorial. I have a question and I hope you answer it. How do you manage to have more elements to add in the "Add section" option. For example, I don't have "Gallery, Logo List, etc". Is it because you paid a package? Or maybe it's the template that you choosen (I have the Brooklyn one) ? Because for the moment I only have the 14-day free trial and maybe that's why. Or because you switched to version 2.0? Thank you :)
Hi Roxuno. It is all based on theme. In this video, I demonstrate migrating the Debut theme to use JSON Templates. If you're using another theme, you'll have different sections available.
@@CodewithChristheFreelancer And what theme did you use in this video if you dont mind?
As mentioned in the video at 3:55. The theme is Debut version 17.10.0
Thanks for a great video and it was very helpful. The problem I am having is when I have to do the index.liquid file , if it doesnt have any section references how do I transition it?
The index.liquid file is a special case. You need to open up your settings_data.json file and find the data for 'content_for_index'. That's where the list of the sections (along with their settings is stored).
@@CodewithChristheFreelancer thanks for the answer, thats the route I took. I wanted to ask , inside the array of content_for_index there is a list of ID's , I referred to the section name and not the ID and that seemed to work, is that still correct?
IDs are used instead of section names when the section name has already been used (in order to differentiate multiple of the same sections on the one template)
@@CodewithChristheFreelancer Thanks so much for the Reply!!!!! I got it up and running!
Hi Chris, I only want to learn Shopify so that I have all the skill I need to make a Shopify store for my own products and services. I hear about JSON, PHP and CSS but I don't know where to start and where to end. I am 62 but I am not afraid of learning new skills. Can you please advise on what to learn and which courses to take. I will be very thankful for this. Thank you. Farrukh
Hi Farrukh. It really depends on what you need to edit within your theme. I would suggest purchasing a pre-built theme and using that tbh but knowing theme development can help if you wanna dive into the theme code and make a specific change.
Great tutorial! I have a question regarding Shopify Search and Discovery (filters) because it requires 2.0, but i migrated (almost all) sections that i use and the store is still detected as not compatible. Do you know what triggers it to be detected as 2.0? Does it need to be fully JSON file migrated to be detected as such? Or theres like a version file that registers that? Thanks!
That's a tricky one. Maybe it needs to have all templates as JSON. I'm not entirely sure. Might have to ask Shopify support on this one.
@@CodewithChristheFreelancer Thank you for the answer! Shopify support said they dont code so they dont know, and that i should contract an expertise if i dont know how to do it!
How am i know something they dont state anywhere lol.
Thank you anyway :)
Thanks Chris, great video! I guess my only concern is : Is it really necessary to migrate and old theme to 2.0? Are there really any benefits apart from the extended Customizer? I read somewhere about page speed/performance improvements, but I'm not sure I quite understand how it would help... My Theme is really heavy in terms of custom modifications, I fear it's going to be hell to migrate everything.. and I haven't even talked about apps integrations. Anyone can enlighten me.. that'd be appreciated? Is performance/page speed really improved? Thanks!
Hi Dominic. As far as I know, there is no need to migrate to 2.0 at this stage. Perhaps Shopify might deprecate Liquid templates in future but I've still been using them in 2.0 projects. Sometimes you don't need to have customisable sections in a template if you're building for a specific client. I can't imagine that Shopify are in a rush to get rid of them.
@@CodewithChristheFreelancer I think I kinda agree also. We'll see where this leads in time. Thanks for the reply
Is it possible to add a metafield filter where a product has multiple values. for example if a product was made from "glass" and "meta". I want a filter called "Materials" and I want that product to filter on both "glass" and "Metal"
Should be. 'Metafields' are listed on the the documentation as eligible for storefront filtering. Give it a go and see if it works ;)
you are the best! i have a question about this, if i have an If with {% sections %} how can i resolve that?
Hi Mirco. What do you mean?
@@CodewithChristheFreelancer do you have a email i would like to send you a print of my code
Hi Chris, how can migrate the liquid templates created on for example theme 1 (Empire), to theme 2 (Impact)? Thanks in advance.
Simply move them from one templates/ folder to the other and make sure the section files they reference have been included in the sections/ folder as well. You may also have to port over external CSS/JS files as well.
Could you please clarify. I installed a new Online Store 2.0 theme.(Turbo 7.0) Decided to abandon the old theme (Parallax). Now I have a few default pages from my previous Liquid based theme that are not assigned to any templates. Do I assign a page to a template?. Should I convert or recreate the pages based on a JSON template with sections. Shopify help pages are unclear about how best to apply or assign pages without templates. To clarify. I did not migrate and did not update. It is a totally new theme that automatically populated with existing data and pages. Do I still have liquid code leftovers with a new 2.0 theme? Or is it all Json that is just not assigned correctly?
If you just switched to a new theme, it's very likely that you don't have all of the same templates. That means that there will be some pages that are now missing their original template. You can either assign them to a new template or you can recreate the old template in JSON with any old sections either being migrated in, recreated manually or just skipped if unimportant.
You can also just try bringing over the liquid template. Do note that it will likely be missing sections that it needs.
Hey Chris, 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)
Hi Nazmulhasan. It's in the documentation.
Just use "layout" : false
shopify.dev/themes/architecture/templates/json-templates
@@CodewithChristheFreelancer ahh, thanks a lot. Idk how I missed that!
We need help converting supply theme to supply 2.0 theme. We tried dawn but our product images were not uniform but all over the place and not lined well when viewing product listings. Also we have too many product with rule defined collection using product type. It will be an horror to migrate especially when we did not really use the product type correctly and unlike tags you can only have one product type. Need help
For any work enquiries, you can email me at chris@christhefreelancer.com
Friend, how do I add a new theme to a backup? My clients have not updated their Shopify theme in three years! I'm wanting to add the Dawn theme to a backup version so I can do all the edits and design work in the new theme applied to current content... make sense?
Nup. What do you mean by 'backup' here?
Can we create a new section for Checkout whilst being on the basic Shopify plan?
You need to be on Shopify Plus in order to edit the checkout.liquid layout file.
Chris, that means we can build/edit themes without liquid templating Language?
No. Liquid still exists. Any Liquid previously in templates just needs to go somewhere else.
Hello Chris,
I received your information from Eight teams Adam O I Purchased Shopify theme Capital. I would to find out if you can correct the issue on my website?
Hi Mar ak. I don't know anyone by the name of Adam O from Eight teams but any business enquiries can be made through my website christopherdodd.com
how can I include a dynamic section in a json template ?, example {{content_for_index}}
With JSON templates the whole thing becomes like {{content_for_index}}.
is shopify still going to use liquid, will json and liquid work together in themes or json is replacing liquid
JSON is not replacing Liquid. JSON is not a templating language is just a data format. JSON holds data whereas Liquid brings backend data onto the frontend.
Sir if a person wants to watch your skillshare tutorials but doesn't have a budget so what should he do?
Hi Yasin. If you're new to Skillshare and can block out 7 days, you could cram your study over the week and cancel before the end of the trial. That's one option.
How about the product template with it's own section to upload images? It will be also removed?
Are you talking about customers uploading an image?
@@CodewithChristheFreelancer We have sections on product template that every product has its own image. Like a unique section every product where you will upload image and texts. So we will re-upload it again?
For that you could create a image metafield. See my video on metafields in Online Store 2.0 for a walkthrough.
💯
Anybody else having problems running the squarespace server on an m1 Mac?
Help! I don’t see option to create Json template in my debut theme.
ok that's strange. It works for me. Please double-check you're following the video exactly.
@@CodewithChristheFreelancer 100% sure. I only see “duplicate file”
@@CodewithChristheFreelancer check your instagram
I don't respond to coding questions on my Instagram sorry. Please to message me for coding advice is on Patreon. www.patreon.com/shopifydeveloper
Can you limit the available sections that are allowed for a specific area?
When you say specific area, you mean specific 'template'?
@@CodewithChristheFreelancer Thanks for reply - yes, although I said area because it looks like you could have multiple areas within a single JSON template if I have interpreted correctly, e.g. "main" for the main content/body, and then "sidebar" for some sidebar sections (which I guess is my next question!). So just wondered if you could do "only these X sections available for main, and only these X sidebar type sections for the sidebar". Thanks :) Nice channel/content.
hmm maybe you have misinterpreted. The objects within the 'sections' object aren't different 'areas', they are literally just sections.
Perhaps your question is: can you limit the amount of sections that an admin can add on the template? In which case, I'm not sure. Best to check the documentation and see if there's an attribute for that.
@@CodewithChristheFreelancer Sorry, my bad explanation - it was the parent thing you named "main" which has sections within. I wondered if you could have another parent category like "main" in the JSON for a specific template (e.g. "aside". But yep I'll have a play and see. Thanks!
Yeah so "main" represents a section, not a parent object. That seems to be the confusion.
day-boo
where to find a job with not good engblish
Stupid idea adding code to the section/article-template.liquid
How so?
Hey Chris, cheers for making this tutorial mate. My codes look a bit different to your example site. Eg my 404 code is below. Do I just just copy and paste that into a new json section or do I need to edit the lines that have section it them? I'm using OOTSB Superstore theme v3.1.3
{% assign continue_shopping_url = "/collections/all" %}
{% if settings.continue_shopping_url != blank %}
{% assign continue_shopping_url = settings.continue_shopping_url %}
{% endif %}
{{ '404.general.title' | t }}
{{ '404.general.text' | t }}
{% if settings.continue_url_404 != blank %}
{{ '404.general.continue_shopping' | t }}
{% endif %}