Shopify Coding 101 for Store Owners & Designers - HTML, CSS, Liquid & More
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- Get The Shopify Coding Handbook here: edcodes.gumroad.com/l/diy-sho...
This video is for anyone who owns/manages a Shopify store but doesn't know any code. I will show you the absolute basics of web development, but specifically for Shopify.
If you find any of my other videos confusing, watch this one first!
After watching you will understand how to read HTML, CSS, Shopify Liquid, JSON schema, and a bit of Javascript.
👉 RELATED VIDEOS
- Updating your theme: • How to Update Your Sho...
- Creating a custom CSS file: • Shopify CSS Intro - Ho...
- HTML & CSS project for beginners: • Intro to Shopify HTML ...
📚 MY SHOPIFY CODING EBOOK
ed.codes/shopify-coding-handbook
Learn HTML, CSS and Shopify Liquid from the beginning and specifically for Shopify.
📢 STAY UPDATED
Want to see my latest tips, tutorials, and code add-ons? TH-cam won’t always show you. Subscribe to get emails directly from me: ed.codes/newsletter
👨🏼💻 WHO AM I?
Hey! My name is Eduard.
I teach the tech side of starting and running a Shopify store.
I'm a professional web developer, but my goal is to make Shopify easy with simple and straight-to-the-point videos.
Visit my website: ed.codes
Join "Shopify DIY" on Discord
Chat with me and other store owners and developers:
/ discord
🛠 CODE SHOP
ed.codes/shop
Pre-built sections & features for Shopify 2.0 themes, often replacing the need for apps. Copy and paste the code into your theme.
👍 MY FAVOURITE APPS & THEMES
Pagefly (Page Builder): pagefly.link/vASPAeBp
Design Packs (add new sections): platform.shoffi.app/r/rl_gyOD...
Themes by Out Of The Sandbox: outofthesandbox.com/?rfsn=594...
Some of these are affiliate links. If you ever upgrade to a paid plan, you will also be supporting this channel at no extra cost. Win-win!
⏭ CHAPTERS
00:00 Intro
01:10 Tools
02:45 Overview of HTML + CSS + JS
06:41 HTML
16:41 CSS
24:32 Javascript
28:53 Shopify Liquid
39:25 JSON & Schema
45:52 Buy my book
#Shopify #htmlcss #liquid #shopifydevelopment
![fellow fellow - Proud [OFFICIAL MV]](http://i.ytimg.com/vi/9uZF7BlUQPE/mqdefault.jpg)
![คุณอาเรียโต๊ะข้างๆ พูดรัสเซียหวานใส่ซะหัวใจจะวาย ตอนที่ 2 [ซับไทย] 【Ani-One Thailand】](http://i.ytimg.com/vi/kbbfYakMY8k/mqdefault.jpg)
Ready to learn more? Grab my ebook here: edcodes.gumroad.com/l/diy-shopify-coding-handbook
Great explanation! I've never bothered to learn this after thirty years of using the internet until you made it so easy to understand
I've barely started, but paused to say THANK GOD FOR YOU. I am so relieved to have found your video and ebook. Everything I have found so far while trying to figure out how to build my Shopify store has been for people who know how to code already. They say they are for "beginners," but they are not. Thank you. 🙏
Thank you for this comment!
I've been waiting this content for months. Great job 👏
Your videos are a great resource for anyone learning to code. Thank you for creating it!❣
You are amazing Ed, you do it in great detail, leaving no room for misunderstanding !!
Love this video! Also the house analogy and the noun-adjective-verb analogy is super clear!
Literally the only Shopify related youtuber I am subbed too and get notifications from - thanks for quality videos everytime
Thank you! I appreciate that.
Wow, awesome info!!! I've been poking at my shopify code without really knowing how it all fits together, so this was a wonderful explanation. You have a lovely teaching style that made it really made it easy to understand, thank you!!!
Extraordinary - thanks so much Ed for producing these videos for us people setting up our shops in DiY style. Of course I bought also your book and I am full of energy to make it my shop!
Unreal video man, props. This is exactly what I’ve needed since I started my store 3 years ago!
I barely write any comments but HANDS DOWN to your channel! Thank you for making all these videos they help a lot specially for those of us that have never created a website. When I don’t know how to do something I first search in your channel then the rest ofTH-cam. Thank you
Thank you for the kind words! Let me know if you have any questions you weren't able to find answers to.
This was so so cool, you have a gift, my friend. I understood you and I didn't feel overwhelmed. The house analogy was perfect. Really , you have a gift to teach. Not everyone can do it well, trust me Im on youtube looking for tutorials and you stand out because I could I get it !
We will be glad grateful if you make a playlist and teach us theme development.
That's the plan. Now that I finally made this basics video, I can make other videos more advanced.
Wow, finally someone who can dumb it down for the layman. Excellent articulation and explanation! I'll definitely be purchasing your ebook.
Thank you for the video Ed. I will buy your book right away.
Sorry to hear what youtube is doing to you! I would gladly buy your book except i'm a terrible learner for reading, much easier for me audibly. Hopefully you do the course soon!
great video as always! thank you for all the great content 😎
Thank you!
Great video, just wondering how amazing your course will be
Thanks for the great video! So helpful! Good luck with the chanel! x
Excellent tutorial. Informative and well presented. Downloaded your e-book.
Awesome, thank you!
Thanks! Great video! 👏🏻👏🏻👏🏻
Thank you for this video, your content is incredible. I cannot wrap my head around de-monetizing information that is so beneficial. I'll buy your book, keep up the good work. You seem genuine and when following along, EVERYTHING that you do works...and is accurate. Keep up the good work.
TH-cam fixed the monetization issue now :). But thank you for your support, and your comment. It's really nice to hear that. All the best!
@@EdCodes That’s great news, you deserve it! You’re the only person I would even CONSIDER paying for a course. I implement something unique every time I watch your videos. I’m evolving and cannot wait to bridge the gap from reading/understanding/implementing code to freehand development is exciting.
Wonderful video
You are awesome sir
Your videos has been a lifesaver for me, thank you so much!
i've recently had problems with the dropdown navigation menu not working on mobile, is there any way i can fix this? I use Dawn theme.
Thanks for the easy-to-understand video! When is your full course being released?
I might release it in parts but definitely will have something out in July!
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!
Hey I love your stuff and I have learned a lot from it. Can you also make videos about how to make a "shaky" add to cart on the dawn theme and also how to make a sticky add to cart. That woudl be very helpful and great.
yeah sticky add to cart! That would be cool
I have a question about your ebook. I don’t know anything about code, I’m not a developer. But usually when I’m creating a landing page or a form it usually has a box to input CSS codes. I’ll usually look for a video on TH-cam or ask google how I can make a particular customization. When I find the answer mostly on TH-cam videos. I just type out what I see them type in my CSS editor and it works fine. So I don’t usually have to know what the code is, just what it can do for me. My question is: can I find such codes in your ebook? I’m seeing a chapter for margins and padding which is my issue with Shopify. So will I be able to get the codes to customize without having to learn the codes?
I just bought your ebook. Do you have an ETA on the course? I really appreciate you making these videos - they're just the right level of complexity and the right pace.
I hope you can appeal to TH-cam and get monetization back!
So impressed by the tutorial, great work ED, Can I have the discount code for your ebook?
Thank you for this video! I learned a lot as a beginner. Question though, how do you know what CSS code to use on complex designs? or all the designs in general? Will it come from the HTML file of the design? Then from there.. style them using CSS? Thank you so much for your help!
Follow-up question.. I hope you can enlighten me. 😭 When designing the Shopify website, is this correct? Choose theme --> create your wireframe/pages based on that theme --> design --> export html --> configure/edit theme settings/code the design??
THANK YOU IN ADVANCED!!
This video was sooooo helpful!! I have a question! Can you share the code for creating a custom.liquid block? I have it added as a section but I need to somehow make it a block too! It looks like you were able to do this when I look at the time stamp 42:55 :) Looking forward to hearing from you! Thanks!
Hey Ed, I love your videos! Do you have a video on how to create a landing page (without apps) with the Dawn Theme? (No header/menu) just a normal landing page vor lead generation? Best regards from Germany 🇩🇪
If you have the latest version of Dawn you should be able to hide the header and footer on any template you want. If you're on an older version, this video might help you - th-cam.com/video/mxUSrhnbehA/w-d-xo.html
Amazing video! Thank you!
One thing that I was concerned about was if you’re adding custom CSS into a template element, if you upgrade your theme will it still be there?
My guess is that it should. I know if you add it to your .liquid files it will get wiped if you upgrade your theme. I learned that the hard way.
Thank you for always commenting!
Yes if you add CSS using the theme customizer it's saved just like the rest of your settings, which means it moves across when you update your theme. Next video is about the custom CSS field.!
hey EdCodes! I tried to copy the excact code " in stock ready to ship" from word to word, it shows the text but not the actual green bubble? Any advice :)?
Hello Ed. I have question for you. Do you know hot to convert from Cyrillic to Latin product, collections urls in Shopify?
Hmm, can I see your store? Easiest way is just to use the SEO settings at the bottom of each product/collection admin page to manually input the name in latin characters. But are you using Shopify Markets? Is it a multi-language store or just one? The official translate & adapt app can *translate* URLs but I don't think that's what you're looking for...
Does the E-book have codes like codes that are on your website? I mean does it have written codes for specific things?
No, the goal of the ebook is to teach you skills. It has some common examples but there are no complete features like my videos. For that check out my other products - shop.ed.codes
Hi sir i want show the form value in my app (our created) from devlopment store form how can I make that.
Please help me sir
hi . i have like+dislke html css js. i add it it custom liquid . but the count start from zero when click after refresh the page . can you help me please
❤
Can you make a video on a product with multiple varients to show images of the varient which I choose and not all images of the product all at one ? If someone khows how to fix that please reply 😅😅
Depends which theme you are using. Many themes come with that ability now.
@@EdCodes any free theme has that function ? Btw I'm using dawn
I tried to purchase your book DIY Shopify Coding Handbook with no success. First was able to add to cart, but theiir was no checkout. Finally go to page with Pay, but when filled in info and clicked Pay nothing happened.
I noticed that it's been 8 months since any activity here, so are you still active?
Hi, thanks for your comment. Yes, I am still active! I post 3-4 new videos every month.
Are you talking about this page? - edcodes.gumroad.com/l/diy-shopify-coding-handbook
I'm not sure what the problem might be. I had some sales just today. Just click "I want this", and the next page will ask for your email and payment details. Then click pay. That should be it.
"Promo SM" 👉
make a liquid course for free for dev
plz MAKE A CRASH COURSE FOR FREE
This is one lol. Or do you mean a more advanced one for developers?
@@EdCodes yes
you have helped me a lot! can you make a video about how to add required fields to the contact form.