Learn SHOPIFY LIQUID in 10 minutes as a Beginner
Вставка
- Опубліковано 30 вер 2024
- All you need to know about Shopify's Theme Templating language Liquid.
First I will introduce you to what liquid actually is and where it is used.
► 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
--------------------------------------------------------------------------
Shopify's Liquid is a unique and powerful templating language developed by Shopify, serving as the backbone of their themes. Designed with an emphasis on user experience, Liquid allows users to customize their online store layouts without deep technical knowledge. Written in Ruby and available as an open-source project, it underscores Shopify's dedication to community-led development. Liquid's main role is to present dynamic content on online shops, giving users the freedom to decide how product details are displayed. It enables store owners to craft a user experience that aligns with their brand and audience. Essentially, Liquid offers a path to quality, tailor-made web design, allowing even beginners to build visually captivating and effective online stores on Shopify
codingwithjan.com
🎯 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
I feel like I leveled up watching this. About to elbow drop this subscribe button
Very nicely said 😄
Just elbow dropped the sub button myself :D
Am hanging out for the Udemy course 😅
Just gave the sub button the people's elbow myself. This tutorial is helping me learn what I need to pass this technical project. Thank you, Jan!
Oh yeah! I am sure it really took you time to make the animated presentation. Highly appreciated Jan
Thank you Ade Isaac. Really appreciate your positive feedback all across the channel 😃 🚀
PERFECT TUTORIAL MAAAN. Clean, direct and exhaustive. As a programmer I found this tutorial really straight to the point
Out of all tutorials I've seen, this is top 3 for sure. The visual explanation, easy to follow instructions. Thanks bro. Subbed
We are just beginning to go online with our ecommerce business. I dabbled in HTML5 back in college so this has been a huge help in my journey to do little things like change a font size here, or other adjustments that simply are not available through the basic shopify interface. Thank-you so much for taking the time to do this. You have boosted my confidence 3 fold.
Subscribed to see more videos in shopify development
nice video, should make a video where you build a simple theme from scratch or using a free template.
Of all the Shopify "tutorial" vids on UA-cam, I found this very informative! I've leveled up in a matter of a month or so, and now, I think I'm getting to the intermediate/advanced level. Glad that I have a Ruby (on Rails) background!
I love the animated explanations! I’m a very visual learner and you explained in a few mins of video what I have been trying to understand for a week! Thank you for all the time it takes to animate those explanations 🙇🏻♀️
Just starting to learn Shopify and like your videos. Very well explained, and the animations are great. 😃
mach doch mal deine videos auf deutsch! Englisch ist auf dauer echt anstrengend und ätzend :D Danke!
Wow, why it is so easy to understand when I'm watching your videos. Thank you!
Your enthusiastic and excited way of saying "i really hope you like animations" made me smile. Thanks
Yes, me too! Thank you Jan! The animations help tremendously!
I'm a beginner, just starting out. With zero knowledge on IT, I find this absolutely simple to comprehend. Amazing! That said, I thank you from the bottom of my heart. I have subscribed and looking forward to learn more. There will be a lot of your past UA-cam videos to catch up on. Once again, Thank you Jan.
Great job Jan, we do appreciate your hard work, it was very informative and well explained. I hope you do very well. I will follow you I am very interested in Shopify modifications.
Finally a video straight to the point and very informative ❤❤❤❤
Great job explaining something complicated. You are easy to follow and very engaging. Thank you
This would be a nice to have DIY video/tutorial - about ‘How to figure out where some feature is, within liquid files, within Shopify.’
As a lay person, trying to figure all of this out, the hardest part for me is that step - of going from the developer tools area to finding the right place within Shopify.
Interestingly, all of the folks (like you) who provide these training videos - really good/helpful! - do the ‘inspect element’ trick from Chrome, let’s say, but they gloss over HOW they figure out where within the Shopify liquid files that code actually resides. :)
I think it’s second nature to you, because you know how the code is constructed, containerized and distributed. I can usually see the name of the file, but without really knowing how to program, and the way in which the sections/elements/snippets, etc., are distributed, it’s really hard to know where to look, when editing the Theme.
Hire a dev. It's worth the investment.
There's a lot of ways to code things wrong.
Can you make tutorial how to make sticky add to cart button
Hey Hamza, great Idea.💡Thank you. Sounds like this could be a nice video. I will look into that :-)
After login, the Account page is displayed instead of the Deal Pages. What is going wrong with me? Thank in advance!
Hey there, actually that's the correct/expected behaviour. After login in into the customer account there is no redirect per default. You could modify your customer area to display a link to deal of the week Page for example 😃
@@CodingWithJan OK, got it, many thanks!
Hi, can you please send me a folder featured-product.liquid, I wanted to edit some changes and most of the kodu was deleted to me, I have debutify themu and when I go to customize it writes me HTLM ERROR and I can not click through between photos on the product page, I put in the store 3 months time, so I do not want to just waste it. Please help me, I'll be grateful.
thanks so much for the way you teach. i had hard time with the many curly brackets liquid, now feel better!
Jan, appreciate your tutorial effort. Buy the way, are you aware of LIQUID spelt LIQUD (36 seconds )on front page of this video? regards Anthony.
Hi Jan.
Congrats and danke for your job.
Would it be possible to show a selection of products in the site based on customer tags?
For instance, customers tagged with GRUPO-A only will see products tagged GRUPO-A...
Gracias/Danke!!
Hey, can you help me to change Shopify Sale badge text? it's showing in a percentage now like this -10% but i want to show 10% OFF or Sale
How can i do that?
Very crisp and clear information, love the way you taught. Hats off to you.
This looks exactly like Jinja2 templating language used for example with python Flask framework
Great work! Really enjoyed the animations!!
Thank You for such great understanding video.
Thanks for that video jan! Best greetings to Germany! 😉👍🏻
I'd like you to add English subtitles if possible。
Hello, I‘m your Chinese fans, I like you video, but video no subtitles, UA-cam Automatic subtitle generationare in German. this is wrong, It should be English,
Love you bro from Bangladesh ❤
you are welcome :)
Jan! Thank you so much for the explanation it was really helpful!
Great video. Clear, informative, concise. Much appreciated. Subscribed.
very helpful from a beginner perspective. Thanks.😇
I might've bit off more than I could chew with this one lol, I'm on the Liquid Sandbox course right now and don't know any commands.
Update: I ended up finding it!
Dude, Your Rock! Keep posting more content!
This is bomb, and you are truly adorable! :D
Hey Jan. This video is helpful. btw my question is I have 2 themes. One with Product Upsell code and the other one not. I'm not familiar with liquid code. Can u help me how to copy tat upsell code to other theme???
Hello, I follow you from Egypt and I like your videos very much, but my English is weak, so try to do translation on all of your videos, please.
The video is well made with good flowing animations. I only ask is liquid a framework of Djinja because it uses a lot of similar components.
You are superb. Thank you so much for making videos on Shopify liquid.😊
Thank you so much Jan, you make it look easy! That motivated me a lot
Thnak you very much, great video, love the animated explanations!
Hello Jan! Will you please upload a series on how to convert a PSD to Shopify Theme.
Awesome
Super helpful! Including the graphic! Thanks!
Hey Jan, how would I set a specific tag to a customer based on a condition?
I'm specifically looking to tag a customer "member" when they purchase 1 product and are also subscribed to newsletters.
Does this seem right?:
{% if customer.orders_count >= 1 and customer.accepts_marketing == true %}
{% endif %}
Thanks!
Very nice step by step tutorial, Can you also make video of how to quick view the products and make wishlist
This is a great video. I am so happy I found your channel. Are you familiar with the Kala All In One theme. It is giving me grief.
You're the man Jan!!!!!
Hello! Thank you for the wonderful video. Can you help me display Add to Cart Button on a product page only when a coupon code is entered?
Your videos are immensely helpful. I really needed to be able to understand what I was looking at when it came to my company's website and how it works. Thank you.
Thanks for this. I just hope there is a caption for English as I have a hard time understanding some of your words.
Hey Jan. How we can add menu handle on product page below header.
Like on product page, I need 3 collections on the top below the header. How can I do it.
I need help adding certain features to my shopify so that I can implement better consignment features. Help.
Liquid is so messy and hard to read compared to other languages I've used.
Does this code still work. Everytime I login it just takes me back to the homepage. My store is a development store.
Hi can you embedded a contact form and also have the customer upload photos to it without using an app in shopify. Thanks Peter
Your voice and presentation really good. Thanks
Thanks for the valuable video it's really very helpful 😊
Very nice, Now i understand lol (p.s. your audio to the video was a bit out of sync)
Hi Jan how to section background two option in the home page. Plz help me
Hi Jan how to section background two option in the home page. Plz help me
Hi Jan how to section background two option in the home page. Plz help me
How to get back code of yesterday, i mess up and Deleted them all
Just subscribed!! Thank you for your hard work! Cheers!
Can you help me with shopify item upload section bcs at my shop we are doing b2b and b2c both so we have multiple price slab like example :-
Sku-1pcs :-100/-
SKU-2 to 9pcs:- 75/-
Sku- 10 & above:- 55/-
So any one want to resale or purchase any product as par need or as par reselling product
Can you do coding like that if customer take 1 pc it will cost 100 rupess or if customer take 2 to 9 it will cost 75 or if he will take 10 &. Above that it will cost 55.. And the calculation will automatically show as par pricing...
This is called quantity breaks / price breaks, and can't be done properly without apps
Great vid! the animations were very helpful as well! Liquid reminds me a lot of Vue JS
Hi Jan, is there an easy way that I can swap out a slider on my Shopify home page with a video? I am not certain how to edit the code?
#Jan you have the best teeth on the internet, sir !
P.S. Great tutorial. Thanks man!
Could u plz put enable closed caption? Thks!
Incredible content.. Loved the explanation. Keep at it. - fellow yotuber :)
Thanks a ton! 😃
This is valuable content. Appreciate it.
Hello Jan. Is there a way to show a line item property field when someone selects a specific variant? I cannot find in google. You've been helping me a lot the past few weeks on setting up my personalized product store.Thanks a lot.
Hey there,
this one might be a little tricky.
2 ways to do it:
1. Create a separate product for each of the variants if that's suitable
2. Hide and show the property field conditionally on a variant change with JavaScript. For example one could check if the current variant Id matches to a product that show hide or show the line item property field. Some basic understanding of JS will be helpful here.
Hope that helps :-)
this was extremely intresting and helpful
hi Jan i have mesasgesd you on instagram i was wondering if i can have some advice please
Such a good explanation! It was soooo helpful to see you code it in real time.
Glad it was helpful for you Jaclyn 😁
Thanks for the content and a special thanks for the animation part. Hats off
Great video and explaining - you don't have any course yourself I can access? Thanks!
Hey Jesper, great your asking.
I'm currently building a program, which is designed to take people from scratch to mastering their first projects as a Freelancer.
My unofficial dream release-date is by the end of February.
The curriculum turned out quite ambitious:
First, we introduce students to the most relevant HTML, CSS, and JS.
After that, we cover all you need to know about Shopify as a platform so that you can start building great online stores with little to no code.
Then follows a deep dive on Theme Customizations and Coding to get your services to the next Level.
Lastly, we have a big Freelancing section, which shows you how to build your portfolio and how to find clients.
On top of that comes a private access community for questions and more personal guidance and a lot of done for you templates and exercises to practice.
:-)
hi bro i have problem with it when i login then it direct to me on my account info instead of direction on that pag please help
Hi Jan,
Thanks for this.
I have a quick question regarding the objects like product or page.
Where are these objects initialized?
For example, {{ product.price}} where is it coming from?
Hi Vincenzo,
in Liquid we can't create higher level Objects ourselves.
We can only assign simple variables and the other objects come directly from Shopify.
Thanks a lot, really motivated me to pick up liquid. Looks very straight forward
keep hustling mate!! just subscribed!
I need to know where you got that tea/coffee mug!! Please share
Thank you for this video!, it helps me a lot!
Really well put together! Excited to start working in Liquid
Very helpful, thanks a ton! :)
good
I myself am a full-stack web and mobile app developer. But your video is really perfect for all kinds of beginners, especially I liked your animated client-server side communication and your English with very lovely voice. Thanks for making such great videos and I hope you will keep up the good work. Audiences, let's cheer him up!!!👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏
Have you tried creating Shopify pages through Webflow + Udesly? A short tutorial would be greatly appreciated.
Hi Ilan, havent used that yet. The only framework we use sometimes is React :-)
Vielen Dank Jan, du machst das nur auf english oder ? Ist wirklich gut!
Hi Jan, your videos have helped me so much while building my shopify app. I need to put "from" in from of my prices. Are you able to assist with this?
Hey Nydine, awesome you´re building an app :-)
Think you would need to provide a few more details for me to give you some meaningful advice.
If you inject the prices somewhere on the frontend, can´t you then just inject "from" as well? 😃
I really love your content. Stay awesome
Than you Jan, love your smile mate!
Fantastic video Jan. Thank you!
Thank you Jan, lovely animations :D
Please make video on shopify speed optimization
The way you explain it. It looks easy😮