Shopify is an exciting commerce platform for developers – with over 275,000 active merchants, it’s a vibrant community that presents a ton of opportunities for those looking to pick up freelance gigs or earn some passive income. As a front-end or back-end developer, you can help merchants with theming, store design, development, apps, photography, and so much more.
With so many options in front of you, it can sometimes be difficult to know how to start working with Shopify. Luckily, there are countless free resources out there to help you get started with the platform, and streamline your workflow.
Here’s a rundown of some of the best free Shopify tools to help you with your client work.
You might also like: 5 of the Best Prototyping Tools to Test Out Your Web and Mobile Designs
Creating and selling a Shopify App is a powerful method for adding new features, services, and plugins to merchant’s online store. Making your Shopify App look like native components can be time consuming, luckily that’s where UptownCSS comes in.
UptownCSS is a beautiful front-end framework for Shopify App development. It’s a semantic toolkit designed to help developers create responsive Shopify Apps. It’s easy to get started with UptownCSS as well — all you need to do is reference it:
link rel="stylesheet" href= "uptown.css"
UptownCSS will provide you with a grid, layouts, cards, typography, buttons, icons, forms, and so much more that will make your Shopify App look like a native Shopify admin component. You can learn more about Uptown CSS on their website and Github page.
ShopifyFD is a bookmarklet that displays hidden Shopify admin features. A few of the ShopifyFD features include inline metafield editing, bulk metafield updates, display variant IDs, toggle tags, shortcut buttons, and bulk asset uploads for themes.
This is one of the most handy tools that I use on a regular basis when working on a Shopify store. My favorite feature is the inline metafield editor, because I don’t need another browser window open or app running to edit a product’s metafield. Instead, I can do all of this inline on the product admin page. To download and learn more visit ShopifyFD’s site.
It’s good practice to always backup your work and use git to track code changes. With Beanstalk’s integration with Shopify, you can now use git to build and update Shopify stores. With Beanstalk you can create new or import existing Shopify themes as repositories for your development team. You can also set teams and permissions by defining a repository and branch level permissions.
Beanstalk allows you to set notifications, email digests, compare views, and view a detailed history of commits and files. When your theme changes are ready, you can update the themes automatically on every push, or manually after changes have been reviewed.
Check out Beanstalks Shopify integration video walkthrough to learn more.
Shopify comes bundled with a powerful online theme editor, but have you ever wanted to work locally with your favorite code editor? Theme Kit was developed in-house by Shopify’s theme team and is a cross-platform tool for building Shopify Themes. A few notable features include:
- The ability to upload themes to multiple environments
- Fast upload and download speeds
- Watch for local changes and upload automatically to Shopify
- Works on Windows, Linux, and OS X
We recently published an article on how to get started with Theme Kit — check it out to learn more.
You might also like: 15 Chrome Extensions That Will Make You a More Productive Web Designer
The backbone of all Shopify Themes is Liquid, a templating language that uses a combination of tags, objects, and filters to load dynamic Shopify content. We recently released a revamped Liquid cheat sheet, which you will find helpful as you build themes for clients. If you’re new to Liquid and theming, the cheat sheet will help you quickly reference any Liquid tags, and will become an integral part of your theme development workflow.
Timber is a front-end framework that makes building Shopify Themes quick and easy. It’s easy to pick up, especially if you have ever used the front-end framework Bootstrap before. It can be used by theme creators of any skill level for themes of any scope. Seasoned pros and newbies alike can benefit from the starter templates, Liquid markup, modules, and CSS frameworks provided in Timber.
Timber’s features can expand using Twigs, a collection of useful assets such as testimonial showcase, password page with countdown, popup AJAX subscribe form, news with feature images and videos, and much more. Learn more about using Twigs with Timber, by visiting their site.
Everyone likes getting a head start on a project, and with the free Shopify Themes available to you, it’s crucial that you take advantage of them to streamline your workflow. Many of the free themes were created in-house by our talented Themes team at Shopify. This means that every line of code has been optimized and these themes come bundled with advanced features. You can also use the free themes to copy and paste code, to recreate features in your custom themes.
Furthermore, many talented partners have developed free apps that extend the functionality of Shopify stores. For example, there’s an app to edit metafields, sync email lists to marketing emails, optimize SEO, add product reviews, add an announcement bar, and more. You can browse the free Shopify apps here.
Powerful Shopify resources to add to your tool belt
As designers and developers, it’s important to look for resources that can help us perform our duties more efficiently. The Shopify Web Design and Development Blog is constantly releasing new tools and resources to help you on your Shopify journey.
Want to learn more about building themes for Shopify or your clients? Check out our comprehensive list of articles on Shopify Theme Development as well as our tutorials on Learning Liquid for Shopify.
You might also like: 9 Tools for Website Accessibility Testing