Best Chrome Extensions for Shopify Designers (2024)
Website Snooping Tools
1. Wappalyzer
Wappalyzer will tell you what technologies have been used to build a website. I love to check if a website is on Shopify, Wordpress, or custom built. It splits up the technology categories starting with CMS, Ecommerce, Analytics and Blog, and even includes Marketing (like if they're using Klaviyo) and Affiliate Programs. This categorization makes it super easy to find the information you're looking for. You can get a sneak peek into some of the apps a store is using.
2. Koala Inspector
The ultimate tool for web designers on Shopify is Koala Inspector. You can easily see what theme and apps a Shopify store is using. If a theme is from the Shopify theme store, you can click on the title and it will take you to the theme store link, even if the theme name has been changed. When looking at the store's apps, notice that the first few apps listed are actually advertisements and not ones that the store is really using. The extension also gives information about a store's best-selling products, and how products are priced. The app markets itself as providing useful data for dropshippers but I find a lot of valuable use for it as a web designer and developer.
Lately I've even been using the paid plan to help me provide quotes for client projects, because I'm able to estimate the store's annual revenue and take a value-based pricing approach. You can get 30% off their paid plans with code LUNA30.
3. CSS Peeper
CSS Peeper is a quick and easy way to grab font, sizing, and color information, as well as download website assets. Easily click on any website element to see what the CSS styles are applied to it, see all the colors used on the page, and all the image assets on the page too. Downloading assets is helpful for collecting inspiration, or for building portfolio pieces, but be careful of how you use these assets because of copyright laws.
Design Tools
4. WhatFont
Use WhatFont to quickly see a font's family, styles, size and color. I use this to double check that my font sizes are consistent across the site, and to double check that the correct fonts are being used since sometimes fonts (especially body fonts) can look too similar for my developer eyes to tell.
5. Fonts Ninja
For the designers crazy about fonts, Fonts Ninja will tell you all fonts used on a particular website. You can view the fonts, bookmark them for future reference, organize these bookmarks, and even there's even an optional version that allows you to install a trial version of the font. This extension was recommended to us by one of our awesome community members over in our Instagram stories.
6. Colorzilla
Use Colorzilla's eyedropper tool to select the HEX and RGB color code from anywhere on the page. It allows you to select a point sample, or create an average color from a larger square like in an image, and then copy the color code. It also has color history and a CSS gradient generator. If you want a simpler version that only does color picking, try Eye Dropper.
7. Page Ruler Redux
Page Ruler Redux allows you to measure the size and position of screen elements. Enable "element mode" and quickly see the HTML tag, class names, parent and child, and size of an element. The ruler is especially helpful when images need to be a certain size to fit the screen the way you want them to, such as a hero image. Before this plugin, I was using my Mac's screenshot tool to measure the pixels across an element because I didn't know what else to use.
Development Tools
8. Responsive Viewer
Test the website you're building on different screen sizes and devices using Responsive Viewer or Mobile Simulator. You can show multiple screens at once to help you save time when testing. You can add screen sizes based on device name, or even create custom screen sizes. No need to literally keep your old android in a drawer for testing purposes. Or am I the only one who has done that?
9. axe DevTools
Accessibility has become a more important topic as more and more content moves online. axe DevTools allows you to find and fix website accessibility issues. This app actually runs in the browser's Developer tools to run an analysis on a webpage. Run the test on a webpage or component of a page to see a list of issues that may include lack of alternative text on images, or color contrast issues. Click highlight and it will show you exactly where the issue is occurring on the page.
10. Lighthouse Website Audit
Lighthouse is Google's open-source website auditing tool. It can audit websites for Performance, Best Practices, SEO and Accessibility, and can do this for both desktop and mobile. You know that speed score you see under your theme on the Shopify dashboard? That's calculated by Lighthouse. Once it generates your report, the tool gives recommendations on how to improve your score. I personally find the recommendations difficult to understand and implement and feel that a lot of it is out of my control, but I do find it useful to see which apps are affecting my page speed the most.
11. SEO Meta in 1 click
A tool to help you make sure you haven't forgotten about the SEO of your website. SEO Meta in 1 Click shows you all your page headers in order of their appearance in HTML. I was shocked to find out that we had 3 H1s on our home page despite thinking we had intentionally only put 1. It also tells you how many and which images on your page are lacking an alt tag and title, and displays your title and description length, deciding if it's optimal or not with a red or green color.
Project Tools
12. GoFullPage
Create a full-page screen capture with GoFullPage, then download it in PNG or PDF form. This is great for showcasing your clients' sites in your portfolio, taking before and after screenshots, and for saving design inspiration. It's super simple and useful.
13. Image Downloader
Use Image Downloader to quickly download all image assets from a website. I love how you can filter which images you want based on type or size, and click once to download them all into your chosen folder. This is such a time saver when doing a website redesign and your client hasn't yet given you all their image assets.
14. Loom & Vimeo Record
Wouldn't it be so much easier to record what we want to explain instead of spending 30 minutes writing an email that's still going to be potentially misunderstood? Loom and Vimeo Record can record your screen, voice and camera so that you can walk your client through certain steps, explain your ideas and provide website training. I personally love it for being able to clearly communicate with others, without needing to schedule a specific time to meet. Loom does this best, but with it putting more limits on its free plan, Vimeo Record has become another option that's currently available for free.
BONUS: Loremify
Ok, this one isn't a Chrome extension but I just had to include it because I love the tool so much. Loremify is an app for Macs that allows you to quickly copy Lorem Ipsum text of any length with just one click. This is great for designing and building websites when you don't have the copy yet.
Hopefully you've learned about some new useful browser extensions that will help you in your work!
Hana Drdla
