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.

Trello project management tool

Asana

Asana is an easy-to-use tool for teams. They price based on user count so it might get expensive for larger teams.

Asana project management tool

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.

Flow project management tool

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.

Basecamp project management tool

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.

Wireframe.cc eCommerce designer tool

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.

Paper eCommerce designer tool

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.

Marvel eCommerce designer tool

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.

InVision eCommerce designer tool

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.

Photoshop eCommerce designer tool

Sketch

Sketch is relatively new, but they’ve gathered a large following quickly.

Sketch eCommerce designer tool

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.

Sublime Text eCommerce developer tool

Brackets

Brackets is an open-source, lightweight text editor with live previews of your code and preprocessor support.

Brackets eCommerce developer tool

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.

LemonSync eCommerce developer tool

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.

Related posts:  11 Crazy Ways to Design Your eCommerce Page on Instagram

Envato marketplace for eCommerce developers

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.

Codemyui eCommerce developers tool

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.

Zurb Foundation

Zurb web framework

Twitter Bootstrap
Bootstrap web framework

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.

browser sizing tool

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.

HTML validation toolBrowser 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.

Browser Shots browser testing

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.

Firebug debugger

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.

UXCheck eCommerce developer tool

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.

jsFiddle code testing

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.

Pingdom speed test tool

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.

image generator

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:

css sprite generator

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.

Diff Checker for code checking

 

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!