While tools can’t replace the foundational skills you need to be a great developer, they can improve your workflow and help you to be more efficient. Every trade has its tools, so we’ve compiled a list of the best developer tools and Google Chrome extensions for Shopify experts.
Shopify Liquid Cheat Sheet
While Shopify’s Liquid Reference is great for an in-depth look at Liquid, the Cheat Sheet is much easier to navigate while customizing a theme. This interactive reference gives you an at-a-glance look at Liquid basics, tags, filters, and objects. There is even a search feature to find exactly the code you need in record time.
Shopify Code Examples
Shopify created a library of code examples for popular theme components. This resource is great for those who learn by example. The library covers seven categories, from blog and navigation elements to products and collections.
Developers can add examples directly into their theme to build and customize themes faster and more reliably. Once you’ve mastered these Liquid basics, Shopify has a list of tutorials for implementing more advanced modifications.
Theme Kit
Shopify’s online theme editor is great for quick and simple edits to a theme but has its limitations. The best practice when modifying a theme would be to work locally with your favorite code editor. Shopify created Theme Kit for building or editing Shopify themes using a local code editor.
Developers can watch for local changes to theme files, upload automatically to Shopify, and track changes with Git. Theme Kit can be used to connect with an existing theme or to create a new theme from scratch.
Follow these 3 simple steps for setting up a local Shopify theme development environment using Theme Kit.
Wappalyzer
If you’ve ever wondered what CMS a website is using, then Wappalyzer is for you. Once you’ve determined the site is using Shopify, you can use other Chrome extensions to determine what theme a store is using. Wappalyzer goes beyond just CMS detection, it uncovers any analytics tools, ecommerce platforms, payment processors, JavaScript libraries and more.
Koala Inspector
Koala Inspector is a comprehensive inspection tool for Shopify stores. This is the ultimate tool for gaining insights into eCommerce competitors. Discover the theme and apps a store is using, their best sellers, monthly traffic and sources, and more.
Shopify Theme Search by Bold
If you’re modifying a theme’s code with the Shopify theme editor, it can be a challenge to find all instances of a certain element or string of text. The theme editor’s search feature only searches the text within one file at a time, not all files within a theme. That’s where Bold’s theme search tool comes in handy! It allows you to easily search for elements like “product.title” and highlights all the files that contain this text.
Mechanic
Why reinvent the wheel when you could draw from a library of 280+ automations? Mechanic is a development platform that features automation tasks that you can plug directly into a Shopify store. It helps to speed up your workflow and solve problems that would otherwise require an app.
You can do things like hide out-of-stock products, email customers when tagged, ask for reviews a week after order fulfillment, and more! There is a bit of a learning curve but they have a free Slack workspace and rich documentation to help you make full use of the tool.
Metafield Editors
Save yourself the headache of using multiple custom Liquid templates to show unique data and use metafields to store information. Shopify metafields let you add additional information to products, collections, orders, blogs, and pages.
There are several apps in the Shopify App Store than you can use to manage your metafields. Some apps like Custom Fields even have a Google Chrome extension that lets you edit field values in context for a seamless admin user experience.