The Podcast
Chrome Extensions
- Chrome Extensions Store
- ShopifyFD Dashboard Tool
- Out of the Sandbox Content Creator
- Shopify Bulk 301
- ColorZilla
- Edit This Cookie
- Facebook Pixel Helper
- Grammarly for Chrome
- Gyazo
Help the Podcast
Transcript
Hello, Scott Austin here. And in this episode, I'm going to talk about tools that you can add to your chrome browser that are going to help you build and manage your Shopify store. Now before I get into the tools, let me talk a little bit about chrome and the other browsers out there. So when I'm building a store, I always test what it looks like to customers on multiple browsers. So I'll look at the store on chrome, Firefox, Safari, and Internet Explorer or whatever Microsoft's calling it's browser these days. And then I'll also look at it on the phone in chrome and safari. So I'm always testing a website on multiple browsers. That said, my primary browser that I use when making a website is chrome. And one of the reasons is that chrome has a lot of built-in developer tools that help me analyze a site while I'm building it. And I also have the ability to add what's called extensions to chrome. And these extensions are made by third parties to add functionality to the chrome browser.
So let's talk about where you find your extensions in your chrome browser. If you've got the chrome browser open, I'm going to call the section where you type in a URL, the address bar. And to the right of the address bar, there may be icons already displayed. Those icons are for extensions. And then there's a menu. If you go at the top to the right of the address bar, there's three little dots. You open up a menu there and click on more tools and then extensions, that'll bring you to a page inside of chrome that shows all of your extensions and you can manage them by enabling them, turning them on and off or removing them and seeing more details about them and what permissions they have. And Chrome provides a web store that you can access. I'll include the link to it in the show notes that you can access and see all the different extensions that are available and download them and add them to chrome.
So here are eight different chrome extensions that I recommend for you. I'll include links to all eight in the show notes. Now the first three tools are Shopify specific. And the first one is called Shopify FD dashboard tool. It's got a 4.5 star rating by 40 people. And what this tool does is add functionality to your Shopify Admin. So when you're logged into your Shopify admin and click on the extension inside the chrome UI, it actually adds functionality onto the Shopify admin pages for you. And some of those are really helpful. There's a really long list of things that it does. The three things that I use it for most are metafields, copying and pasting shipping rates and showing variant ids.
So metafields are a really powerful tool that I use a lot in products where I augment the product data by adding metafields. And there's a bunch of ways that you can edit metafields, but this extension allows you, when you're on a product page as click the button, it adds a new menu to the page and allows you to see and edit and add metafields for that product and it's super helpful. You can even copy them from one product to another.
And sometimes for a product, I'll have to find a variant id. For example, if I want to create a button that adds a product straight to the cart, I'll need the variant id for that. And in the Shopify Admin, the variant id is not shown. You actually have to go into the Shopify admin on a product page and then add a .XML at the end of the URL, look at the XML view of that page and then search through all the XML code to find the variant Id. So the ShopifyFD Dashboard Tool allows you to see that variant id much more easily. Now this is a free app developed by Freak Design down in Australia. If you have ever gone to the Shopify forums, you see that they're very active and are very much into helping the community. They developed this app for free. They're in the middle of redesigning the extension because Shopify is changing the underlying technology of the Shopify admin. So the extension has some problems working right now, but there's a new version coming out soon.
Now, the second extension that I want to talk about is called Shopify Bulk 301. 301 redirects are something you can add to your Shopify store when you're in the Shopify Admin by going to online store and navigation. Up the top of the page, there's a link for URL redirects. And you can see your redirects, add or remove them and you can also bulk upload new redirects. What the Shopify Bulk 301 extension does is allow you to add or even edit the existing redirects much more easily than doing it in the bulk upload through CSVs. So with the redirect button, you just click on it when you're on the redirect page. And it brings up a little dialogue box where you can call up all the existing redirects or just copy and paste a list of redirects into your store. Now you're not going to have to do bulk editing of redirects very often. I usually do this when I'm migrating an existing store to Shopify, so like from big commerce or WordPress or some other platform. And I want to redirect all the old page URLs to the new URLs. Do I only use this functionality once per store during migrations, but it's really helpful when I'm doing those things. Now this app is rated five stars by eight people and it's also free for you to download and use.
Now the third Shopify specific extension I want to talk about is useful for those people that use a theme that's created by Out of the Sandbox. And you've already heard me talk about how my preferred theme in Shopify is called Turbo and it's made by out of the sandbox. And this extension is called out of the sandbox content creator. Once you add that extension to your chrome, what it does is gives you a menu. You click on the button and a menu opens up. It allows you to quickly select an element you want to add to a page, let's say tabs or accordion or a button or a divider. And it just gives you the code for that so that you get that code and it's you know, generic liquid code for that element. And you can paste that into your liquid code and have that element show up. It's a real quick and easy way to add some functionality to your pages while you're editing your out of the sandbox theme. And this is also a free extension provided by out of the sandbox.
Now the fourth chrome extension I want to talk about is not specific to Shopify, but it's really useful for me in managing and building Shopify stores. This one is called ColorZilla and it's rated 4.5 stars by over 2,500 people. And with ColorZilla you can click on any element on a webpage and get the color code of it. So, for example, you may want to know the color code of an element on your page quickly and easily. Instead of going into your theme and finding out wherever it's set, you can just have this little eyedropper functionality, hover over any element on the page, click it and it'll give you the color code. There's lots of powerful tools beyond that that it does for you. You get to do things like set how that color code is going to be presented, whether it's through RGB, Rgba and hex and other ways to specify colors. I find this tool especially helpful when looking at websites that my clients like, you know, for their color palettes. And like I really liked the color Palette of this website. I can use ColorZilla to select on the different elements on the page and look at what their overall color Palette is. And this is a free extension that you can download from the extension store.
The fifth chrome extension is called edit this cookie. It's rated 4.5 stars by over 11,000 people. And what this extension is is a cookie manager. So when you're on a webpage you can click on the extension and it'll tell you all the cookies that that webpage is using. So I find this really useful in my Shopify store to see what's going on in cookies that are being set and what are setting those cookies. Because Shopify will set some, your theme will set some, and different apps will set them. So it's a good way to troubleshoot what's going on and seeing how the different cookies are being handled by all the different things that are adding cookies to your website. It's also really useful when you're on your website and you want to see what a fresh user sees on the website. Like you know the popups and all that kind of stuff that you don't get after you go to the website the second and third time because there's a cookie set that says don't show that pop up for another two weeks or whatever setting it is set for. So with edit this cookie extension, you can go in and just delete all the cookies for only the website that you're on. And then see what the fresh user experience is for your store. And this is also a free extension.
Now the sixth extension, it's called the Facebook pixel helper. And this is rated four stars by over a thousand people. And this is provided by Facebook. And it's a troubleshooting tool that helps you see what is going on with the Facebook pixel on your site. So if you're having troubles with your Facebook data for your ads on your site, the Facebook pixel helper will help you figure out where the pixels firing, on what pages, and what it is firing for. Like is it doing an add to cart action, is it doing a page view action? And it's also really good cause it'll show you if there's more than one Facebook pixel on your site. And I see this as a frequent problem in client stories where they add the Facebook pixel through the Shopify admin and somewhere along the line the Pixel got added a second time straight into the liquid code of the theme. So there'll be the Facebook pixel firing twice or even two different Facebook pixels. So this extension is a really good way and a really quick and easy way to see what Facebook pixels and actions are being fired on every page in your Shopify store.
Now the seventh chrome extension that I want to recommend is called Grammarly for chrome. And it's rated 4.5 stars by over 36,000 people. And what Grammarly is is a grammar and spell checker that you can use inside of your browser. You're probably used doing a spreadsheet or we're processing application, getting recommendations or notifications from whatever tool you're using. It says, Hey, this word is misspelled. Or you're using the wrong version of there in this space. Or check the grammar of this thing. What Grammarly does is bring that powerful functionality into your web experience. It's really nice because when you're in your Shopify admin and looking at something like the product description, which is inside of the box, it's called the RTE, the rich text editor of Shopify. What Grammarly does is in that text box, it looks at all the content that's in there and spell checks everything for you and grammar checks it for you and gives you notifications. And its really quick to click on it and say, Oh yeah, I did misspell that. Please use that spelling instead, or, yeah, I like the way that Grammarly is recommending that I word that. Go ahead and change that. Grammarly has two levels, a free level, and a paid level. I only use the free level, which gives me spell checking and lite grammar checking. And their paid level, which I've never used. But I believe what it does, it gives you much more advanced recommendations on how to word things. But the fact that it works right inside your Shopify admin on all the inputs that you're putting in is super helpful. And I highly recommend Grammarly for anyone who's on Shopify.
And the eighth and last extension that I'm going to recommend is called Gyazo. And it's rated four stars by over 200 people. And what this extension does is captures and shares images of pages inside of your browser. And I find this an absolute essential tool from my work as a Shopify expert working with clients. You know, the old adage of a picture tells a thousand words and that's absolutely true. So with my clients, I'm always trying to explain something or show them something that I'm doing on their website or in the Shopify admin. And it's really helpful for me to just take a screenshot of the page and that's what Gyazo does for me. It takes a screenshot inside of chrome and then stores that on their servers and then it gives me a link that I can send off to anybody in an email and say, hey, look at this and point to what I'm showing them. Now there's a free version of Gyazo where you can do a screenshot and share it with people and that I think that lasts for a certain amount of time. And there's a paid version. That's what I do as the paid version where you get to keep your screenshots forever on their servers, but then you also get to edit them. And that's really helpful for me. So I'll take a screenshot and then I'll edit that screenshot on the Gyazo servers and put a box around something to say to my client, Hey, this is the box I'm talking about right in here. What do you think of this thing? Or put an Arrow to it and point at it and that kind of stuff. So it's a really useful way to communicate with people about your Shopify store and how it's looking to customers on the web without having to use lots and lots of texts to try to explain things, which can get really confusing. You just take a picture, draw a couple of arrows and boxes, and it's easy for the someone on the other end of that email to understand what you're trying to explain to them.
So that's the eight chrome extensions that I highly recommend you add your chrome and use while you're building and managing your Shopify stores. Thanks for listening.