Chrome Inspector Tutorial for Shopify Stores - Must-know skill!

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

👉 RELATED VIDEOS

📢 STAY UPDATED

Youtube won’t always show you my latest videos, subscribe to be notified and see other content that I don't post on Youtube.

🙏 SUPPORT THE CHANNEL

🛠 CODE 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

📚 MY SHOPIFY CODING EBOOK

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.

Join "Shopify DIY" on Discord
Chat with me and other store owners and developers:

⏭ 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

[healthtips]

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!

[BooQui]

Awesome! I've used the Chrome Inspector before (via trial and error), but I learned a ton from your video. Thank you!!

[charlottevanoorschot]

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.

[ShaunPotter-ug]

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!

[JoachimFaria]

hello, Ed thank you for this video. i learned a lot. I do have a question. with the chrome inspector can you find the code that is in shopify so that the changes you dit on chrome inspector you can do those on shopify for a better website? looking forward to hearing from you!

[bilo]

Great video! I finally understand the DevTools better! Thank you

[DanaLeeGibson]

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!