Chrome Inspector Tutorial for Shopify Stores - Must-know skill!
ฝัง
- เผยแพร่เมื่อ 2 มิ.ย. 2024
- You don’t need to be a developer to use Chrome Dev Tools (AKA Chrome Inspector). The basics are quite simple and it's a very underrated and useful tool for anyone that has a website or online business.
I'll show you how to check fonts and colors, edit text on a live site, edit the styling of your live site and preview various changes. You can also edit your website on mobile, and I'll teach you the basics of responsive design - making adjustments for mobile only.
These skills are the same for all websites, but I'll be showing you with Shopify examples in mind.
🔗 LINKS MENTIONED IN VIDEO
1. shop.ed.codes/
2. Tabs Section - shop.ed.codes/l/tabs
3. Chopify Coding Ebook - shop.ed.codes/l/diy-shopify-c...
👉 RELATED VIDEOS
- Shopify Coding 101: • Shopify Coding 101 for...
📢 STAY UPDATED
Subscribe to my newsletter: ed.codes/newsletter
TH-cam won’t always show you my latest videos, subscribe to be notified and see other content that I don't post on TH-cam.
🙏 SUPPORT THE CHANNEL
Buy me a coffee - www.buymeacoffee.com/edcodes
Patreon - / edcodes
🛠 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
All listed on my website - ed.codes/tools
📚 MY SHOPIFY CODING EBOOK
ed.codes/shopify-coding-handbook
Learn HTML, CSS and Shopify Liquid from the beginning and specifically for Shopify.
👨🏼💻 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:
ed.codes/community
⏭ CHAPTERS
00:00 Intro
01:22 Note on browsers
01:40 Get info about fonts & colors
02:50 Editing text
04:10 Checking applied CSS
05:34 Editing CSS
06:36 Deleting elements & popups or iframes
07:44 Preview on mobile devices
10:01 Mini-project using DevTools & CSS
16:30 Learn more
#Shopify #DevTools #webdevelopment
I really appreciate your Shopify content. Can you make a practical video on website speed optimization, maybe showcasing 2-3 different websites? It would be super helpful for us beginners. Thanks a lot!
I learned some new things! Super nice Ed, thank you! It would be cool to see a video where you completely redesign a product page. So that we can see what all the possibilities are and how to realize them.
Great video! I finally understand the DevTools better! Thank you
Great video! Thank you.
Awesome, thank you!
Another fab video! You should consider doing a skill share class (or similar) as you’ve got a great way of explaining things clearly. Really enjoy watching your videos!
Thanks! What would you like me to cover in a class?
@@EdCodes probably just an introduction to Shopify coding: html, css, maybe Java? I haven’t downloaded your book yet but I imagine something along those lines? A lot of people find it easier to follow video tutorials rather than reading.
Great tutorial
Thanx Ed
Awesome!
How to Block MS Edge's Visual Search button on images? Not from the Browser side, but development side? My client said they'd pull the job if Shopify can't block those buttons. Good video!
You need to explain to your client that it's a controversial feature of MS Edge that developers have no control over. Many people are upset that it cannot be switched off. And that luckily only around 5% of people use MS Edge. Chrome is much more popular, followed by Safari.
That said, you can get around it using point-events: none; on the element itself. This thread has some good examples - stackoverflow.com/questions/71731966/preventing-edge-from-showing-the-visual-search-icon-when-users-hover-over-an-ima
@@EdCodes Thank you very much! The point-even thing worked great. I work on a Mac and Windows, and I use about every browser except Edge. So this was news to me. IMO MS has always had the worst browser. I was hopeful when Edge was announced and it being based on Chrome, but they figured out how to make it horrible.