Back in the day, eCommerce sites used to be built from scratch. Projects would take months, and cost 5-figures and more. Expensive and time-consuming for sure.
In the modern era, platforms like LemonStand make things incredibly easy. In fact, with some platforms you can have a store up and running in 15 minutes. However, it still behooves retailers to customize their store. After all, copycats never last long in business.
So while platforms make things faster, there’s still a need for designers and developers. And to design and develop a new store, you need tools.
In this post, we’ll look at 27 tools to help eCommerce developers and designers create amazing online stores.
Project Management
eCommerce projects are made up a thousand moving pieces between design, features, testing, SEO, and overall client communication. The best way to manage and track what is getting done, use a project management tool. Trello, Asana, Flow, and Basecamp are all tried and tested project management software that will help you get your job done.
Trello
We use Trello here at LemonStand. The card-based interface is great for organizing tasks as to-do lists and quickly visualizing project workflow.
Asana
Asana is an easy-to-use tool for teams. They price based on user count so it might get expensive for larger teams.
Flow
Flow’s beautiful interface and conversation based task management make it great for distributed teams and clients. They too are priced on user count.
Basecamp
Basecamp is priced based on active projects, with unlimited users in each tier, which is great if you’re a large agency. Plus everything is managed under one account, which means new team members or clients don’t need to sign up for it.
Prototyping
When starting out a new eCommerce project, it’s best to quickly mockup designs and get everyone on the same page. Prototyping tools help you do this quickly so that you can focus on getting the requirements right.
Wireframe.cc
This is a minimal tool that allows you to create wireframes for free.
Paper
Paper is a really cool tool that allows you to draw your designs on an iPad. This is great for making quick sketches and getting a really early prototype out there.
Marvel
Marvel is a free prototyping tool that automatically syncs with Dropbox, making it easy to share prototypes with clients and get quick feedback. They also have a direct integration with Sketch.
InVision
You can’t talk about prototyping without mentioning InVision. This one is probably the most popular and robust tool for prototyping and coordinating with clients.
Design
When the prototypes are done and signed off on, it’s time for the actual design. There are two major contenders here.
Photoshop
Adobe’s Photoshop has been around for a long time and is the most widely used tool for creating designs.
Sketch
Sketch is relatively new, but they’ve gathered a large following quickly.
Development
In any eCommerce project, time is the most valuable asset. Typically, the actual development takes a lot of time. But there are tools that developers can use to code faster.
Sublime Text
Sublime is a powerful text editor with numerous add-ons, extensions and shortcuts to help you speed up your development.
Brackets
Brackets is an open-source, lightweight text editor with live previews of your code and preprocessor support.
LemonSync
LemonSync is a command line tool to work on LemonStand themes locally. It makes it easy for multiple developers to work on the same theme together.
LemonSync will listen for changes in the folder you configure, and automatically push updates to your store “editing” theme. This is helpful if you want to add your theme under version control or prefer to work locally rather than in the LemonStand UI.
Envato
Envato isn’t really a tool, but it’s an amazing resource for developers and designers who don’t want to reinvent the wheel. It’s a marketplace for themes, plugins, code snippets and other assets that you can use to quickly put together a custom theme of feature for your store.
CodeMyUI
CodeMyUI is a cool project that was recently trending on ProductHunt. It’s a curated collection of code snippets like CSS animations that you can use in your eCommerce project.
Frameworks
While you laboriously build out features and functionalities, the last thing you want to focus on is which framework you should place all of them into. Luckily, here are two web frameworks that have already factored in design best practices, responsiveness, and modules to make your development as quick as possible.
Testing
While eCommerce platforms like LemonStand have already been thoroughly tested, if you’re going to make extensive customizations to your store, it makes sense just to double-check everything. After all, it’s better to be safe than sorry. Here are some tools you can use to test your store.
Browser Size
eCommerce customers come from all types of screen resolutions. The last time we checked, there were exactly one zillion different variations of screen sizes. That makes your job of developing an eCommerce site exactly 1 X 1 Zillion harder. Use this browser sizing tool to set your browser window to any dimension you desire so that you can test how it will look and function.
Markup Validation
Code breaks, features, and functions have bugs, and often just because of some wonky validation error. Use w3c’s markup validation services to quickly check your web documents for any HTML, XHTML, CSS, and other errors.
Browser Shots
On top of the 1 zillion screen resolutions, there are another 1 zillion browsers and browser versions. Test your browser compatibility with Browser Shots and get a screenshot of how your eCommerce site looks on each one. It’s especially fun to test it on Netscape and IE.
Firebug
Site creating is just as much about problem-solving as it is about writing new code. And that means a lot of debugging and testing. Firebug is a free add-on for Firefox that allows developers to inspect, edit, and troubleshoot code their HTML, CSS, and Javascript code.
UXCheck
UXCheck is a free tool that tests your site for usability issues using Jakob Nielsen’s ten heuristics that all websites should adhere to.
jsFiddle
When all you want to do is to test out an idea or work on a bug instead of spending minutes setting up your environment, use jsFiddle. It gives you a coding environment that combines HTML, CSS, and Javascript in an online sandbox.
Pingdom
With the new search ranking changes from Google and proliferation of eCommerce visitors coming from mobile phones, site speed has become an important factor for websites. Ensure that your eCommerce site is up to par and is optimized for any type of connection speed.
Miscellaneous
Fake Image
When developing eCommerce sites, you don’t want to run around searching for images to fill up the space of product images. Not only is it time-consuming, you’ll also have to tediously resize each one. Fakeimg.pl is a free tool that will generate a placeholder image to the exact dimensions that you require. You can also specify color and the text.
CSS Sprite Generator
Especially for eCommerce sites, where you could have thousands of products and pages, you will often be reusing many of the same image assets. A good way to improve your site speed is to combine your image assets into one larger image and reduce the need to download multiple files. Use one of the CSS sprite generators below:
Diff Checker
Working with multiple members of a team means that code gets changed pretty often. If you want to quickly see the differences between files or blocks of text, use Diff Checker.
What Tools Do You Use?
So what are your favorite tools for designing and developing eCommerce sites? Do you use any of the above, or do you have other suggestions? Let us know in the comments!