Shopify Coding 101 for Store Owners & Designers - HTML, CSS, Liquid & More

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

Пікірлер: 69

  • @EdCodes
    @EdCodes Жыл бұрын

    Ready to learn more? Grab my ebook here: edcodes.gumroad.com/l/diy-shopify-coding-handbook

  • @coleaansen
    @coleaansen9 ай бұрын

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

  • @EdCodes

    @EdCodes

    9 ай бұрын

    Thank you for this comment!

  • @rav7ss423
    @rav7ss4234 ай бұрын

    You are amazing Ed, you do it in great detail, leaving no room for misunderstanding !!

  • @melihkarabacak9319
    @melihkarabacak931911 ай бұрын

    I've been waiting this content for months. Great job 👏

  • @charlottevanoorschot5642
    @charlottevanoorschot56428 ай бұрын

    Love this video! Also the house analogy and the noun-adjective-verb analogy is super clear!

  • @MyCodingDiarie
    @MyCodingDiarie Жыл бұрын

    Your videos are a great resource for anyone learning to code. Thank you for creating it!❣

  • @tavishrice
    @tavishrice4 ай бұрын

    Unreal video man, props. This is exactly what I’ve needed since I started my store 3 years ago!

  • @goaly2990
    @goaly29903 ай бұрын

    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!

  • @cathyhorvathbuchanan
    @cathyhorvathbuchanan10 ай бұрын

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

  • @aliyoruk99
    @aliyoruk99 Жыл бұрын

    Literally the only Shopify related youtuber I am subbed too and get notifications from - thanks for quality videos everytime

  • @EdCodes

    @EdCodes

    Жыл бұрын

    Thank you! I appreciate that.

  • @DavidAnthonymix
    @DavidAnthonymix8 ай бұрын

    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 !

  • @benceylan273
    @benceylan273 Жыл бұрын

    Thank you for the video Ed. I will buy your book right away.

  • @mahedihasanmahmud8329
    @mahedihasanmahmud8329 Жыл бұрын

    We will be glad grateful if you make a playlist and teach us theme development.

  • @EdCodes

    @EdCodes

    Жыл бұрын

    That's the plan. Now that I finally made this basics video, I can make other videos more advanced.

  • @jeffkoontz286
    @jeffkoontz2865 ай бұрын

    Wow, finally someone who can dumb it down for the layman. Excellent articulation and explanation! I'll definitely be purchasing your ebook.

  • @danielasame4724
    @danielasame472411 ай бұрын

    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 ofKZread. Thank you

  • @EdCodes

    @EdCodes

    11 ай бұрын

    Thank you for the kind words! Let me know if you have any questions you weren't able to find answers to.

  • @hectordelac6446
    @hectordelac6446 Жыл бұрын

    Thanks! Great video! 👏🏻👏🏻👏🏻

  • @josephmyalla3611
    @josephmyalla3611 Жыл бұрын

    Great video, just wondering how amazing your course will be

  • @semoncashmere1025
    @semoncashmere10254 ай бұрын

    Thanks for the great video! So helpful! Good luck with the chanel! x

  • @EcomGraduates
    @EcomGraduates Жыл бұрын

    great video as always! thank you for all the great content 😎

  • @EdCodes

    @EdCodes

    Жыл бұрын

    Thank you!

  • @Crickle12
    @Crickle127 ай бұрын

    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!

  • @Israrkhan-pi5ux
    @Israrkhan-pi5ux11 ай бұрын

    You are awesome sir

  • @rodzimmerman8436
    @rodzimmerman84365 ай бұрын

    Excellent tutorial. Informative and well presented. Downloaded your e-book.

  • @EdCodes

    @EdCodes

    5 ай бұрын

    Awesome, thank you!

  • @Sydneyscollection
    @SydneyscollectionАй бұрын

    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.

  • @EdCodes

    @EdCodes

    Ай бұрын

    KZread fixed the monetization issue now :). But thank you for your support, and your comment. It's really nice to hear that. All the best!

  • @Sydneyscollection

    @Sydneyscollection

    Ай бұрын

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

  • @ALMARARTEB
    @ALMARARTEB7 ай бұрын

    Wonderful video

  • @johannorena4013
    @johannorena4013 Жыл бұрын

    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.

  • @ohwilly5549

    @ohwilly5549

    11 ай бұрын

    yeah sticky add to cart! That would be cool

  • @ellielum9182
    @ellielum9182 Жыл бұрын

    Thanks for the easy-to-understand video! When is your full course being released?

  • @EdCodes

    @EdCodes

    Жыл бұрын

    I might release it in parts but definitely will have something out in July!

  • @ThinkPatchwork
    @ThinkPatchwork11 ай бұрын

    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 KZread and get monetization back!

  • @Michael_Francis629
    @Michael_Francis62911 ай бұрын

    So impressed by the tutorial, great work ED, Can I have the discount code for your ebook?

  • @mercyokor6693
    @mercyokor669310 ай бұрын

    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 KZread or ask google how I can make a particular customization. When I find the answer mostly on KZread 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?

  • @zeeshanayub7873
    @zeeshanayub787311 ай бұрын

    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!

  • @user-vg2eq3kl6w
    @user-vg2eq3kl6w Жыл бұрын

    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.

  • @ohwilly5549
    @ohwilly554911 ай бұрын

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

  • @user-hx5pm3fr2p
    @user-hx5pm3fr2p10 ай бұрын

    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!

  • @Fedgery007
    @Fedgery007 Жыл бұрын

    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.

  • @EdCodes

    @EdCodes

    Жыл бұрын

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

  • @lifegamer07
    @lifegamer07 Жыл бұрын

    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

  • @user-fg6kh5un5o
    @user-fg6kh5un5o11 ай бұрын

    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!

  • @user-fg6kh5un5o

    @user-fg6kh5un5o

    11 ай бұрын

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

  • @user-fg6kh5un5o

    @user-fg6kh5un5o

    11 ай бұрын

    THANK YOU IN ADVANCED!!

  • @danielcalhoun6766
    @danielcalhoun6766 Жыл бұрын

    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 🇩🇪

  • @EdCodes

    @EdCodes

    Жыл бұрын

    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 - kzread.info/dash/bejne/n6yJtdShnsXLmKQ.html

  • @2000pppp
    @2000ppppАй бұрын

    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

  • @pashaweb25
    @pashaweb258 ай бұрын

    Hello Ed. I have question for you. Do you know hot to convert from Cyrillic to Latin product, collections urls in Shopify?

  • @EdCodes

    @EdCodes

    8 ай бұрын

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

  • @adigitalmarketing111
    @adigitalmarketing1117 ай бұрын

    Does the E-book have codes like codes that are on your website? I mean does it have written codes for specific things?

  • @EdCodes

    @EdCodes

    6 ай бұрын

    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

  • @danieljoseph7407
    @danieljoseph74072 ай бұрын

  • @teamdreamachiever1179
    @teamdreamachiever11793 ай бұрын

    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?

  • @EdCodes

    @EdCodes

    3 ай бұрын

    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.

  • @rishabhp1762
    @rishabhp1762 Жыл бұрын

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

  • @EdCodes

    @EdCodes

    Жыл бұрын

    Depends which theme you are using. Many themes come with that ability now.

  • @rishabhp1762

    @rishabhp1762

    Жыл бұрын

    @@EdCodes any free theme has that function ? Btw I'm using dawn

  • @user-xe4ov8ri6e
    @user-xe4ov8ri6e Жыл бұрын

    make a liquid course for free for dev

  • @mose3805
    @mose380511 ай бұрын

    "Promo SM" 👉

  • @oneproduct4101
    @oneproduct4101 Жыл бұрын

    plz MAKE A CRASH COURSE FOR FREE

  • @EdCodes

    @EdCodes

    Жыл бұрын

    This is one lol. Or do you mean a more advanced one for developers?

  • @oneproduct4101

    @oneproduct4101

    Жыл бұрын

    @@EdCodes yes

  • @marionnel4176
    @marionnel41765 ай бұрын

    you have helped me a lot! can you make a video about how to add required fields to the contact form.