E-Commerce Design Resources: The Ultimate Round-Up
E-commerce design requires much of the same design knowledge and skill as any other type of web design. The pages are built from many of the same elements – headers, footers, columns, graphics, and text, among other things. But there are additional elements that need to be considered, from both a design and usability standpoint. Site architecture is often more complicated, with products sometimes falling into multiple categories. Product pages need to be laid out in a way that makes it easy for customers to see exactly what it is they’re getting. And the checkout process needs to be as simple and streamlined as possible while still capturing necessary information and encouraging repeat business. Overall, e-commerce design takes a bit more planning and care than simpler website forms.
A good e-commerce design will guide customers through finding the product they’re looking for through the end of their purchase. It will make them comfortable making an online purchase in general, and specifically from your site. And it will do so in a way that’s as user-friendly as possible. Design can play a huge part in this process, as a good design will guide them through the process seamlessly.
Below is a roundup of more than 100 e-commerce site resources. There are sources to inspire you, a collection of excellent shopping carts and e-commerce platforms, a ton of stock icons you can use in your designs, and a few tutorials to help you out. We’ve even included some ready-made e-commerce templates that you can customize and that can be used with or without a CMS.
1. Inspiration
The first place to start with any new website design is with inspiration. Below are some great roundups and collections of inspiring e-commerce designs to get you thinking.
General Inspiration
20 of the Best e-commerce Websites – A roundup of excellent e-commerce site designs from Tutorial Blog.
Cart Craze – A gallery that showcases only e-commerce site designs.
23 Excellent Examples of How to Design Online Stores – A great roundup of fantastic e-commerce sites from InspectElement.
20 Well Designed E-Commerce Websites – A showcase of site designs from Dzine Blog.
50 Inspirational e-commerce Website Designs – An awesome showcase from Vandelay Design Blog.
35 Excellent e-commerce User Interface Designs – Another great e-commerce design showcase from Vandelay Design Blog.
Call to Action Buttons
107 Add to Cart Buttons of the Top Online Retailers – A roundup of add to cart buttons from some top online stores, as well as some analysis.
80 Examples of Add to Cart Buttons for Design Inspiration – This is a phenomenal collection of add to cart buttons assembled by Six Revisions.
20 e-commerce Add To Cart Buttons For Your Inspiration – Another excellent roundup of real-world examples.
"Add to Cart" Button Showcase – A post from Vandelay Design Blog that showcases a variety of add to cart buttons.
2. Shopping Carts and e-commerce Platforms
Unless your e-commerce site has very, very unique needs, you’ll save yourself a lot of time by using a ready-made shopping cart or e-commerce platform. Below are some of the best, many of which are free, and some of which will work alongside other CMSs.
Stand-Alone Carts
PrestaShop – A free, open-source, scalable shopping cart with an intuitive interface.
OpenCart – A free, PHP-based, open-source shopping cart that includes support for product reviews, automatic image resizing, and downloadable products.
Magento – An e-commerce platform that includes both free community versions and paid enterprise versions.
CubeCart – A shopping cart with two versions available, one of which is free.
Zen Cart – A free open-source shopping cart with free add-ons available.
osCommerce – A free and open source shopping cart that powers more than 225,000 online stores around the world.
Digistore – A free, open source shopping cart built on osCommerce.
StoreSprite – A free and powerful PHP/MySQL shopping cart that’s easy to use.
BossCart – A PHP-based shopping cart with free and premium versions available.
FatFreeCart – A copy-and-paste shopping cart solution that works with PayPal or Google Checkout and doesn’t require you to sign up for an account or install anything.
Plugins
WordPress e-Commerce – A free, open source plugin for WP with free and paid add-ons.
Shopp – An incredibly easy to use, premium shopping cart for WP.
Ubercart – A shopping cart plugin for Drupal 5 or 6.
Drupal e-Commerce – An e-commerce plugin for Drupal that works with PayPal, Authorize.net, and other payment systems.
VirtueMart – A free shopping cart plugin for Joomla.
Seber Cart – A small, easy to use shopping cart plugin for Joomla.
Joomla jQuery Cart – jCart is an easy-to-install and customize, free Ajax shopping cart.
3. Stock Icons and Design Elements
There’s no sense in reinventing the wheel. Rather than creating all of your icons from scratch, why not see if there are some stock icons out there that suit your needs? Below are dozens of great options, as well as some general design elements (like pricing tables) you can use on your site.
Stock e-commerce Themes
35 Free High-Quality E-Commerce Templates – A great roundup of premade e-commerce themes, most of which can be adapted to meet your own needs, from Smashing Magazine.
25 Magento Templates for Your E-Commerce Business – Another great collection from Smashing Magazine of Magento templates.
20+ Best e-commerce (WordPress Themes, Templates, Icons, Flash Sites) Collection – An excellent collection of templates and other design elements.
The Clothes Shop Theme – A plugin-free WordPress online clothing store theme.
The Furniture Store Theme – A plugin-free furniture store WordPress theme.
enVirashop – A plugin-free, flexible e-commerce theme for WordPress.
wpShop Reloaded – A flexible WordPress e-commerce theme with two child themes.
RGBSTore e-commerce – An e-commerce-ready HTML template that can work with Magento, osCommerce, Zen Cart and others.
Boutique – An elegant e-commerce HTML template.
Sancart – A simple OpenCart e-commerce template.
OScomm E-Commerce Template – An e-commerce HTML template.
ClassyShop – An e-commerce template built on the 960 grid system.
Store Theme – A theme from Templatic that turns your standard WP installation into an online store.
Crafty Cart Theme – A great, free WP theme that turns your WP site into an online store.
SimpleCart(js) – Another free WP theme to turn your site into an online store.
Market Theme – Market is yet another theme that lets you turn a standard WP installation into an online store.
ShopperPress – A WP theme that turns your WP install into an e-commerce site that works with Google Checkout, PayPal, Authorize.net, and a number of other payment gateways.
Design Elements
e-commerce Web Elements, Dark Grey & Green – A set of design elements in dark gray and lime green for your e-commerce site.
Web 2.0 Button (e-commerce #2) – A collection of e-commerce call to action buttons.
e-commerce Web Elements – A set of editable design elements with customizable color schemes.
Web Pack (Price Table, Banner, Buttons…) – A set of black and gray buttons and other design elements.
Price Table – Customizable price table elements.
Colorful Pricing Table – A very colorful, fully customizable price table element.
Pricing Tables – 5 Pack – A collection of pricing tables that includes 3D, horizontal, and vertical versions.
Pricing Tables – A pricing table element that includes a features list.
Super Bright Pricing Tables – A collection of pricing tables in four colors that can be mixed and matched.
General Icons
Vector Free Shipping Bag Set – A set of free shipping shopping bag vector icons.
Free Shipping Tag Icon – A vector hang tag with a "free shipping" message.
13 E-Commerce Icons – A great collection that includes sale, credit card and shopping cart icons.
Universal Icons – Set 16 (Shopping) – A set of premium icons from iStockPhoto.
Sale and Shopping Icons – Alto Series – Another set of premium icons from iStockPhoto.
Shopping & Consumerism Icons – White or Black Series – A set of simple premium icons from iStockPhoto.
Set of 77 Web Icons – A huge set of blue icons that includes a shopping cart and various other icons useful for an e-commerce site.
BlueSakura – A set of 45 icons, including various shopping cart icons.
Icon Set n9 – Commerce – A set of e-commerce icons that includes a shoping cart, basket, sign, gift, and more.
Icon Set n8 – Commerce – Another set of glossy e-commerce icons, including a credit card, shopping cart, and hang tag.
Stylish Cardboard Tag Icons – A set of customizable hang tag icons.
Beautiful e-commerce Icons – A free icon set from Nettuts+ that includes shopping cart, bag, cash register, and other icons.
Hola Icons – Shopping – A set of glossy, informal icons.
Simple Icons on Black Background – Set 4 – A set of simple grayscale icons including a shopping cart and basket.
Shopping Icons Set – A set of bright e-commerce icons that includes a sale tag, credit cards, and shopping basket.
Shopping Icons Fresh Collection – Set 10 – A set of cartoonish e-commerce icons.
Smooth Icon Set – A set of glossy icons that includes shopping carts and credit cards.
Shopping Icons Retro Revival Collection – Set 9 – A set of retro, illustrated e-commerce icons.
Green Icons Retro Revival Collection – Set 5 – A set of green-themed icons that includes a shopping basket among others.
Shopping Icon Set (Isometric) – A mostly yellow and green set of icons.
E-Commerce Icon Set – A set of green-toned icons, including a shopping cart, shopping basket, and credit card icon.
Themes Ultimate Icon Set – A collection of icons that includes a shopping cart and other e-commerce icons.
200 Mini Icons – A huge collection of mini icons that includes shopping cart icons.
Web Icon Set – A set of blue e-commerce and other icons.
Glossy Internet Icons – Set 4 – A collection of square, glossy icons that includes shopping carts, credit cards, shopping baskets, and various other useful e-commerce icons.
Colorful Stickers Part 3 Icon Set – A sticker-style icon set that includes a number of shopping cart icons.
Flames Web Icons – A collection of 50 flaming circle icons, including a shopping cart, dollar sign, and others.
Glossy Icon Set – A set of fuschia e-commerce icons.
Futuristica Icons – A set of icons styled like robots that includes a shopping cart icon.
Shopping Icons – Smooth Series – A set of very polished-looking e-commerce icons.
Free Shipping Icon – A vector cardboard box free shipping icon.
Web Assortment – A collection of colorful icons that includes a hang tag and shopping basket.
Halloween Shop Icons – A set of Halloween-themed icons that includes a shopping cart, basket, and gifts.
Free Shipping Icon – Another cardboard box free shipping icon.
Credit Card and Payment Method Icons
Credit Card Icon – A generic credit card icon, available as a 256×256 pixel PNG.
Chalkwork Payments (Free) – A free and royalty-free set of icons from Mezzoblue that includes credit cards and other payment methods.
Free Icons – e-commerce – Three credit card icons: Visa, MasterCard, and American Express.
Credit Card Icons Set – A set of free credit card icons available up to 72 pixels square.
Credit Cards – A generic credit card icon.
Country Flag Icons
Country Flag Icons – A set of 36 glossy, country flag icons.
243 Country Flag Icons – A huge set of country flag icons with a slight gloss effect.
World Flag Icons Pack – A set of round country flag icons with a total of 288 icons included.
XP Flags Icon – A set of wavy flag icons that includes the flags of the UK, US, Scotland, England and Spain.
Flag Icons – A set of 247 flag icons in GIF and PNG formats.
World Flag Orbs – A set of orb-shaped icons of world flags.
Flags – A collection of round country flag icons.
110 Famous City Flag Icons – While not as widely useful as country flags, these city flags might also come in handy on some e-commerce sites.
50 Flag Icons – A set of square flag icons with rounded corners.
Rounded Flag Icons – A set of glossy, round icons available in 3 sizes: 124×124, 48×48 and 24×24.
Shopping Cart, Bag and Basket Icons
Shopping Basket Icon – A free icon of a shopping basket, available up to 256×256 pixels.
Shopping Paper Bags Icons – A set of paper shopping bag icons in a variety of colors.
Free Icon Set – This set from Luka Pensa includes four different shopping cart icons (as well as some others you may find useful).
Shopping Basket Icons 3D – A 3-dimensional shopping basket icon set designed by OoflyingmoonoO.
Bubble Icon Series – Shopping Baskets and Carts – A set of premium shopping cart and basket icons from iStockPhoto.
Shop Cart Icons – A set of four shopping cart icons, including add to cart and remove from cart icons.
Shopping Cart Icon – A slightly different shopping cart design from Bartelme Design.
E-Shop Icon – Another interesting shopping cart icon design.
Shopping Cart – A shopping cart icon with a twist.
Shopping Cart – A small, simple shopping cart icon/button.
3D Shopping Cart – Another 3D shopping cart icon.
4. Tutorials
If you need a bit of extra help with the design and setup of your e-commerce site, the articles and tutorials below are a good place to start. Check out general design tutorials, too, as many elements of e-commerce sites are shared with other types of sites.
General Tutorials
Design an e-commerce Website in Photoshop – A great design tutorial from DesignM.ag.
How to Build an Online Store with WordPress – A simple tutorial for building an e-commerce site with WordPress.
How To Create an e-commerce Websit with WordPress in Under 5 Minutes – A video tutorial from WordPress.tv.
Call to Action Buttons
Add-to-Cart Buttons: Bigger is Better – An analysis of how size impacts the effectiveness of add-to-cart buttons.
How to Design Buttons to Help Improve Usability – While not strictly limited to add to cart buttons, this post offers great insight on creating better buttons.
Add to Cart Button Tutorial – The Best Converting Button to Use – A simple tutorial from Internet Marketers Arsenal for creating a high-performing add to cart button.
Scalable CSS Buttons Using PNG and Background Colors – A tutorial for creating CSS buttons from David’s Kitchen.
Add to Cart Photoshop Tutorial – A tutorial for creating a rounded add to cart button from PSD Master.
Web 2.0 Button – A tutorial for creating a Web 2.0-style call to action button.
Further Resources
- Open Source E-Commerce Shopping Carts – Best Of – Hongkiat.com
- 15 Free Shopping Cart Icons – [Re]Encoded.com
- 30 High-Quality Icons Sets for E-Commerce Designs – Six Revisions
- Shopping Cart Icons – Hidden Pixel
- Ultimate e-commerce Starter Kits for WordPress Users – WebDesignBooth
Is there any thing we’ve missed out? Drop us a comment
About Author – Cameron Chapman is a professional Web and graphic designer with over 7 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.
