SitePoint » ecommerce

Self Hosted Shopping Carts: Magento and WooCommerce Compared

Jacco Blankenspoor — Mon, 29 Apr 2013 13:30:14 +0000

In my previous two articles I wrote about hosted shopping carts, their features and some of their operations.But what if you want to host your own shopping cart?

For this article I will compare WooCommerce (an advanced WordPress extension), and Magento (Community Edition). Magento Go, the hosted version of Magento, is covered in the hosted shopping carts articles. I will now show you what you need to host Magento yourself, and provide a more in-depth look into its features. But, as I mentioned in my previous article, Magento can be quite overwhelming. So I decided to compare it to WooCommerce, a popular WordPress shopping cart extension that can relate to Shopify in the previous articles when it comes to features.

In each case, I will compare the hosting requirements, setting up and features. Both shopping carts can be used for free.

Hosting

Magento

There are always people debating about Magento hosting, and whether you need Magento optimized hosting. The fact is a successful Magento webshop does require a lot of server resources. A simple installation of Magento can run on basically any type of hosting or server though, as long as you have a minimum memory allotment of 256 MB and meet the requirements.

WooCommerce

Since WooCommerce runs on WordPress, the hosting requirements are a bit more friendly. The system requirements are pretty standard, and there are no specific server requirements. That doesn’t mean you shouldn’t pay attention to it, you need to be prepared for success.

Especially Magento can become quite a beast when it’s a large store with tens of thousands of items. Your database will grow to tens of gigbytes in size, and its massive file structure will put a serious load on your server. Initially, you can speed up your store by simply adding more memory, and increasing the CPU power. But once that’s not enough, you’ll need to split your front-end and back-end, for example. I could write a whole new article just about optimizing Magento. This also applies to WooCommerce, but not to the same degree. Basically, the larger WooCommerce gets, the slower it will become and the more measures you need to take to keep it fast. This is where specialized hosting comes in, where you can outsource these worries, and focus yourself on building and configuring the store for yourself or your client.

Setting up

Setting up both shopping carts is really easy. WooCommerce is a WordPress add-on, so you’ll need WordPress installed of course.

Almost all hosting companies provide easy install for WordPress, and most offer Magento installation as well. Or you can install it yourself by downloading the install files from Magento or WordPress.

I’ll use my own domain aboutblankenspoor.nl for this. It runs on a VPS with 2GB of memory, and 2 CPU cores totalling 4.6GHz. It’s well suited to the job, and it has Installatron to install both Magento and WordPress.

Let’s start with Magento.

Magento

Magento demo store

During the installation, you can opt to have sample data inserted. The default template isn’t as modern as the Magento Go default template, this one looks a bit dated. Also, you won’t see a handy setup wizard on your first login.

What you do see is a convenient dashboard, with your latest sales data, search terms, bestsellers etc. This can be very motivating when orders start rolling in.

Magento allows you to change almost anything you see, and this gives you great flexibility in customizing your store. Because of this, adding your first product can be quite a challenge.

You start by setting up a category structure.

You can nest unlimited subcategories, with each (sub)category giving you tons of options to configure. You can select a specific design and layout for each category, handy for if you want to make a product specific landing page, for example. Most settings can be inherited from the site settings, to save you time.

After you figure out your category structure, you begin adding products. This is where Magento really begins to shine: You can make product attributes templates, on which you can base your listings. A computer (hard drive, memory) has a different set of product attributes to a t-shirt (size, color), for example. You can make a simple product (just one item), grouped products (sell a bedroom, with bed, sheets, pillow) or configurable products (like t-shirts, in different sizes and color, where a customer selects one combination).

If you select a simple product, you can configure every detail of your listing. Again, many of these setting can be specified site-wide, but it’s a powerful option. The downside of all this power is that it can easily take you 10-15 minutes for each product you add. Luckily, you can save yourself a lot of time by importing CSV files with your products based on these values.

The settings screen is just as extensive as any part of Magento, with hundreds of settings to choose from.

Because of the complexity of Magento, setting up your store can take you anything from a few days for a simple store based on a default theme, to months of work when you add thousands of products and use a custom design.

But, you won’t find two stores the same anytime soon…

WooCommerce

WooCommerce demo store

Setting up WooCommerce starts with installing WordPress, and then adding the WooCommerce plugin. Your WordPress site is enriched with a few WooCommerce features (Cart, checkout, my account and shop). Sample data has to be loaded manually, but it not as easy as with Magento (see instructions).

However, after performing these steps, your WooCommerce shop instantly looks a lot better.

WooCommerce adds two buttons to the WordPress admin navigation, called WooCommerce and Products. In the latter you set up your categories and products. For those familiar with WordPress, this should look familiar. The options you have are quite limited: you can specify if a category view should display the product inside, the subcategories or both.

Adding a product gives you some more customization options. As with Magento you can add simple products, grouped products and configurable products (called variable products). There is also an option to add an affiliate product of an external vendor (more on this later).

Also, you can specify it the product should be virtual (like a service contract) or downloadable. Magento does this too, but with WooCommerce it’s easier.

With not as many options as Magento to specify, adding a product in WooCommerce works much faster. There are more options than you see in this screenshot, because adding a product is basically adding a WordPress post with lots of variables. So you can add images, specify one or multiple categories and add product information. But the power of WooCommerce is in these product settings.

The settings screen WooCommerce provides you is relatively simple, since most settings can be left untouched. But this also allows you to have your shop up and running in a few days, where you will be spending most of your time adding products and not fine-tuning your settings. And you will certainly benefit timewise if you’ve worked with WordPress before.

Features

By showing you some of the backend of both programs, you probably have an idea by now as to what you can expect. But to help you in your choice, I’ve listed some distinctive features:

Magento

Easy translation: You can translate your entire front-end while browsing your store, no need for editing CSV files (although that is still possible).
Different store views: This can be used to operate different stores from the same backend. For example, I used this for one of my clients, who had an “all-products” store on their main domain, and a niche store (with a selection of their products) on a targeted domain. The niche products were also sold on the main domain. You can also use this for localizing your store.
Selling tools: You can put in up-sells, cross-sells, discounts on products/categories/cart and product comparisons to name a few.
Layered navigation: This allows you to let the customer filter the products listings based on criteria you specify, like price range, color, brand etc.
Add-ons and themes: There are thousands of free and paid themes to have the site look the way you like. And if you want to extend or improve the integrated functionality, you can use add-ons. These are generally very good and mostly free or inexpensive.

WooCommerce

Easy setup: This may easily be its main feature, since this allows you to set up a professional store for you or your client, and test the waters first.
Affiliate products: This is an excellent feature if you’re into selling affiliate products. This can increase your affiliate income, since you can list the products as if it were your own.
Product ratings: WooCommerce has a built-in ratings system, and you can even offer discounts to those who leave you a review.
Layered navigation: Yes, WooCommerce has this too, although it’s not as common as you might think. But the Magento version works better because you can only select one attribute with WooCommerce.
Widgets: You can very simply add widgets for your best sellers, featured products, products on sale etc.
Add-ons and themes: While not as many as Magento, WooCommerce has its own set of themes and add-ons to extend or improve functionality. And you can also use WordPress add-ons to supplement your store.

Conclusion

When you see all the differences between Magento and WooCommerce, you might think I’m comparing apples with oranges. But that’s not the case here, since I basically wanted to show you the possibilities of Magento and WooCommerce. I think that in a way they complement each other, WooCommerce being the start of your e-commerce adventure, with Magento as the ultimate solution. That doesn’t mean WooCommerce won’t give you a professional webshop, but in time you might want the extra functionality Magento gives you.

They both have their downsides: WooCommerce lacks certain needed features, or doesn’t play them out that well. Magento, on the other hand, has all the features you need, but comes with a steep learning curve.

The great thing is you can try them both, they are both open source and freely available. Let me know what you think.

Testing 3 Hosted Shopping Carts: Operations

Jacco Blankenspoor — Fri, 26 Apr 2013 13:00:27 +0000

In my last article, I profiled the features available in three leading providers of hosted shopping cart solutions: Shopify, Yahoo Small Business and Magento Go. Each was found to have distinct pros and cons.

Setting Up

Now, let’s find out how easy it is to set up an actual shop.

Shopify

Setting up your shop with Shopify takes literally less than a minute, and after entering your personal information, you are taken to the dashboard.

You can group products in collections, which works as a category system.

Per product, you can set up the appropriate SEO settings and manage your inventory.

And so within a few more minutes, my first product was on display.

All very clear, and straightforward.

There is a built-in CMS, which you can use to manage your non-product pages, blog and footer. Again, all very clear, it just does what it needs to do.

Switching themes is very easy, just select one from their theme store, and have it installed directly on your shop.

You can download the files to change the HTML/CSS offline.

Shopify uses its own templating language, called Liquid. They provide extensive documentation on how to use it, and you as a developer should be able to quickly pick it up (for a little bit of help, Sitepoint’s got you covered).

Installing apps is as easy as installing themes, and a decent number of apps is provided for free in their app store.

Yahoo Small Business

Unlike Shopify and Magento Go, Yahoo Small Business doesn’t offer a free trial. So you have to start paying right away. You can always ask for a refund when not satisfied, but it’s a bit old fashioned.

Anyway, when you are signed up, you are presented with a handy wizard to set up your store.

You start with selecting a template from their built-in repository. This can be generic templates, or pre-made ones. The difference is in the use of images, but they all seem like they were made in the 90s.

The next screens all show you steps for information you need to enter, which works very conveniently.

And it seems I’m not too far off with my remark about the 90s, since this is the default text for the copyright notice…

Next step: adding products.

Again, you do this by performing a series of steps.

You have to publish your site every time you make a change or add a products, which leaves you waiting for half a minute.

Within a few minutes, I added my first product. You can select “Options” for your product, like difficulty in this example. This field can be used by you to sell multiple variations of a product.

After going through all the additional steps for payment, taxes and shipping (which is all very easy and well described), you are taken to the real dashboard.

Especially the “Promote” section is worth noting, since these are pretty powerful options. Things like promotions and coupons are easily setup and managed.

And you should really check out the Yahoo! Marketing Dashboard, which is a great tool to keep track of your marketing efforts.

As I mentioned before, Yahoo Small Business doesn’t do fancy themes, or apps. What you see it what you get, although you can hire an expert to make decent theme for your site.

Or if you are a developer yourself, there is an extensive store editor in which you can go wild on coloring, HTML and directly editing CSS to make it look professionally.

It’s all there and should be familiar to you, which present an excellent business opportunity.

Magento Go

Setting up your Magento Go store takes a bit longer to set up than Shopify, but you’re still up and running within five minutes.

Magento provides a handy setup wizard, which takes you through all the steps needed to launch your store. During the installation you can choose to load example data, so you can see a working version of your store right away.

I choose to set it up in their UK datacentre (which is closest to me), and I was surprised to see they already added the required Cookie Law notice bar at the bottom.

When you start working on your store, you’ll soon find out why the setup wizard is shown: Magento has lots and lots of options for you to configure, and adding a product isn’t as straightforward as with Shopify.

Their navigation bar is quite extensive, and the configuration screen can be intimidating at first.

This is where you as a developer can display your consulting power, if you know your way around it of course.

And it doesn’t stop there. Adding a product gives you a whole new range of options to configure. And it goes on and on, about every screen you open gives you more options than you can think off.

I didn’t use the word “overwhelming” for no reason…

Mobile

With mobile becoming hotter and hotter, it’s almost a must to have a mobile-optimized site. Not every product line will be suited for mobile, but if you do decide to set up mobile site, it should be easy.

So, let’s see how the shopping cart providers deal with this.

Shopify

Mentioned as a specific Pro, Shopify offers both a mobile site as well as a mobile app for iOs and Android. You can specify different themes for desktop and mobile visitors.

Their sales page claims you can start selling with a mobile site right away, but their default template isn’t really mobile. You have to look for a mobile or responsive theme first. And there’s currently no free mobile theme. But there is a limited choice for free responsive themes, which should give you enough to start with.

The difference between the mobile and responsive themes is in the navigation: Mobile themes look more like an app, while a responsive theme looks more like the desktop version, with some of the heavy elements left out. So their mobile claim is to be taken with a grain of salt, at least if you don’t want to pay for another theme.


Desktop version	Mobile version (responsive)

So the mobile frontend doesn’t really live up to the expectation, but does the same apply for the app?

I downloaded the free iOs App, and I can see they definitely put some work in it. This is truly mobile management. You can view your customers and orders, and even add new products or modify existing ones. There’s a convenient dashboard with important metrics like revenue, visitors (up to 90 days backs), open orders and a low inventory warning.

You won’t be able to edit the sites’ themes, apps or pages, but that’s because a desktop is more convenient. But all the essentials are included, so this is definitely a plus.


Mobile dashboard	Mobile editing of products

Yahoo Small Business

Not much to cover here, Yahoo Small Business simply doesn’t seem aware of the mobile business revolution which is going on.

When you open the store with your mobile browser, you see what I mean. It’s not even taking advantage of the full screen, which makes it even smaller.


Desktop version	Mobile version

You probably guessed there’s no mobile app.

Magento Go

Well, despite all its features, Magento Go really stays behind on the mobile front. After some hard searching, I managed to find one (1!) theme which isn’t even mobile-only, but responsive.

And even after going through the signup process, and “ordering” the free theme, I couldn’t get to it. But you can give it a try. When installed, it will look like this.


Desktop version	Mobile version (responsive)

Unfortunately, there is no mobile app for Magento Go, so you’re left to visiting the desktop version with your phone.

This requires some patience, since loading is slow and there are too many options to easily click on smaller screens.

Pricing

When it comes to pricing, there are multiple variables to take into account:

Monthly pricing compared to number of products and features
Hosting costs
Transaction fees, not including payment processing fees.

1) Monthly pricing

Shopify pricing ranges from $14 a month for their starter plan with 25 products and limited features, to $179 a month for unlimited everything and full features.
Yahoo Small Business starts at $29,96 per month for their starter plan with 50.000 products, and limited features, to $224,96 per month for all of their features (and the 50.000 products).
Magento Go comes in at $15 a month for their starter plan, with 100 products and full feature availability. Their most expensive plan is $125 a month for 10.000 products.

2) Hosting costs

Shopify offers enough storage space on all plans compared to the number of products, and unlimited bandwidth (with CDN enabled).
Yahoo Small Business offers unlimited storage and bandwidth (fair-use) on all their plans.
Magento Go comes with a limited amount of storage and bandwidth on all plans. Even when you pay the $125 per month, you still only get 5 GB of storage and 32 GB of bandwidth. With 10.000 products offered, that’s not enough. And their overage charges are way too expensive ($10 for each 1 GB of bandwidth you overuse). CDN is included.

3) Transaction fees

Shopify starts with a 2% transaction fee for their starter plan, up to no transaction fee for their highest plan.
Yahoo Small Business has a 1,5% transaction fee for their starter plan, down to a 0,75% fee for their most expensive plan.
Magento Go charges no transaction fees on any of their plans.

Conclusion

When it comes to features, nothing beats Magento Go. But this comes at a cost: their hosting is priced very expensive (but relieves you of the hassles of running Magento properly), and there’s a steep learning curve. If you’re a developer, Magento presents you with plenty of business opportunities: setting up, SEO, custom themes, app development, consulting – all areas in which you can show your expertise. And for an end-user they have the handy setup wizard. But it takes time and patience to build your store properly, both of which you might be lacking when you’re excited to start your e-commerce adventure.

Shopify is another developer friendly piece of software, and you’re openly invited to join their Expert network. Or develop themes and apps, and sell them in their marketplace. For a end-user point of view, Shopify can become quite costly. Standard functionality is a bit limited, and they very much rely on apps to extend it. But not all of these apps are free. Same goes for the themes, there are some good free themes, but to stand out you need to buy a theme. It is very easy to use though, and could perfectly serve as the start of your e-commerce future. And they sure are on the right track for when you want to go mobile.

Yahoo is a bit hard to place. They have a dedicated developer network, which is good. And they provide the tools to make it easy for as a developer to build/customize a theme, or extend functionality. Their backend is actually quite good, with lots of guidance built-in, and it all works very slick. Their marketing tools are great too. And they offer a nice set of features, although it relatively high priced.

But I can’t get rid of the feeling that they forgot to work on the front-end. Their themes are of the design you make when you built your first website in HTML. About 15 years ago. And mobile just don’t seem to exist at Yahoo. I admit this presents excellent business opportunities for a developer, but for an end-user this isn’t perfect. But, if you can get over this, Yahoo Small Business is very novice-friendly and can be a good start. And you can offer more products than you’ll probably have.

In the end it’s up to you, but whether you’re a developer or end-user, you should try before you buy (with Yahoo you actually have to buy to try, but still). Even though it’s possible to switch later on, this isn’t easy and the process might scare off your customers. The opportunity to do your homework is there, and it’s worth exploring how each matches with your needs.

And if you still have questions about these three providers, leave them in the comments and I’ll do my best to answer.

Testing 3 Hosted Shopping Carts

Jacco Blankenspoor — Thu, 25 Apr 2013 00:12:08 +0000

I recently stumbled on an article published in 2009 about hosted shopping carts, which made me wonder how today’s option compare.

Of the 10 companies listed, one has grown very significantly since then: Shopify. Yahoo, via Yahoo Small Business, is the second provider who is still doing really well, so let’s throw them in the mix as well. And to see how they keep up against any newcomers, let bring in the new and hot kid on the block: Magento Go, launched in 2011 and the hosted version of the Magento ecommerce platform.

In this article, I will compare the features of these three products, identifying significant pros and cons in each case. Tomorrow, I’ll cover setting each one up, how they deal with mobile and pricing.

What about self-hosting? I’ll cover that in a separate article next week. First, let’s look at the hosted options’ features.

Feature comparison

At first glance, all hosted shopping carts may look the same. They can all process orders and keep track of inventory. But if that’s all there was to it, they would only be competing on price. There must be more to it than that.

I made a list of significant pros and cons for each provider. Some features are more important if you are a developer and not the end user, and vice versa. Where applicable, I will make note of this.

Shopify

Let’s start off with Shopify, which has come a long way since it was listed in 2009. Shopify relies heavily on independent developers to improve their product, while maintaining the platform itself. It’s not so much just a shopping cart, more of a whole e-commerce infrastructure where both end-users and developers benefit. And before you think I get paid by Shopify for writing this, let me explain:

Pros

Templates & plugins: with their own Theme store and App store, customers can choose from 150+ templates and hundreds of apps.
Shopify Experts: Grouped by their expertise, Experts are experienced developers who can help a customer with their Shopify shop.
Developer friendly: Guess who makes the themes? And the apps? And who do you think the Experts are? Right, you are (or at least you cán be ;-). There’s even a fund to get you paid while developing an app. And if you want to connect with a current app (with a RESTful API), you can build a special dev shop to test it out. And they promote you heavily. They really love developers, see what I mean?
Hosting with CDN: While hosting certainly isn’t a specific feature (how else would you sell hosted shopping carts?), hooking it up to a CDN sure is.
Mobile: Your visitors can see a optizimed mobile version of your site, and you can control your shop on your mobile.

Cons

Themes: Being able to buy themes is great, but you practically have to. The free templates are scarce, and some of them look very much alike. The cheapest are $80, and this goes up to $180. Paying for a theme isn’t a bad thing, but given the fact you already need a paid subscription, one could expect more and better free themes. On the higher plans you are able to modify the HTML/CSS. You can build and upload your own theme, but developing from scratch can become really time consuming.
Number of products: Shopify offers the least number of products you can list in your shop, compared to their monthly pricing. Also, not all of their features are available in their cheapest package.
Built in functionality: Shopify relies a lot on their app system to add additional functionality, like upselling. The cost of this is that it’s rather basic when you first start.

Yahoo Small Business

Also known as Yahoo Store (which originated from Viaweb), Yahoo Small Business is the most “traditional” shopping cart of them all. But being in business since 1995 means they have seen it all, and they offer a huge amount of features to satisfy all sort of customers and developers. Features are clearly based on experience, and customer feedback.

Pros

Integration: You probably won’t find a payment, shipping or inventory solution you can’t connect with – they even have cash on delivery. And if you do find one, there’s an API.
Coupons: A great way to generate sales, and available on every plan.
Number of products: 50,000 products allowed, right from their starter plan.
Developer network: Just like Shopify, Yahoo doeslike to work with developers. But you have to do a bit of searching (hint: ysbdevelopers).

Cons

No plugins or fancy themes: You build your store with a design wizard, or pre-made (pretty ugly) templates. And there aren’t any plug-and-play plugins available. This does, however, provide an opportunity if you’re a developer, since a customer will more likely turn to you for extended functionality (remember the APIs).
Feature availability: Features like upsell, cross sell and gift certificates are great to have, but only available in the more expensive plans.

Magento Go

Magento Go is the hosted version of the popular Magento eCommerce software, hosted by the developers of Magento themselves. One of the main reasons for using Magento Go instead of hosting it yourself, is it can be a real beast to host. You need a better than average server/VPS to host it, and it needs daily cleanup to keep it running smooth. It isn’t just a hosted version of their free community edition, they actually added some useful features to justify the price.

Pros

Feature set: All of the offered features are available on every plan. And within their feature list you’ll find coupons, gift cards, wish lists, cross- and upsells and related products. To name a few. And to top it off, you can expand your shop with plugins (or extensions as they call them).
Speed: They know how to host it, which means they can deliver a fast site without modifications of plugins needed. And they offer you a CDN.
A developer’s new best friend: Magento Go is a developer’s dream come true, since it offers lots of opportunities for you to step in. You don’t have to worry about the hosting, so you can focus on stuff like design (you can add your own CSS and scripts), SEO (more options than an average business user can cope) and consulting (how to set it up and actually use all the features).

Cons

Feature set: Magento isn’t the easiest store to set up, and it takes a steep learning curve before being able to use all its features. It can be very overwhelming.
Themes and plugins: You can only select the themes and plugins which are provided on the Magento Go platform itself. Unlike the self-hosted version (Magento Community Edition), you can’t use the full range of available themes and plugins. Especially with themes this means you have a limited amount of free themes.
Number or products: You can offer a few more products in the starter plan than Shopify, but with 100 products it’s still not that much.

So, now we have an overview of the features offered by Shopify, Yahoo Small Business and Magento Go. They have much in common, but also have significant differences to each other.

Some of these differences will become more apparent as we go through the set-up process, look at how they handle mobile and discuss pricing options. That’s tomorrow’s article.

Merchant Account Providers: What to Look For

Danielle Thomas — Tue, 05 Mar 2013 13:55:39 +0000

In 2012, nearly $300 billion in sales was processed via online payments. In an annual study by Javelin Strategy & Research, current trends in the online space indicate that total online sales will be pushing toward $500 billion by 2015.

Some of Silicon Valley’s hottest startups in the last few years have been companies that are seeking to make the online and mobile purchasing experience more convenient, a prominent example being Square, Inc. The recent boom in mobile and online payments is demanding all entrepreneurs and business owners to move fast and meet market demand by accepting online payments.

The good news is that setting up a merchant account is not difficult. The onboarding process with most providers is very straightforward and painless. The challenge lies not in setting up an account, but in choosing a merchant account provider. There are literally thousands of options available for small business owners.

At Merchantseek, we aggregate information about merchant account providers – both fact-based data and user reviews – to give site owners and developers the best chance of forming the right partnership with the right provider.

In this article, I’ll raise a few key points for you to consider when shopping for a new merchant account provider, and then consider the pros and cons of five leading merchant account providers.

Key Points

Customer Reviews

In today’s online universe, it is nearly impossible for companies to push bad products and services and not suffer the fate of negative online reviews. A good starting point when assessing a merchant account is online reviews. Don’t trust the reviews on a company’s own website. Search for true third party forums and read through comments from current and former clients. If the overwhelming majority of reviews are bad, then drop the consideration and move to the next company on your list. Customer reviews won’t necessarily pinpoint the best option for you, but they will help to weed out the worst options.

Fees

From a business owner’s perspective, merchant account providers are a necessary evil. The merchant provider wants to charge fees as high as possible, and the business owner, of course, wants fees as low as possible. Make sure you fully understand all hidden fees by calling customer service to ensure there are no fees on top of what is clear on the introductory material. Don’t be afraid to request specific, detailed information. If they want your business, they should provide it.

I’m not saying these five providers are the best, or the worst. They do represent a pretty good spread across providers that have established a good reputation. You can see the details can be quite different from one provider to the next.

Note also that what might be a Con for some of you may be a Pro for others, and vice versa. You still have to do your research as to what is right for you but, hopefully, this articles has given you just that bit more perspective when it comes to selecting your own merchant account provider.

An Introduction to Building Shopify Themes

Keir Whitaker — Thu, 28 Jun 2012 13:05:17 +0000

More and more web designers are turning their skills to new and clever uses. Whether it be icons, themes, fonts, t-shirts, or prints, subsidizing client work by selling products and services online is on the increase—especially in the web community.

A few years ago opening up an online store was a scary and daunting task. Thankfully, the process today is a lot simpler; for some platforms it’s as easy as creating a theme using your existing HTML, CSS, and JavaScript knowledge. Even if you don’t want to open up your own store, having the skills to offer ecommerce to your new and existing clients is a big plus.

Evaluating Ecommerce Platforms

There are plenty of options when it comes to setting up shop online. These range from the humble “Buy Now” PayPal button to rolling your own custom web app with plenty in between. I have tried most offerings over the years, but when it came to choosing a solution for my own company, I decided to use Shopify. Here’s why:

It’s a fully hosted solution, which means zero server set up and maintenance—a big bonus
The monthly cost is not prohibitive. Our fees will grow in line with our needs and revenue
It’s theme based and very designer friendly. We can use our existing markup and CSS
It allows us to use our merchant account for payments. This was a big plus as we don’t want to use PayPal
We can use our own domain with Shopify, e.g. shop.useourowndomain.com
The “app” ecosystem is strong. We’ll need a digital delivery system and FetchApp fits the bill perfectly
It’s popular. Over 25,000 stores use Shopify, including a lot of well-known web brands such as A Book Apart, United Pixelworkers, Tattly, and Hard Graft
The company is strong, the product is constantly being developed, and above all they have a great logo!

Shopify is a designer friendly ecommerce platform for designers

If you have built a website before then you are amazingly well equipped to build a theme for Shopify. During this tutorial I’ll be showing you the basics of how a Shopify theme is constructed, dissect a key template, and share a few hints and tips that I have picked up along the way.

Before We Begin

The Shopify test shop interface

In order to start developing your theme you will need a Shopify account. The simplest way to do this is to sign up to the partner program. This will enable you to create and work with a “test shop.” As the name suggests, it’s not a “live” shop—think of it more as a playground. When you are ready to open up your store “proper” you will need to register for a full account.

Once you have registered for the partner program click the “Test Shops” tab, and follow the instructions to set up your new test store. Once it has been created, following the link will take you directly into the Shopify admin. This is the heart of your store, but for our purposes we will be concentrating on the themes tab.

What’s a Theme?

A theme comprises a number of specially named templates as well as the normal kind of assets you would expect for any web project including images, CSS, and JavaScript.

Radiance is a free Shopify theme

There’s one final component that you might not have come across before and that’s the templating language called Liquid. It’s similar in style to other templating tools like Twig and Smarty, and whilst it might feel a little alien at first, I am confident you’ll soon get the hang of it. If you have ever built a theme for WordPress, Tumblr, or Expression Engine, then many of the concepts will be familiar to you. If you haven’t, don’t worry, we’ll go through the main points to get you up and running.

Basic Theme Structure

At the time of writing, test stores are created using the free “Radiance” theme. You’ll find all the files that encompass this theme by entering the “Template Editor” section under the themes tab.

Before we carry on, let’s download the theme so we can look at it more easily. We aren’t going to go into the specifics of this theme, but we’ll use it to give you a taste of how things work and fit together.

To download a ZIP archive of the Radiance theme, follow the “Themes” tab and then the “Manage Themes” link. From here, you can request to “Export Theme.” You will receive an email once it’s available to download.

The online Shopify template editor

Once you have unpacked your ZIP archive, open up the folder. You will notice that there are 5 subfolders within it. These are:

Assets
Config
Layouts
Snippets
Templates

Let’s have a more in-depth look at their contents.

Assets

The assets folder is home to all you images, JavaScript, and CSS files. If you are like me, you would normally separate your files into subfolders based on type, that is, one for CSS and another for JavaScript. Be aware that you can’t do this for a Shopify theme; all assets must be in this folder.

Config

Whilst creating Shopify themes is relatively easy, they do offer us the potential to customize them heavily. Config files give us the ability to change the way a site looks by selecting different colors or fonts from the admin area. It’s a little outside the scope of this article, but something worth considering if you ever produce a theme for sale in the Shopify Themes Store.

Layouts

The layout folder usually contains one file called “layout.liquid,” although it can contain more. A layout file enables you to define the outer skin of a page. This approach saves you having to include the same files in each and every template. I liken it to the outer skin of an onion. Our template files (the inner part of the onion) are then wrapped with this layout file (the outer skin) to give us the completed page.

Typically, the “layout.liquid” file will include your opening and closing HTML declarations, links to CSS and JavaScript files, principle navigation and footer. It will also include a special liquid tag {{ content_for_layout }}, which Shopify uses to add in the relevant subtemplate code and logic.

Don’t be put off by the amount of code in the Radiance theme “layout.liquid” file as there’s a lot going on. The Blankify theme, available on GitHub, features a much more basic “layout.liquid,” which is much easier to digest.

Snippets

Snippets are files containing chunks of reusable code, these also have the “.liquid” file extension. If you plan on having the same piece of code in more than one template (but not every template as you could arguably use your layout file for this) then a snippet is a good option. The Radiance theme contains a lot of snippets, including social links and pagination.

Templates

These files are generally the ones you will spend your time crafting, and represent the inner part of the onion.

In order for your theme to work, you must follow some simple naming conventions, for example, the template that is rendered when you are viewing a product must be called “product.liquid.”

The Radiance theme in Mac OS X Finder

Here’s a list of the required templates that make up your theme:

404.liquid—Used when a page is not found
article.liquid—The article page for the blog function
blog.liquid—The archive listing page for a blog
cart.liquid—A list page of all the items in your cart
collection.liquid—This is used for displaying collections of your products (collections can also be thought of “product categories”)
index.liquid—The “home page” that you can customize to display one or more products, blog items, and collections
page.liquid—A basic page for content, ideal for terms and conditions, about pages, etc.
product.liquid—Used to display the individual products to the customer
search.liquid—The template to display search results

You will also notice from the image above that the Radiance theme contains a subfolder called customers. Customer templates allow you to customize your customer area, that is, log in pages, order history, and account details such as addresses for delivery.

You can find out more about these templates on the Shopify Wiki. If you don’t have this folder defined your shop will simply use the generic Shopify templates.

Intro to Liquid

You will have noticed that a number of our files have the “.liquid” extension. Liquid files are simply HTML files with embedded code in them. This embedded code is created using curly braces like {{ }} and {% %} so it’s easy to spot.

Liquid does two things really well. Firstly, it allows us to manipulate our output and, secondly, it allows us to include logic in our templates without having to know any back-end code.

Firstly, let’s look at output. Here’s a really simple example. If we want our

element to display our product title then we can make use of the product data available to use, and do the following in our template:

{{ product.title }}

When Shopify renders a product page our Liquid code will be replaced by the title of our product. Notice how liquid uses the “dot” syntax. Our product also has a price attached to it, this would be displayed in a similar way using:

{{ product.price }}

The “dot” allows us to access the different properties of the product and display that data.

We could go further and say that we want to turn our product title into uppercase, that’s fairly easy too:

{{ product.title | upcase }}

Liquid can also help us generate elements quickly. For example, an image tag:

{{ 'logo.png' | img_tag }}

When rendered this will produce the following HTML:

Of course this isn’t much use as this has resulted in a relative path to the file, which just won’t work. By adding in an extra filter Shopify will prepend the full path to the file. We can also add in our alt text for good measure:

{{ 'logo.png' | asset_url | img_tag: 'Site Logo' }}

This will produce the following HTML:

As well as allowing us to use data from our shop, that is, product titles and prices, Liquid enables us to control the flow of the page, this is the logic I referred to earlier.

Let’s say a product is sold out, great news for us, but not so good for our potential customer. By using Liquid we can show a special message if the product is no longer available. Liquid logic is very readable so should hopefully be easy to follow.

Here’s how that could work in your template:

{% if product.available %}
	Show Add to cart button here
	{% else %}
	Display message about when the product will be next available
	{% endif %}

There’s an easy way to remember the different tag structures, 2 curly braces equals output and 1 curly brace followed by a % equals logic.

Mark Dunkley of Shopify curates a very up-to-date cheat sheet. It’s a must bookmark for anyone working with Shopify themes. As well as being a great reference it’s a quick way to see what variables are available on each template.
Mark Dunkley’s essential Shopify Cheat Sheet

Dissecting a Template

As I mentioned earlier the Radiance theme isn’t the simplest for first time theme designers. I encourage you, however, to have a look at the different files and consider how they all fit together.

When you are ready to build your full theme, I encourage you to read a great entry on the Shopify wiki called “Theme from scratch.”

TextMate users can take advantage of Meeech’s Shopify bundle. Of course, you can always ZIP up your theme and upload it to your test store yourself.

product.liquid

As mentioned earlier, the “product.liquid” template is used when a customer is viewing the product detail page. If you are familiar with WordPress this is very similar in nature to the “single.php” template.

If you have a look at Mark’s cheat sheet, you can see we have a number of product related variables available to us, many of which we will use in our example.

Here’s the code sample in full:

{{ product.title }}
	{{ product.description }}
	{% if product.available %}
	
	
	
	
	{% else %}
	Sorry, the product is not available.
	{% endif %}
	{% for image in product.images %}
	{% if forloop.first %}
	
	{% else %}
	
	{% endif %}
	{% endfor %}

Let’s break it down into manageable sections. First up, let’s output a basic title and description. As discussed earlier, these are rendered using the dot syntax:

{{ product.title }}
	{{ product.description }}

Next, we run a quick check to see if our product is available, in other words, is it “in stock”? If it is, the template will show a form that allows the customer to add the product to their cart. Additionally, it will render a select list displaying the different variants of that product.

Variants are one way of organizing your products in Shopify. Let’s say you have a children’s bike that comes in red, white, and blue, and costs £295. One approach here would be to have three variants of the bike product to handle the different colors. There are other approaches, but this works well.

If the product is out of stock the template will render the message, “Sorry, the product is not available.”

{% if product.available %}
	
	
	
	
	{% else %}
	Sorry, the product is not available
	{% endif %}

A product is nothing without images. The next part of the template deals with displaying the images we have added in the admin. This is also a good introduction to another Liquid concept: the “forloop“.

The first line can be confusing at first, but it’s nothing to worry about. Essentially, what it means is:

“For every image associated with our product, do the following.”

Every Liquid loop must end with an “endfor”, you’ll notice this further down. Without this, your site can get very messy so remember to include it. It’s like a closing tag in HTML.

Inside our “for loop”, we run a little check to see if we are on the very first loop using {% if forloop.first %}. If we are, we output a large version of the image. If we are further along, we output a small version of our image that is linked to our full size image:

{% for image in product.images %}
	{% if forloop.first %}
	
	{% else %}
	
	{% endif %}
	{% endfor %}

And that is the “product.liquid” template. You can, of course, include other elements, perhaps links to other collections or similar products.

Learning From Others

Liquid, whilst very powerful, is rather straightforward. Once you have worked out how to use the dot syntax, the different template variables, and mastered loops, there really isn’t too much else to learn.

Each template works in a very similar way; for example, the collections template gives you access to data relating to the currently viewed collection of products. Likewise, the cart page will give you access to variables relevant to displaying the customer’s cart contents.

I learned a lot by working out how others have constructed their templates, for example, the collection.liquid template in Blankify—there’s really not much to it.

Blankify is an old but useful Shopify starter theme

Next Steps

I hope this tutorial has given you a good introduction to the elements involved in building a Shopify theme. I have included some great resources below that you should definitely check out as you progress and go deeper into your theme building.

If you have any questions please drop a comment below.

Further Resources

The World of Ecommerce Solutions: Simplified For Your Business

Kapil Gupta — Thu, 22 Mar 2012 16:00:06 +0000

Selecting a good hosted ecommerce solution for a business is not easy. There are three categories in which these solutions could be stratified: open source, pre-hosted and paid solutions, and ecommerce modules for CMS.

Open-source Ecommerce Solutions

A. osCommerce

The principles on which osCommerce is based are the same as those being used by Zen Cart® and CRE Loaded. Users may find osCommerce easy to use and a lot simpler than Zen Cart® and CRE Loaded. The operation is smooth too, and it could be used as only a basic shopping cart. An advantage of opting for osCommerce is the availability of a large number of contributions and upgrades. There is also a decent security measure, on par with MySQL 5 and PHP 5. The overall expenditure may inflate if a great deal of contribution is sought. The absence of graphic templates, however, may create problems in adopting a new design. The cost factor in maintaining an osCommerce shopping cart solution is really well balanced against the benefits, and could be maintained at very low levels. It would be ideal for those startups that have just launched, and are working towards garnering a name for themselves.

The SEO services provided by osCommerce are reasonable, but no such features are available for the basic version of osCommerce. Even the long URLs used in the basic version of osCommerce tend to be unreasonable for SEO, which would bother a merchant sooner or later.

B. Magento and Magento Go

Magento today holds a dominant position in the ecommerce solutions category. Magento is also established under an open-source lisense, like osCommerce. The purpose of using an open-source lisense is that anyone can modify and edit the source code, but will have to comply with the guidelines that are stated in the license. Downloading and using Magento is free, but Magento Go could be purchased after paying a fee. The development schedule adopted by Magento is also impressive and could prove to be an asset. Lots of customization is available on the Magento platform, but using all of them is not easy. Many users with ordinary systems complain about their systems becoming unresponsive when they access this solution.

Magento development is one of the preferred solutions in the ecommerce industry these days, and the number of Magento users is expanding too. The growth in the Magento community is partly because it is relatively newer than other ecommerce solutions. Almost 2000 merchants are using the platform now, which speaks of its popularity among its users. Magento is a solution from Varien that was using osCommerce earlier before being developed as its own solution. The real-time shopping cart in Magento Go is a really useful feature through which the materials management process can also be entrusted, saving further capital for startups.

C. Zen Cart®

Zen Cart® has evolved from the osCommerce platform itself. The solution is licensed under GPL, which makes it free for everyone to obtain. Templates, and some other features, are the only differences between osCommerce and Zen Cart®. Creating and customizing templates to make them unique is relatively easy compared to osCommerce and Magento.

In the plugin section of Zen Cart®, about 1000 free additions are available to be used by consumers. To save customers from being befuddled, however, these extra options could disregarded. This is only to suggest that being overwhelmed with a lot of offers made by these ecommerce solutions may tempt you to pick an average solution.

The skin templates are befitting, but a plethora of options chokes the user interface, and easily confuses recent visitors to the ecommerce enabled website. The forum of Zen Cart® is good, but the ability to take criticism constructively seems to be missing. People who run this forum may not handle scathing well, but except for that, the performance has been optimal.

Paid Solutions

D. Shopify

The Shopify ecommerce solution is a paid solution. Merchants who own a Shopify ecommerce site need not to do anything technical. “Pay first and deliver later” is the process through which it works. All issues concerning the secure service layer, payment gateway, and security enhancements are managed by the team at Shopify only. You can begin by selecting their customized domain.

The access to Google Analytics provided by them plays a critical role for businesses that are going to adopt this ecommerce platform. Google analytics is among the most deep reaching analytical systems, which helps realize the potential of a business idea. Shopify integrates this into its ecommerce platforms and gives the administrator peace of mind by being easy to use.

E. FoxyCart

FoxyCart is also a paid solution. The major difference between Shopify and FoxyCart is that FoxyCart can easily become a part of an existing website because it is not a CMS. The appearance of the shopping cart can be adjusted according to the consumer’s needs by making some changes in the HTML and CSS files of the solution.

Ecommerce solutions for CMS

F. Ubercart for Drupal

To create a shopping cart made over Drupal, Ubercart could come in handy. It can be integrated into existing websites only. This solution ranks really well for starting ecommerce software. Businesses that have not used Drupal till now are suggested to avoid trying their hand at it, unless they have had prior exposure to the platform. Along similar lines, Drupal Commerce has also arrived to the market for consideration. Ubercart offers a lot of contemporary features that may not be found with such ease on Drupal Commerce.

G. WordPress Ecommerce

WordPress ecommerce services are best suited to those who already own a website or blog and want an ecommerce solution to go along with it. Positive aspects of the WP e-Commerce plugin include it being open-source and available for free, so new developments and modifications could be sourced from others or done personally. For the WP e-Commerce solution, the team at WordPress works actively and addresses grievances in a very friendly stance. The feature of adding tags on the existing template is also provided, making it extremely easy for the users to optimize their websites for ecommerce.

Custom ecommerce plugins are also available for specific kinds of businesses. Dippsy, for instance, is a WordPress ecommerce plugin that could be used for downloadable products. This add-on is free and can be integrated with the PayPal payment gateway to assist in the trade of these goods. Another very impressive plugin available for WordPress users is eShop. It is a shopping cart add-on, and could be customized with a lot of features. Online user reviews suggest some of the WordPress plugins could be little tedious to configure, but overall the performance can deliver decent results for the effort applied.

The Shopp plugin for WordPress can also be used as an add-on, but keeping a tab on the bugs is inevitable with this plugin. While it may prove difficult to set up, once that is done the outcome is going to please you. Getting different payment gateways is possible, although the budget set by you may deviate towards the higher end. WP e-Commerce is a better proposition in terms of value and ease.

H. VirtueMart for Joomla

VirtueMart is a plugin that could be used by Joomla platform users to add the ecommerce facility to their website. Some other add-ons are also available for Joomla, but VirtueMart is the oldest and quite developed. Regarding the user friendliness of the platform, there are mixed reactions from its users. There are a lot of premium plugins for similar purposes that may prove disconcerting to the user. The VirtueMart may be able to compete with basic version of osCommerce, but the not with advanced versions of CRE Loaded, Zen Cart® and osCommerce.

The installation goes quite well with VirtueMart, and functions smoothly with Joomla. However, availability of only basic shopping cart features and scarcity of plugins may prove difficult to improve, and unresponsive to changes in the industry.

The template for VirtueMart could be rewritten according to the needs of specific businesses. The feature of merging Joomla plugins for payment, shipment, coupons etc. makes it easier for users to manage their online stores. Detailed product descriptions and other reviews can be shared using this platform, and adding SEO based Meta Tags is also possible.

Ecommerce solution providers basically offer web based systems where impressive shopping carts are integrated, helping end users select their preferred products and services instantly. The integrated payment gateways bring requital on par with industry standards. Developers need secure and scalable hosting, and marketing knowledge, to point out the needs of merchants and end buyers.

How To Increase Conversions by 50% Overnight

Brandon Eley — Thu, 12 Jan 2012 05:06:48 +0000

A few years ago free shipping was taking the e-commerce world by storm … we saw several of our competitors implement free or flat-rate shipping and decided it was time to give it a try. In our e-commerce business we decided to offer free shipping on orders above $100, and flat rate shipping on all other orders (to the contiguous US). We created a coupon code that customers had to enter into the shopping cart at checkout to claim the promotional shipping offer, and added banners to every page of our website advertising the promotion and code.

The free shipping offer was very successful, and we saw a noticeable spike in conversion rate and orders. There were also a number of people who didn’t select the free shipping offer, and we just assumed they wanted their order shipped via a specific carrier. After a while, we started to get a few complaints from customers that overlooked the coupon code or couldn’t remember it once they were on the checkout screen. They would email us asking why they paid for shipping, when our site advertises it as being free.

During the holiday shopping season that year we did some user testing through UserTesting.com and quickly realized the free shipping offer was a major source of confusion with potential customers. Many didn’t see the banners advertising the offer, and of the ones that did, quite a few overlooked the coupon code.

I decided to make the flat rate shipping the default, and automatically select free shipping for all qualifying orders (in US over $100). Our e-commerce software wasn’t really set up to handle that kind of scenario, so I actually wrote a custom shipping module for our e-commerce platform.

When we implemented the new shipping options on our website, our conversion rate increased by 50% overnight.

Find Areas of Frustration

Adding the free shipping offer increased conversions, sure. But the way we implemented it also caused a lot of confusion and frustration. For months, we didn’t even know we had a problem. Looking back, I shudder to think how much revenue we lost in that period of time.

We get so used to our own websites, it’s hard to see it from a visitor’s perspective. Usability testing is the answer. Use a service such as UserTesting.com to let real users evaluate your website or landing page. UserTesting.com is a very affordable remote usability testing service that employs real users to test your website according to criteria you determine. You choose your target demographic including age, income, gender and even web experience. The user follows your instructions, recording their screen and audio as they tell you what they are thinking through each step of the process.

The real feedback you get from these users will likely give you several areas in need of improvement.

You can also use tools like CrazyEgg.com to see where people click, even areas that aren’t hotlinked, and your web analytics package can often shed some light on potential problem areas as well.

Survey Your Visitors

Another great way to find out about potential problem areas is to conduct an exit survey on your visitors. Invite visitors who started filling out your contact form, or have added an item to their shopping cart but didn’t complete the transaction to tell you about their experience.

You might be surprised to hear the reasons they left. Some may have just been doing research or comparison shopping, but some will have experienced problems along the way that prevented them from completing.

Test Changes

Using a tool such as Google Website Optimizer, test changes to problem areas (one at a time). I have made changes I was sure would increase conversions and to my surprise they actually made things worse. Even with all our experience, some things just aren’t “logical.” Test, test, test.

Using simple A/B split testing in GWO, test a couple of different variations and see which one performs best. Then move on to another problem area, make a change and test. Continue making changes, and testing, to continuously improve your conversion rate over time. You’ll likely find that some changes will have drastic improvements, like ours above, and others may only increase conversion rates by 5% or 10%.

Always Work to Improve Conversions

You should always be working to improve your conversion rates. If you run out of areas to test, check out this great article by Conversion Rate Experts. That will give you a few things to try: 108 to be exact!

Boost Your E-commerce Sales with One Letter

Miles Burke — Thu, 05 Jan 2012 02:50:36 +0000

I’m not sure about you, but I can tell you my household bought more online over the festive season than in any previous December in history. With three kids in the house, that’s a fair amount of toys and presents, and we used e-commerce websites way more than traditional bricks and mortar stores.

As a result, we had plenty of packages arriving in December, and there was a really interesting observation I gleaned from the experience. See, I had plenty of packages turn up with a packing slip and perhaps a receipt, either inside the box along with the products, or stuck on the outside.

That was better than a few suppliers though: I even had a few packages turn up with nothing more than a return label on the outside to give me information where the product came from.

One e-commerce company had quite a different approach, which ensured that I – along with plenty of other customers – became fans of the business. I’m amazed at how simple it was.

It was a letter. That’s right, one of those paper items you used to receive before email.

One A4 page on letterhead, with a nicely merged letter thanking me for choosing them to purchase from, and welcoming me to get in contact with them should I have any questions or feedback about the products, the purchase process or the delivery experience. Even better, it was hand signed by someone senior in the business.

It cost this company one sheet of paper, and some time. Sure, it was no doubt a generic letter that everyone who had a parcel delivered last month received, but the fact is they were the only company out of a dozen or more from which we bought who wished us season’s greetings, and invited us to get in touch.

It didn’t even cost them postage – it was inside the package already being sent – yet it had the day’s date and my name throughout, so it was personalized more than a photocopied flyer for all customers.

The packaging was pretty special too – the packing tape they used had their logo printed on it, but it was the letter that really got me thinking.

If you have an e-commerce business, how could you not afford to mail merge a letter and send it with every parcel sent? The letter could be a ‘Thanks for your first purchase’ or a ‘Great to see you again!’ for those who have bought before. The data filtering shouldn’t be too hard, and it could make all the difference to the unwrapping experience.

I look forward to seeing more of these over the coming year.

Do you have a great tip for the offline experience in e-commerce? Let me know so I can share it with others; between us, we’ll make e-commerce an even more inviting space to be in.

Can Retargeting Boost Your Bottom Line?

Brandon Eley — Thu, 27 Oct 2011 00:52:42 +0000

There’s a good chance you might be missing out on a huge percentage of sales or leads.

The average e-commerce conversion rate is 2%, and conversion rates of lead generation websites aren’t much better. That means that 98% of website visitors don’t convert right away.

There are a plethora of reasons for this – some consumers are simply doing research, others are comparing different retailers’ prices, and even more simply get distracted either by something on their computer or by the real world distractions we all experience day to day. But what if there was a way you could find those visitors that left without converting, and offer them a second chance? What if you could target them specifically with ads that showcased the exact products they were browsing on your website? That’s where behavioral retargeting comes in.

What is Retargeting?

Behavioral retargeting, or simply retargeting, is the process of showing advertising (particularly display or text link advertising) to visitors based on their previous browsing behavior. In most cases, retargeting is used to show advertising more frequently to people who have visited a website before, but not converted into a customer or lead.

Let’s take an average niche e-commerce merchant for example … maybe a custom tailored apparel retailer such as Indochino. A visitor might search Google for custom tailored suits and visit Indochino.com. They browse through a few different pages, and maybe even add a suit or jacket to their shopping cart. But they get distracted by an email notification, instant message, or even a baby crying, and leave the website without completing their purchase.

But later that day, or even later that week, they are again browsing the web. They may be on a web page completely unrelated to men’s apparel, but they are shown display advertising from Indochino.com because they visited the website before. That is behavioral retargeting.

As it might seem, retargeting is an extremely powerful marketing tactic, because it only shows advertising to previously qualified candidates. They have already shown an interest in your product or service by browsing your website, adding an item to their shopping cart, or downloading a whitepaper (the trigger is up to you). They are far more likely to convert than unqualified visitors.

Utilizing retargeting can significantly drive up profit margins and lower per-customer acquisition costs by reclaiming lost visitors. AdRoll.com, Retargeter.com and Chango.com are three firms that specialize in retargeting, and Google Adwords also offers remarketing.

Is Google Crippling Remarketers?

Google recently made a change that could have a profound impact on the data website owners and marketers receive about their referrers. Previously, when a visitor conducted a Google search and clicked through to a website, information on the specific search phrase was also passed, which could then be analyzed by Google Analytics or other stats package.

Google announced recently they would no longer pass this referrer data by default for any logged-in users. While this only represents about 10% of global searches, I am curious to see what percentage of U.S. searches would be affected. One thing is sure, taking away this valuable information will hurt companies such as Chango and AdRoll, which rely on this data to target advertising to visitors based on their browsing history.

Give Retargeting a Try

Retargeting is an incredibly effective way to cash in on potentially lost sales, so give it a try. If you’re already using retargeting (sometimes called remarketing), let us know how it works for you in the comments below.

Introduction to Adobe Business Catalyst—Part 3

Rob Frieman — Thu, 25 Nov 2010 20:59:26 +0000

Adding User-generated Content to Adobe Business Catalyst: The Dress Marketplace

In earlier articles in this series, we used Adobe Business Catalyst to create an ecommerce website with content management capabilities, integrated online store, and dynamic capabilities without having to write any custom code. In this installment, we’re going to extend the site further building a custom web app to power an online marketplace. Test yourself with our short quiz at the end.

In this case, our client, the dance school, wants to create an online marketplace where people can list and sell their dresses. I’ll use this project as an example of user-generated content capabilities, which you can add to your client’s site with a bit of planning, but without back-end database development.

Additional reading includes;

Planning for Your Web App

Executing the application is going to be easy, but I want to reinforce another topic I’ve touched on in my articles: planning. Taking some time to think about what you and your client want to achieve, as well as how you think it should fit into the existing site, will mean the difference between a fulfilling and a frustrating project.

First of all, let’s clarify what we want to do in simple terms: we want to allow people to upload information about dresses they wish to sell. Such information will be searched or browsed by other people using the dance school website. In essence, we’re talking about some user stories. A user story is a small narrative that describes a discrete piece of functionality you want to add to your application. Remember, even though you won’t need to write any back-end code, you’re still designing an app. For our site, we can discuss a couple of scenarios with our client that will add functionality to their website:

Create a dress listing
Browse dress listings
Search dress listings

The idea is to get a little more detail about how we want this to work on the website. While we won’t write a user story for every scenario in this article, we’ll write one for the first: Create a dress listing.

Jane’s daughter Molly has outgrown her competition dress and will need a new one. The current dress is in excellent condition and Jane would like to sell it to cover part of the price of the new dress. Jane knows that many families from her dance school use the school’s website to keep up with information about classes and to buy shoes, music, and other items they need. Jane would like to list information about Molly’s dress for sale. The information should include the size, condition, price, how to contact Jane, and an image of the dress.

In practice, you could write up a few different user stories to capture slight variations, but this write-up gives us some good detail to get started. Plus, it’s very easy to send to your client so that they can review it and provide feedback, and you can both start thinking about the new functionality in the same way.

A web app in Business Catalyst is a collection of information pieces organized around a common theme. In this example, the theme is a dress, and the information is the set of details that describe the dress.

Those details are data elements that we’ll set up as fields in our web app. Every web app automatically has a name and description, but you should make a list of the other fields you’ll need to create, such as:

price
age of the dancer
age of the dress
measurements
seller’s name, phone, email address

Now we have a list of fields to collect and show for each dress, so we’re almost there. We also want to let customers upload an image of their dress, too. In a traditional app, managing file upload capabilities can be tricky, but in Adobe Business Catalyst, it’s a snap.

Before we get started, let’s go to the File Manager and create what we’re going to want to use for the pages related to the app.

We’ll make a directory for the images that will be uploaded, and we’ll make a directory for the files related to the app itself.

Creating the Web App

A web app is a Module, so go to Modules > Web Apps and click on Build a New Web App. There are three sections of information that you need to provide: Web App Details, Customer Options, and Can Customers Create Web Apps?, and Customer Options. Adobe Business Catalyst provides a lot of features at your disposal to make creating an app easy.

The process is broken up into four steps in the Wizard: Web App Details (the page you are on), Add Custom Fields, Customize Web App Layout, and Set Up Auto Responder.

In Web App Details, you’ll name the app. In my case I’m making dress listings, so I name it Dress Listings. Always try to use meaningful names, and avoid being too technical; this is a business application and we want to use names that are relevant to the business.

To fill out the next two sections, let’s think back to our user story. Jane wants to create a listing herself, so the answer to Can Customers Create Web Apps? is Yes. Check the box for Add new items.

We want listings to show up right away, so we’re unchecking Requires Approval — that’s going to get us a simple app that lets customers create a listing that will show up automatically on submission. While we’re going to add authentication for this app later on in the article, we’re not going to use system administration roles, so leave Role Responsible as None Specified.

In the Customer Options section, you manage the expiration of the content, file upload, and ecommerce options. Ask your client if this is a service they want to charge for. In our case, it’s free to list a dress, but think of this data like a classifieds section, and consider the revenue opportunities a web app might present for your client.

Next, click on the Allow File Upload checkbox and then select the directory you made earlier to contain uploaded images. Finally, I’m going to use the existing Shopping Cart template we made back in this first article in the series. After that is set up, let’s move on to adding fields by clicking Next.

Custom Fields

This is the screen where you build the heart of your web app. Add a field for each data element in your list. After you type in the name of the field, select the type of field and determine if it is optional or mandatory. To add the field to your app, click Save Field. Fields in the app can be added or removed over time, but you’ll have to update pages based on the web app after you make a modification.

Field types are very versatile for creating your app; you can have text inputs for strings like names, text boxes for longer chunks of text, lists with options to select from, date/time data types, and image data types. You can even have a data source you already created as a data type — that can be very powerful.

After you create your set of fields, click Next, and you can customize the look and feel of the templates generated for the web app. Each web app comes with three templates for each interaction: list, details, and edit. List is the data that will be returned for each item from browsing or searching against the data in your app. Details is the look of an individual item’s page. Edit is the data entry form to edit the data in an item’s listing. For most apps, List and Details are the first templates you’ll want to work with.

Before we start to customize, let’s make some test data so that we can see what we’re working with. Click on View Web App Items on the right-hand navigation column. You’ll see you have no items yet. Click on Create a New Web App Item.

Enter some data into the form and submit it. If you want, add a few items for some test data – you can always delete them before going live.

Customizing Your Template

Let’s go back to customize the look and feel of the web app we’ve created. Hover over the web apps link in the menu above and click on Manage Web Apps. Click on the web app name to get back into your app, and click on Customize Web App Layout to return to the List template. Your list will show two data elements from your item by default: the {tag_counter}, which counts the number of items listed, and the {tag_name}, which will generate a link to the detail page using the text in the Name field.

Note: Go back to Part 1 in the series to learn more about Adobe Business Catalyst custom tags.

I want to add a few data elements to the listing to anticipate what customers want to choose from. Using the Tag Insert drop-down, I can find the tags corresponding to all the fields I added earlier. I’m going to use the name of the item, the age of the dancer, and the price, since those are the most basic fields used to filter the items. I’ll add a little text to label the data that’s going to show up in place of the tags.

In addition, you can toggle to the HTML view to get much more fine-grained control over the look and feel of the listing.

Adding a Module to a Page

If you recall our last article, Adobe Business Catalyst makes it very easy to add dynamic functionality to the pages and templates that you create. Let’s create a listings page for the web app and start our Dress Market.

Go to Website > Web Pages and click on Create a new Web Page. Write down the file name and page name, and determine which template to use, and what directory the file should reside in.

Now go to the Action Box and click on the Add modules to web page button. The Modules pane will load and you can scroll down to web apps. Scroll down to Display List of Web App Items. Click on the link and then select the web app list you want to add.

From there, you could select an additional filter or just list all items. We’ll list all items on this page. Preview the page to see the list of items you’ve created so far. Now click on one of the links and you’ll go to the item details page.

This is the page “out of the box” — before I add some of my own HTML and CSS to clean up the layout.

Let’s take stock of what we’ve done so far:

Web app is created and has test data
Listing page has been created and the Web App module was added to the page
Detail page is working

As you know, there’s a lot of tuning to do now — you’ll have to design how you want each of these pages to look, and then you’ll need to write the CSS to execute the design (or use some of the pre-built styles already available).

In addition, you’ll want to add some links from your main nav, which will mean editing some templates in this particular design. I’m not going to spend much time on that now, since we’ve covered how to get down to the very fine-grained control over look and feel using Adobe Business Catalyst. If you need a refresher for any of the topics covered earlier in the series, follow these links for Part 1 or Part 2.

Going back to our initial user story, we’ve created the underlying ability for Jane to list her daughter’s dress. Yet, the site doesn’t have all the capabilities we’ll need to allow customers to start uploading items.

Create a Submission Page

Let’s create a new page and call it Dress Market Submission. We’re also going to ensure that the Enabled button is clicked; that will ensure that the functionality we’re adding to the page works correctly. Let’s add the submission module, so that we have our customer-facing data entry page set up.

Go to the Action Box and click on the Add modules to page link; then scroll down the modules list and click on the Web App link. Click on the Web Apps Input Form for Customers. Select the web app that you want to create a submission page for, and then click insert.

You can preview the page, make some tweaks to it, and generate more test data, if you like.

Securing the Submission Form

A web app like this is a great opportunity for your clients to collect information about their customers. By making the listings open to the public, traffic increases on the site; there’s value for the people listing their dresses in the online market, as well as for the school.

But the ability for customers to generate site content should be gated in some way. Most sites enforce that people should create an account and be logged in to post material to a site — we’re going to add that capability to our site now.

Creating a Secure Zone

In Adobe Business Catalyst, there are many levels of user roles. There are system users like you and your client (we explored how to limit different user role permissions in Part 2). You both log in to the main admin section and use the Business Catalyst interface to manage, modify, enhance, and update the site.

Your customers will be given tools that reside within the look and feel of the customer’s website. From the Adobe Business Catalyst terminology, they will be treated more like “subscribers” to the site, though they’ll have permissions we grant them. In this case, it will be permission to access particular pages like the Submission page.

Requiring a person to be logged in to your site to do certain tasks — called authentication — requires us to do some more planning. We’ll need to determine which pages in the site require a customer to be logged in, and define what information is necessary to create an account. We’ll then have to create a registration page and login section, and then knit the whole user experience together. Take some time to plan out the information you’ll need to collect to create an account:

username
password
first name
last name
title
home phone
email address

This will be important in a few minutes. But first let’s take stock of everything we’ll do to set up authentication:

creating the zone
adding the submission page to the secure zone
creating the registration web form
adding the registration form to a page
adding login to the registration page
email confirmation message

It may seem like a lot, but the tools in Adobe Business Catalyst make it easy to add security to your site in just a few minutes, with no coding required.

Create the Secure Zone

Go to Website > Secure Zones and create a new zone. In the first step, you’ll name the zone and select the page to land on after successfully logging in. I’ll create one for the Dress Marketplace, and select the Submissions page as the landing page.

Next you’ll have to add the Submissions page to the Secure Zone. Select Web Pages in the drop-down; select the Submissions page in the list of assets on the left, and click the single right arrow to move it to the right.

This is similar to the way we created permissions for users back in Part 2. You can secure more than just pages; you can secure other types of content like blogs and forums.

At this point, only logged in customers can get to the Submissions page. If you try to navigate there, you will be blocked and prompted to login.

Oops, you don’t have an account for this zone! Okay, let’s make the registration and login page, so that we can get to the Submissions page.

Create the Registration and Login Page

First, let’s create the registration form in Modules > Web Forms. Let’s use the new web form builder to create the form — it has a very intuitive interface to add fields to the form. First name the form and use the Security Zone drop-down to link the form to the zone. We’re not going to add workflow in this example, so leave that set at Don’t use a workflow.

Earlier in the planning process, you determined which fields would be used in the registration form, so let’s find them on the Form Builder. Everything we need is in the Contacts tab, but we can add custom fields and even CAPTCHA image validation to the registration scheme if we wanted to.

As you add fields from the left, they show up in the right column. You can preview the form, and even add it to a web page from here.

We’re going to need to create a page for our registration form. Create the page and add the registration form from the Add Modules tool, or come back to the Web Form section and add it with a one-click insertion.

Save and Publish Your New Registration Page

To access the secure content, the first time through users will need to create a new account, but after that, they’ll just log in and be on their way.

Now we need to add a login form to the page. Open the page from the Web Pages section, click on Add a module, and select the Secure Zone section. Select the Secure Zone login form, choose your zone from the drop-down, and insert it in the page.

As before, you can style the look and feel of the form as needed to make it look clean and well-integrated to your design. Once you are ready, save and publish the page. After cleaning up the HTML and CSS a bit, you’ll have a working registration page.

In order to make it a little more polished, let’s add some more dynamic content for logged in users. Open the Submissions page, access the module manager, and click on the Secure Zone.

There are a number of pre-built tools that anticipate items you would want to add to an authenticated user experience. I’m going to add the line “[name] is logged in. Click here to log out.”

This is actually the combination of two modules: Customer First Name and Link to log out of a secure zone. Play around with these tools to create an even richer experience for your users.

Connecting the Dots

Okay, you have the registration/login page, and your Submissions page is restricted to logged in customers. How do we get there? I added a link from the List page to drive customers to create an account.

Adding Search

That covers the ability to browse the listings, but as the Marketplace fills up with content, people may want to search to filter the results they receive. Adobe Business Catalyst has pre-built modules to let you search the web app data generated on your site.

Go to Web Site > Web Pages and open your listings page. Add some HTML to separate the Search section from the Browse section using a

; for each one (we’ll add some jQuery to this in a minute). Use the Module Manager to insert a Web App Search Form into the new div you’ve created. Select the Dress Listings from the drop-down and insert the module.

Initially, the search form will give you all the fields to filter against.

You can customize the number of fields, HTML, and CSS to meet your needs.

Now you’ve got a simple search form implemented, but the page is a little clunky, having to scroll up and down to get to browse and search. Let’s add a little jQuery to collapse the divs, and use an effect to open and close the divs that exposes or hides the search or browse capabilities.

Add Some jQuery

Creating a fulfilling and intuitive user experience will encourage your customers to drive through the site and use the capabilities you spend time implementing. jQuery is a strong JavaScript framework that is easy to implement, and gives you powerful tools to create an interactive experience on your site.

While we like to show how easy it is to use Adobe Business Catalyst to add functionality without coding, this takes us in the other direction: showing how a platform this powerful gives you the ability to dig in and add the libraries you want.

We’ll do a little light coding in JavaScript and HTML to implement the library and use the Accordion effect in jQuery UI; I think you’ll find this is a simple introduction to adding jQuery to your Adobe Business Catalyst site. If you are a jQuery Ninja, the platform exposes JavaScript handlers in many modules and forms. so that you can easily use Ajax and other techniques to create a rich interactive user experience.

First of all, add the jQuery libraries to your application by linking to the scripts from within your templates so the libraries are accessible all over your site. Most browsers will cache the file after it’s first requested, so you won’t be adding download time, but you will need to make the call so that the scripts are used for each page.

You can upload the scripts to your site or link to them externally. I’ll upload the latest jQuery and jQuery UI libraries:

I’m going to use the accordion effect to close and open the divs when a customer clicks on the heading Search or Browse. First, I need to set up my HTML to create headers and divs to contain my modules. In the sample code below, I’ve cut out the search form for space:



Search the listings



Browse all listings

{module_webapps,8211,a,}

I have a wrapping div with a class called “dress_market” which l use throughout the dress_market to apply common CSS styles. Within that I have a div with an id=”accordion” — that will wrap both the search and browse divs. The headers contain hrefs with an anchor tag that will give me a click event to bind the accordion action.

My script will contain the JavaScript to execute the accordion:

Place this script at the bottom of the page so that the JavaScript is evaluated and executed after the page has loaded. You can also use the document).ready(function(); method to ensure jQuery is executed after the page has fully loaded.

When you click on the Browse all listings link, the accordion closes the top div and opens the browse div in the same page.

There you go. If you are feeling adventurous, the search form comes preloaded with a tag loading the search results {module_webapresults}. Use jQuery to highlight the search results returned.

Full documentation on this library can be on the jQuery UI.

Email Confirmation

In addition to connecting the site pages, you’ll want to customize the email messages that new registered users receive, as well as the messages they receive after creating a new item in the marketplace. Registration email can be configured from the Admin menu by selecting Customize System email and then selecting the Secure Zone Login Details.

You can customize the email sent after submitting a new item by clicking on Manage Web App, selecting your new app, and then clicking on Set up Auto Responders. We don’t need to spend too much detail on this — you can customize the text and have access to dynamic tags to add more data to the email.

Now let’s recap: We’ve created an app, the listings page, the details page, and a submissions page. We’ve restricted access to only logged in customers, created a registration/login page, customized the email messaging, and knitted it all together with appropriate links. Not bad for one day, hmm? All without having to create custom code. Now that you’ve got a new app, how about checking out some of the activity it’s generating?

User Activity Reports

Remember that one of the main ways to build business is to increase the interactions and transactions performed by your existing customers. It’s critical to build marketing to attract new customers, but once you’ve got them, keep them interested with newsletters, special offers, and other relevant communications.

Adobe Business Catalyst provides robust and intuitive tools to mine the data that you collect from your web apps, so you and your clients can grow their online business. In addition to the activity data you’ll see in the admin section’s dashboard, you can build custom reports about the activity in the online Dress Market.

Go to the Reports section and click on Create a Customer Report. Select the bottom item to build a report for Customers and Web Apps; then click Next.

Select the fields you want in the report. I’ve selected a few based on the type of app we made.

Next, tell it what data to filter against.

In the bottom section called Filter by your own customer CRM Forms and Fields, select your web app in the drop-down. If we leave Display all fields selected, you’ll see a report that filters all fields by the criteria in the first screen. Due to your test data, that may end up as an intersection of one row of data. Instead, leave it unchecked and then click Generate Report.

You should see a list of all the items submitted, by whom and on what date. Now click next to name and save the report.

This simple activity report is the first step to generating marketing lists. Think of the opportunities for cross selling!

Now you have a community of highly motivated users, creating accounts on your site and arriving without additional marketing. You could add dress-making and related products to your online store, segment the reporting, and send targeted ads to these customers.

You could create newsletters especially for this segment of your customer base and increase traffic to other sections of your site to grow your business.

Limitations of What We’ve Achieved

It’s important to note that there are some limitations to what we’ve just built and what you can build with Business Catalyst web apps. For example, we won’t be able to enable the purchasing of web app items. While Business Catalyst web apps are very powerful, it’s important that you do a little research to find out what’s possible and what’s not.

Summary

In this article, we’ve explored how Adobe Business Catalyst can help you to unleash the most powerful asset your client has: customers.

User-generated content can take a website from being a place where customers expect only to receive information, into a tool that they use to exchange information. Adobe Business Catalyst’s finely controlled web app management capabilities make this potential transformation a reality.

The best part about this kind of tool is that as more customers use it and find out about it, the more it grows. User-generated content is a powerful way to extend the reach of your online business, and Adobe Business Catalyst is a great way to harness that power.

Now you can tackle the short quiz we’ve compiled to see how much you’ve absorbed from this article.

note:SitePoint Content Partner

This tutorial has been made possible by the support of Adobe. In cooperation with Adobe and independently written by SitePoint, we strive to work together to develop the content that’s most useful and relevant to you—the readers.

Web App Gallery, Part 1

Ricky Onsman — Fri, 12 Nov 2010 04:06:48 +0000

In July this year, Microsoft released a beta of WebMatrix, a suite of tools intended to make web development accessible to people who don’t necessarily have much experience or technical skill. To further increase the incentive for beginners to get creative and functional, Microsoft has made WebMatrix Beta 2 available as a free download.As well as being a powerful website editor that’s easy to use and lightweight in the sense of not being overloaded with rarely used features, WebMatrix also integrates with a gallery of web apps to add some pretty impressive functionality to your website.The Windows Web App Gallery includes Blogs, CMS, Forums, Galleries, Tools, and Wikis, but today I want to focus on eCommerce apps, as this topic has been coming up a lot. Actually, so have all the other categories, but they can wait for another day. Today, I’m going to follow the money trail.And it’s true, electronic commerce is an area of ongoing, increasing interest among website owners, designers, and developers. Why not use emerging technology to cut out the middleman and sell direct through your own website?As Figure 1, “The WebMatrix Web App Gallery” shows, the Windows Web App Gallery has three options listed under eCommerce: nopCommerce, mojoPortal, and Kartris.

Figure 1. The WebMatrix Web App Gallery

Today, I’m going to see what nopCommerce can do for me. The description provided seems to cover most of the points I’m looking for.Incidentally, all three of these apps are written in ASP.NET, and at least part of the point of the WebMatrix approach is to encourage more people to be comfortable with ASP.NET. It’s interesting that two of these apps — and many of the others — are open source, and several programming languages are represented.Nevertheless, if you want your nopCommerce store to go live, you’ll have to put it on a Windows server.

Installation

Before I get that far, though, I’m going to set things up on my local computer. First, I need to download nopCommerce. WebMatrix makes this easy, acting as a dependency manager, download manager, and installer. Note that you don’t have to use WebMatrix for this: you can also use Microsoft Web Platform Installer or download direct from the nopCommerce website. I’m exploring WebMatrix’s integrated approach, so I’ll select nopCommerce, enter a Site Name and click Next.You’ll see the End User License Agreement, a link to specific EULA terms and conditions for each component to be downloaded, and the total download file size. If you don’t have a version of SQL Server installed, you’ll find one included in the download list for nopCommerce. If you’re happy with the EULA, click I Accept.WebMatrix will then install nopCommerce for you, as shown in Figure 2, “WebMatrix installs nopCommerce”.

Figure 2. WebMatrix installs nopCommerce

Click Finish, and WebMatrix will then lay out the screen in Figure 3, “The WebMatrix site administration screen”, which summarizes some site administration options.

Figure 3. The WebMatrix site administration screen

There’s plenty here to look at later, but right now we want to finish the nopCommerce installation.Right under the Site Name, you’ll see the URL for the local version of your website. Click on that URL.This will launch your default browser (or a new tab or window if you already have the browser open) and start the nopCommerce installation wizard illustrated in Figure 4, “nopCommerce Installation Screen 1”.

Figure 4. nopCommerce Installation Screen 1

Click Next.On the following screen you can enter your server details, as shown in Figure 5, “nopCommerce Installation Screen 2”. We’re going to be working on a local copy of the site, so we’ll enter localhost/sqlexpress as the SQL Server name.The people behind nopCommerce make a point of recommending Windows Authentication for logging into the server. This allows the status of being logged into a Windows account to act as authorization for accessing the server.

Figure 5. nopCommerce Installation Screen 2

Click Next.The third page of the nopCommerce installation process, shown in Figure 6, “nopCommerce Installation Screen 3”, lets you enter database information.

Figure 6. nopCommerce Installation Screen 3

Create a database name, leave the Create sample data box checked and click Next.The last step of the installation wizard, shown in Figure 7, “nopCommerce Installation Screen 3”, lets you change the default admin email address and password to something of your own choosing, or you can accept the default options of admin@yourstore.com and admin for now.

Figure 7. nopCommerce Installation Screen 3

Click on the Go to Site link at the bottom of the screen.Now, you see that? That right there? That is the ecommerce website you just built. Figure 8, “The default nopCommerce front end” shows what I mean.

Figure 8. The default nopCommerce front end

It’s a bit of a masterstroke to have this result come up at this point in the process.One moment, you’re trying to remember if you have SQL Server installed, and the next you’re looking at a completely configured, pre-populated, functioning, and slick-looking online sales machine.You can see why Microsoft found this app suitable to include in its Web Gallery. It fits the brief perfectly: empowering prospective web developers by letting them adapt an existing framework to their own needs, rather than having to build one from scratch. And it doesn’t require great technical knowledge, although the more you learn about it, the more you can do with it.The presentation of the draft site in a working format allows you to really explore the functionality you can make available to site visitors. As you explore the structure of the site you’ve just created, you’ll notice the many ways nopCommerce provides us to tap into the commercial power of social networking. Sharing through Facebook, Twitter, and the like; wishlists; comparison lists; email a friend; customer ratings; and user reviews all provide ways for site visitors to help promote your products — and they’re all built in.Now, nicely put together as this is, you will undoubtedly want to customize the visual design to your own tastes. At the start of this article, I mentioned that WebMatrix is a very useful website editor and this is where it comes into play as an ideal tool to edit the HTML and CSS of your site’s front end before you publish. That’s a whole article in itself, so for now we’ll focus on management of the back end.Having decided to stay with the default visual design for now, we’re going to find out how to set up nopCommerce.

Administration

To get to the back end, log in to the site as a user would, through the Log In link at the top of the home page. If you set a new admin email and password back in Step 4 of the installation, use that, otherwise use the default login.Once you’re logged in, you’ll see that a link called Administration has been added to the top toolbar. This link only appears to users signed in with administrator rights.Click the Administration link to display the nopCommerce backend dashboard depicted in Figure 9, “The nopCommerce Dashboard”.

Figure 9. The nopCommerce Dashboard

When there’s money at stake, site administration needs to be clear and powerful, enabling a site owner to maintain their online presence, and manage orders and sales. In this regard, nopCommerce is outstanding. Functionality is enhanced by a simple, clear layout and logical structure.Let’s take a quick walk through the toolbar at the top of the display.CatalogueThis set of fields defines your stock: categories and sub-categories, the products, the attributes those products might have such as color and size, and the product manufacturers’ details.SalesThese fields cover how transaction details are handled, including managing orders, recurring payments, gift cards, and sales reports.CustomersYou can manage your new and returning customers here, assign roles to them that help you market to them, and analyze statistics about their online behavior.PromotionsThis area lets you set up arrangements for affiliates to sell your products, product sales and marketing campaigns, discount offers, price lists, and promotion providers.Content ManagementThese fields represent ways in which you can use additional content to increase the value of the site to your prospective customers. Options available for you to configure and customize are voting polls, news item listings, a complementary blog, topics to be used in specialist pages such as FAQs, templates for product, category and manufacturer, customized messages to the site visitor, and a means to set the language options for the site.ConfigurationHere’s where you’ll find the settings that fine-tune the customer’s experience and your ability to meet their needs, including global settings, blacklists, payment methods, tax settings, shipping options, user-focused localized settings such as countries to which your products can be sold, any restrictions or conditions relating to states and provinces, languages into which your customers can translate key content, currencies you will accept, and options for assigning stock to specific physical warehouses or distributors.SystemThe System menu includes options for managing site logs, message queues and general site maintenance tasks.HelpThere are two main sources of site management support: user forums maintained by nopCommerce, which are designed to allow experienced users to act as troubleshooters for those users who have queries; and a User Guide, which is available as a paid download from the nopCommerce website.So that’s the overview. Let’s get our hands dirty.

Add a Product

Go back to the Catalog menu and hover the cursor over Products to reveal the flyout menu. Click on Manage Products, as shown in Figure 10, “Manage Products”.

Figure 10. Manage Products

The main display is a list of all your products ordered alphabetically by title. There are three ways to filter this display: by product name, category and manufacturer, or by using a Search button to apply selected filters.There are also options to download the catalog as a PDF, export it to an .xml file, export it to an Excel spreadsheet, to import product data from an Excel spreadsheet, and to delete selected products.These are all powerful tools, allowing you to maintain stock control with a minimum of fuss, but the option we want right now is Add new.

Figure 11. Add a New Product

The three tabs across the top of the Add A New Product window shown in Figure 11, “Add a New Product” represent the categories of information relating to your products. Not all of them have to be completed, but some are mandatory for the ecommerce set-up to work.

Product InfoThis page has fields that accept information describing the product itself. Easy to browse through with little tool tips to guide you, these fields range from the obvious (short description, long description, price) to the highly flexible, powerful, and clever.For example, you can enter a figure reflecting stock levels for a product. This figure decreases as you sell your product. When stock gets low, you can opt to disable the Buy button (continuing to display the product but not allowing orders), unpublish the product (remove it from display), or do nothing (allow it to sell out). You can choose to be notified when stock quantity reaches a certain point, and you can allow orders to be placed even though the product is out of stock.Really, just browsing these fields will give you ideas about how to sell online. Note that some of the fields offer drop menus of available options. These options can be set by you in the Catalog and Configuration administration.SEOnopCommerce keeps your search engine optimizations simple and purposeful. For each product, you can set a list of meta keywords, a meta description, a meta title, and a search engine-friendly page name.How useful these are depends on how well you use them as part of an overall SEO strategy. The good news is that a setup like this lets you experiment easily.Category MappingsThis is a very powerful part of nopCommerce. Naturally, you can give your products categories and subcategories that you define yourself — you’d expect that. But nopCommerce lets you map your products to multiple categories and subcategories. This gives you great flexibility in the way you market your products. It’s another area that will make think seriously about your product.Manufacturer MappingsAnother key way in which consumers go about searching out desirable products is by searching for the manufacturer. Given that, it makes sense to categorize your product by manufacturer. Once again, nopCommerce allows you to map one product to multiple manufacturers, which can in turn be subcategorized.Related ProductsOnce you’ve saved your product details, you can use this page to relate it to other products, allowing you to display the kind of “If you like that, you might like this” functionality that has become very popular.PicturesThis is where you’ll be able to add the images that you display for each product. You can upload your pictures and set an order for their display.Product SpecificationsHere you can select from pre-configured product specification attributes and the options for each attribute, as well as add your own to the current record only, on the fly. So if you were selling computers and this product record was for a notebook, you could specify here the screen size as an attribute and the available sizes as a list of attribute options. You can then choose to allow your customers to filter the display of products by each attribute. You can also choose whether or not to display these attributes on the product page, and in which order.If you’re at all familiar with ecommerce systems, you’ll probably have recognized a lot of the features and facilities in nopCommerce. At this point, I’d ask you to consider whether you’ve ever seen all of those options providing such powerful functionality laid out in such an easy-to-use, point-and-click kind of way, for free?Speaking of money, it’s time we took a look at the business end of nopCommerce.

Payment Integration

Payment Integration is a real strength of nopCommerce. Among the 36 payment provider options are PayPal, Google Checkout, Worldpay, and 2Checkout. It’s a smart move to tie up deals with so many payment providers, putting nopCommerce a step ahead of many of its competitors.Let’s set our site up to accept payments made via PayPal.PayPal provides an option to advise you when a payment is made through your website, so let’s do that. You have to activate PDT and Auto Return in your PayPal account profile, and acquire a PDT identity token, which you will enter into the appropriate field in your nopCommerce back end. This token is used in all PDT communication you send to PayPal. Follow these steps to configure your account for PDT:

Log in to your PayPal account, click on the Profile subtab and, in the Seller Preferences column, click on Website Payment Preferences.
Under Auto Return for Website Payments, switch the radio button to On.
In the Return URL field, enter the URL of the site that will receive the transaction ID posted by PayPal after a customer payment, http://www.yourstore.com/PaypalPDTHandler.aspx.
Under Payment Data Transfer, switch the radio button to On, and click on the Save button.
Now click on Website Payment Preferences again, and scroll down to Payment Data Transfer. You will see your Identity Token.
Go back to your nopCommerce admin page and from the Configuration menu, select Payment and then Payment Methods. You’ll see the full list of possible payment methods and providers.
Click on Edit for PayPal Standard.
Switch to the Configuration tab, and scroll down to the foot of the page.
All you need to do right now is enter a valid email address and copy your PayPal Identity Token into the PTI Identity Token field.
Switch back to the System Info tab and check the box titled Active.
Click the blue Save button, and you’re done.

Now if you go to the draft version of your site on localhost and click through as if purchasing a product until you get to the Select Payment Method page, you’ll see that PayPal Standard now appears as a payment option alongside the others.That list, of course, correlates to the payment methods marked as Active on the nopCommerce administration Payment Methods page. This is a very straightforward way to manage online payments.

Summary

It’s a measure of what a powerful little app nopCommerce is that, on the one hand it can so quickly construct a draft site and so painlessly add a payment method, while on the other hand it’s sophisticated enough to accept over 50 variables relating to the product and how it can be purchased.As we saw when we were adding our Product Record, the key to getting the most out of an app like nopCommerce is to do your homework. The more you — or your client, or employer — work out all those variables that might affect a prospective customer’s decision to buy your product, the more work your site can do to complete the sale.

SitePoint Content Partner

This tutorial has been made possible by the support of Microsoft. In cooperation with Microsoft and independently written by SitePoint, we strive to work together to develop the content that’s most useful and relevant to you.

This kind of sophisticated web development is now available to just about everyone, since it requires little or no knowledge of any kind of code. Microsoft has done well to embrace the open source community as it populates its Web App Gallery.Powerful, smart and easy-to-use web apps like nopCommerce, supported by an active developer community and made available at no cost through tools like WebMatrix, will win a lot of friends.Care to test your knowledge of what’s in this article? Go on, take the quiz!

Introduction to Adobe Business Catalyst – Part 2

Rob Frieman — Thu, 19 Aug 2010 07:31:49 +0000

In the first part of the this series, we started to explore Adobe Business Catalyst, a full-service platform that you can use to enable your clients’ online businesses. In that installment, I showed you was how easy it is to take your design and build a website around it using content management tools and templates that you design and manage. We added interactive forms to collect data that could be used in marketing campaigns, and we created products and catalogs in your online store without having to do any back-end development. For each new capability, we saw how you could exert very fine-grained control over the user experience you’d created in order to help your client’s online business grow.

That’s really the strength of Business Catalyst: the platform is designed to give you the tools to extend your business, so that you can deliver a solution for your clients to grow their business.

Additional reading includes;

In this installment, we’ll delve a little deeper into those core capabilities to finish building out the online store, look at the rich analytics tools that are built into the system, and show you how to provide your client with their own access login—with reduced permissions.

First, though, let’s have a quick recap of the work environment: you can use Business Catalyst online as a web-based set of tools to manage the structure, content and functionality of your site, or you can work locally and FTP your files up to your site for further integration. If you use Dreamweaver to develop your sites, that product offers a Business Catalyst extension that integrates your site template and module capabilities, so you can work locally and sync to the remote site as you go. For this walkthrough, I’ll be working online.

Ecommerce Configuration

In part one of this series, we set up a simple online store and populated it with Catalogs and Products. Business Catalyst lets you dig down within the templates to customize the way your products are presented—from the pages’ look and feel, to the data elements. There’s also a fully integrated shopping cart solution lurking under the hood. So let’s customize the different workflow components of the shopping cart, checkout, and fulfillment to round out our online store.

The Shopping Cart

This is probably obvious for you, but just to be sure we’re on the same page, the purpose of a shopping cart is to allow customers to select multiple items to purchase over the course of a visit to an online store, and to complete purchasing all of those items in one checkout process when they’re finished. The Business Catalyst shopping cart follows strong conventions in that it’s session-based—meaning the data in the cart only exists through the current session—and it uses Ajax to let the customer add items to the cart while staying on the current page to continue shopping. The products were added to pages, and the shopping cart contents module was added to the template, so that it’s persistent through the site (see part one for more information).

On the shopping page, the items are listed with a name, price, quantity, and an Add to Cart button. When the customer clicks on the button, the product is added to the cart and they are prompted with an alert, as Figure 1, “Adding an item to the shopping cart” shows. (If you’re feeling adventurous, use a little bit of Ajax to capture that event and display the message inline!)

Figure 1. Adding an item to the shopping cart

As soon as the item is added, the View Cart module is updated to reflect the total number of items in the cart, and their total cost. When you click on the View Cart link, you can see the detailed contents of the cart. Like most of the Business Catalyst tools, the default design is simple and completely functional—but it may not gel with your site’s design. As you work through your design, you can determine which elements need to be modified and you can choose which functional and data elements fit into your client’s online store. Let’s look at the default design, which is shown in Figure 2, “Viewing the cart”.

Figure 2. Viewing the cart

For starters, I want to remove the breadcrumb navigation and update the styles used for the headers. I’ll log in to the Admin section of the site in Business Catalyst and click on eCommerce to bring up the tools I use to manage the online store. I want to edit the templates that are used for the shopping cart, so I clicked on the View Customization Options link in the right-hand navigation. As you’ll remember from Part 1, this the same area where we accessed the templates to customize the Product and Catalog pages. You’ll find the shopping cart templates in the lower section. Click on Shopping Cart to bring up the editing screen shown in Figure 3, “Customizing online shop layouts”.

Figure 3. Customizing online shop layouts

Once again, the default mode is Design view, which lets you see the elements of the page. Also, Business Catalyst gives you access to all of the data elements available for the layout, as Figure 4, “Editing the shopping cart page” shows. If you wanted to add more data elements, you could insert them using the Tag insert drop-down menu.

Figure 4. Editing the shopping cart page

In this case, I’m going to be updating some styles and trimming the contents of this page. I’ll want detailed control over this process, so I toggle over to HTML mode, which Figure 5, “Editing the shopping cart in HTML mode” shows.

Figure 5. Editing the shopping cart in HTML mode

I remove the div that contains the breadcrumb navigation, and change the style attribute and the title of the page. Also, there are some elements that don’t fit with our current design, but which are important for the future growth of the site: Gift Vouchers and Discounts are great ways to encourage repeat business and are easy to include as part of product set up. For the moment, since we don’t have those programs in place, let’s remove them from the Shopping Cart screen. In addition, our client doesn’t want to allow customers to request a quote, so I removed that HTML and toggle back over to Design view; the result is shown in Figure 6, “The modified shopping cart layout”. That’s pretty simple—there are no requirements to write up, and there’s no haggling with a developer. You’re all set.

Figure 6. The modified shopping cart layout

After saving my changes, I can refresh the shopping cart page. Once again, my design—shown in Figure 7, “The updated shopping cart page”—won’t win any awards, but I hope it shows you the level of control that you have available to customize your store.

Figure 7. The updated shopping cart page

Let’s keep moving through the templates. Business Catalyst makes it easy to ensure you’ve customized everything in the checkout workflow. Take a closer look at the online shop layouts page—the templates are arranged in order, so you can step through each one to make sure it fits your client’s needs. The first thing a customer will do is add an item to cart, and once they’re finished shopping, they will need to view the contents of the cart. Next, they’ll need to enter their billing information, and finally, they’ll see a confirmation screen. In Business Catalyst, everything’s all set up and ready for you to apply your touch to the checkout experience, as Figure 8, “Customizing each step of the checkout process” shows.

Figure 8. Customizing each step of the checkout process

Once we make our changes to the Shopping Cart details page, we have two more steps in the checkout process to customize: payment and confirmation. Let’s see what the payment page looks like right now by clicking Check Out on the shopping cart page. The payment page—shown in Figure 9, “The default checkout page”—is really the main data entry step in completing the purchase: the customer enters their name, address, billing, and credit card information, and submits the form for processing.

Figure 9. The default checkout page

Again, the default layout is completely functional and quite simple but it needs some updating and customization to meet our business and design goals. In this case, we’re not just going to change the page’s look and feel: we’re going to customize some of the options in the drop-down menus and payment options. That template is called Registration – Buy. Click on it to edit it.

In the HTML view, I scroll down and modify the country list to remove countries in which we won’t be doing business, update the list of accepted credit cards and expiration dates, and modify the payment methods we’re going to accept. The updated page is shown in Figure 10, “The modified checkout page”.

Figure 10. The modified checkout page

As an alternative (and to get much more control at the field level), I could go to the Modules section, click on Webforms, and select the Online Shop Purchase Form. In the form editor you can add and remove fields that you want to have on, or leave off, your Purchase form, as Figure 11, “Editing the Online Shop Purchase Form Module” shows.

Figure 11. Editing the Online Shop Purchase Form Module

important: Changing the Module?

If you make changes to the module itself, remember that you must reinsert it into the page or template that uses it.

With a minor edit in the CSS, the form block is now left-aligned, and after making some minor text edits, we have something that’s a little closer to our design. As with all elements in the store, you can continue to fine-tune and hone the user experience to create a design that’s right for your client. The payment processing will be handled in the back-end—we’ll take a look at that next—but the validation of data entered into the mandatory fields is handled in JavaScript. You could add some Ajax to the page to perform some inline validation and improve the user experience even more. If you want to edit the wording in the messages, you can do that right in the JavaScript file called ValidationFunctions_EN.js—it’s all accessible and under your control.

The last step is to customize the payment confirmation page. Back on the Online Shop Layouts page, click on Receipt – Buy to edit the template. If you want to add any customer service messages or contact information, you can add it here.

Before you can accept credit card payments, you’ll need to configure your Payment Gateways. Go to eCommerce > Payment Gateways and select the proper gateways for your client, as shown in Figure 12, “Configuring Payment Gateways”. Note that credit card processing does require an upgraded, paid account.

Figure 12. Configuring Payment Gateways

You’ll need to get the appropriate merchant information from your client to set up the gateway, as well as PayPal information if they want to receive payments through PayPal as well, as shown in Figure 13, “PayPal”.

Figure 13. PayPal

You’ll want to work with your client to configure this part of the site, but as you can see, making updates to it is just as easy as any other part of the online store. Other details in the ecommerce section are just as straightforward to customize—shipping options, tax codes, and even QuickBooks integration are all pre-built and ready to use.

Introduction to Adobe Business Catalyst

Rob Frieman — Fri, 02 Jul 2010 01:08:45 +0000

The good thing about a poor economy is that it gets businesses focused on the essentials and forces them to extract as much as value as they can from every product they sell and every customer relationshipThis is true for our design shops as much as it is for our clients. For a lot of designers, it means stepping outside of the comfort zone to provide a broader set of solutions for clients in order to increase sales. Delivering a website isn’t enough—you need to build a partnership with your client and help them grow their online business, not just their site. Although you understand the various pieces of the puzzle, including site hosting, online sales, customer relationship management, email marketing, and analytics, it can be a challenge to deliver a solution that integrates these pieces well—especially if you run a small firm with limited back-end development and database resources.Additional reading includes;

Adobe Business Catalyst gives designers the ability to deliver complete online business solutions, not just websites. Business Catalyst provides site management, integrated ecommerce, a selection of pre-built data-driven modules, as well as reporting and analytics tools. I know you’re skeptical. Let’s face it: all-in-one solutions have a bad track record. Typically, a provider may do one thing well, then try to add on features to differentiate themselves from the competition. Unfortunately, those features fall short of what you need for your client. And in a way, this makes sense, doesn’t it? Your plumber might be great, but do you want him as your dentist too?The good news is that Adobe comes to the table with an extremely robust set of meaningful features that will let you partner with your client to help them grow their online business, not just their website. That means you can spend less time worrying about, well, the plumbing on the solutions you deliver; instead, you can spend more time creating value and increasing your and your client’s revenue.

A Solution Platform

Business Catalyst is web-based and is available through a range of subscription models with increasing levels of customization and capabilities. The subscription model starts at $16 per month for the basics, and $39 per month for the full solution. There’s a 30-day free trial available, which you can use to follow along with this tutorial. Adobe also has reseller plans available for a one-time fee. These plans aren’t essential to your use of Business Catalyst, but they allow you to white-label the whole platform so you can present it to your client under your brand with built-in billing and customer management tools.In this two-part tutorial we’re going walk through an example of building a website for a dance school. Our client’s goals are to provide information for current and new students and families, increase enrollments online, sell products, and to build a base for email marketing. I’ll assume that you already know how to design a site, though we will cover some basics, and that you know HTML, CSS, and JavaScript.In part one of the tutorial, we’re going to build a template-driven website with a database back end, plus integrated ecommerce functionality including a shopping cart, check out, and payment processing. We’re also going to add email marketing so the school can reach out to customers to generate new business. In part two, we’ll dive deeper into the payment processing workflow and user roles. We’ll also explore the rich data-mining and reporting capabilities you can provide for your clients as soon as you’ve built your first form.I’ll assume you’ve already done the hard work and designed the site. I’m using a simple design for a fictional Irish dance school in Philadelphia.As I noted above, Business Catalyst has a wide set of capabilities and you can dig in pretty deeply into each one. In this tutorial, we’ll be using these tools:

templates
Web pages
modules
ecommerce
Web forms
email marketing
reports

By the time you’re done, you’ll have a all the know-how required to set up a fully-featured ecommerce site with a customer database and email marketing capabilities. You’ll also have the knowledge to answer our Adobe-sponsored Article Quiz!

The Dashboard

First, let’s get familiar with the environment. Once you set up your account and log in, you’re presented with a very broad, web-based work space—the Dashboard. The first time you log in, you’ll see a set of helpers and tutorials. We won’t be using those links for now, so you can ignore them. Below it you’ll see the dashboard that shows all the activity on your site. Since it’s brand new, there shouldn’t be any site activity. You’ll see navigation elements across the top of the page; when you roll over them, you’ll see a sub-navigation menu for each item, as Figure 1, “The Business Catalyst Dashboard” shows.Figure 1. The Business Catalyst Dashboard

Take some time to explore the tools and get familiar with the waythey’re organized. Once you run through them, you’ll find that the tools become intuitive, and you can easily understand the conventions that youneed to adopt. Adobe acquired a mature platform when they bought Business Catalyst, and it has very strong contextual help and support that provides instruction and examples. The Adobe team has also built good text-based and webcast-style support tools.

Now, let’s get started building a site.If you want to “move in” to Business Catalyst, there’s a helpful site importer which will take your existing site and import it into the system. You can modify and configure the site from there. However, we’re going to start from scratch in this tutorial.Adobe Business Catalyst has very deep integration with Dreamweaver CS4 and CS5, and this makes moving between environments an almost seamless process. However, I’m going to keep things simple and work in the web-based tool for this walkthrough. Let’s take a look at the design I’ve come up with—as Figure 2, “The interface design” reveals, so far, it’s just a shell.

Figure 2. The interface design

I’m a big fan of planning; as the saying goes: “Measure twice, cut once.” As you can see in Figure 3, “Understanding the template and the page”, I’ve identified areas in the template for images and text, and I’ve worked out a simple navigation scheme. I’m going to get started by planning out a template and a page.

Figure 3. Understanding the template and the page

The yellow area is the template, and the grey area is the page. I’ve already written the underlying HTML and CSS for the site. In order to leverage the system’s content management capabilities, I’m going to upload some static assets (CSS, JavaScript, and images), create a new template, create a page targeting that template, and publish the results.

All Roads Lead Home

Adobe Business Catalyst is a very mature product that never leaves you stranded. The navigation always gives you a route home, or at least to a familiar place. If you’re not sure about something, you can cancel or navigate away before you commit a change to your project. In addition, every time you click Save and Publish for a web page, the event is logged in an audit trail, so you can roll back to a previous version of a page, template, or product at any time. There are also multiple paths to some of the most common tools, including shortcuts on the navigation bars. I’ll be describing some of the most basic ways to access tools so that you can get familiar with the landscape, but on your own, you’ll find lots of ways to access your favorite tools.

How to Pick a Shopping Cart: 7 Carts Reviewed

Tim Slavin — Tue, 04 Nov 2008 14:00:00 +0000

Selling online can be a great way to expand an existing business or start a new one. Sites like eBay and Etsy let you sell within their sites and use their shopping carts. You benefit from their traffic and marketing but they control the look and functionality of their site.

The other option is to sell through your own web site. To do so, you need

a shopping cart
a payment-processing gateway, and
a process to fulfill orders.

In this article we’ll mostly look at shopping carts, but we’ll also touch on how you might handle payments and other cart-related issues. We won’t discuss how to find and deliver a product to customers – I’ll assume that you’ve got that part covered.

For this article, I tested seven shopping carts: three simple site add-ons (PayPal, Google Checkout, and Mal’s e-commerce; two regular shopping carts (Zen Cart and digiSHOP), and two third-party hosted carts (Network Solutions Ecommerce and CoreCommerce). Despite all of these options, at the end of the day you may need a custom shopping cart, so I’ll also cover some aspects to consider when building your own eCommerce system.

The carts mentioned here are not the only carts available – for example, Yahoo Small Business and Squirrelcart (which has my favorite mascot) and X-Cart are further options you could seek out. However, the method I’ve used to evaluate these carts can be used to appraise any shopping cart – ultimately, it’s your online business.

Where to Start?

When a client asks me to help them find a shopping cart, I often start with the feature lists from different cart vendors. I copy all the features into a column in a spreadsheet, and add a column for my client to assign priorities: 1 = must have, 2 = should have, or 3 = nice to have. Then we sort features by priority and add columns for each cart we consider. This feature-oriented process helps my clients focus on what they need. Using a feature list helps figure out whether they need a basic cart or a more complex one.

While we’re looking through the feature list, I work with them to understand exactly what they want to accomplish. Is the online business their entire business or just part of it? Does the shopping cart need to integrate with their accounting system, for example, QuickBooks? What are their products and how complex are their products – for example, will they offer quantity discounts?

There are other important cart features to test. Can customers see their order status online? Can you easily edit all outbound emails used to confirm sales, notify customers when a product is shipped, and so on? If your online business has several employees, can you restrict the reporting to just certain users? How hard is it to add options to products?

Another great question to ask is, how is credit card data stored in the database? Credit card processing companies have strict rules about storing card data. My advice: avoid storing any important customer data. Let payment-processing services handle that risk.

Once you’ve evaluated all the features you need?and sorted them into “must have,” “should have,” and “nice to have” features, the next step is to evaluate actual shopping carts to determine what works best for your business.

Simple Carts

If you’ve only a few products to sell, or you want to test the waters, then you have two options for selling online. One is to use an existing site such as eBay, Half.com, Etsy, or a similar site. For example, my wife sells all our spare books on Half.com because it makes no sense to bother with anything more complicated.

Your second option, when you have only a few items to sell, is to use the payment-processing capabilities of another online service, for example, PayPal, Google Checkout, or Mal’s e-commerce. These “add-on’ carts work especially well if you have a web site that already exists. They let you use their site to configure your products, and they generate payment button code that you can copy and paste into your web pages. The code creates a button on your web page that, when clicked, sends the site visitor through their service for payment.

Let’s look at three popular add-on solutions:

PayPal

http://www.paypal.com/

PayPal is an online payment processor – currently owned by eBay – that processes credit cards, as well as transactions members make within their private network. Most people are aware of the private network payments, but don’t realize that PayPal also handles payments through major credit cards and electronic checks.

To use PayPal as a cart, you’ll need to register an account with them. This involves setting up a PayPal account, then linking a bank account to your PayPal account. To validate your bank account, PayPal deposits a small amount into your account, say 11 cents, and you log in and tell them the amount they deposited.

To create a product within your PayPal account, select the Products and Services tab on your main account page, then the Website Payments Standard link on the Products and Services page. This takes you to a Buy Now Buttons page. Select the type of payment button you want then follow the directions to work with their Button Factory. You’ll see a chunk of code at the end of the process that you can paste into your web site. It’s a fairly easy three-page process to create a button or email link to a product you sell.

PayPal currently charges 1.9â€“2.9% of transaction cost plus 30 cents (USD) per transaction. There are no monthly fees and no setup costs. They provide detailed accounting for anything sold using their Buy Now buttons.

Support for PayPal is through their online help pages, email, or phone. They’re a large organization and it can take time to get a proper response. But the response typically is thorough.

The only criticism I have, is that the PayPal payment page makes it very hard to figure out how to pay with major credit cards. The most obvious part of the payment page is the PayPal login box. It’s only when you notice a small image of credit cards and a Continue link that users realize you don’t have to log in to pay with a credit card.

Google Checkout

http://www.google.com/checkout/

In the past few years, Google has jumped into the online payment market with its service, Google Checkout. This service uses Buy Now buttons to process payments through any web site.

To use Google Checkout, you’ll need a Google account, then use their service to verify your bank account details. The validation process is similar to PayPal’s: Google deposits a small amount of money to your account, then you tell Google how much they deposited.

To create a Buy Now button, log in to Google Checkout and select the Tools tab across the top, then the Buy Now buttons link on the left or center of the page. From here, it’s easy to generate button code you can copy and paste into your web pages.

When your site visitors click your Google Checkout Buy Now button, they’ll be taken to a simple web page at Google that lets them enter their payment details. This is much more direct and obvious than PayPal’s initial payment screen.

Google Checkout currently charges 2% of each sale amount plus 20 cents (USD). If you use Google AdWords and link it with your Google Checkout account, you can receive free transaction processing in some cases. Google does hold back a reserve amount to handle chargebacks if they believe you have an excessive number. Buyers also have the chance to provide a customer review. You can respond to the review if it’s negative, but Google will remove a review only if it’s hate speech or not constructive.

Support for Google Checkout is primarily through help pages and forums, which are quite extensive and amazingly thorough. However, it took me a while to find the Contact Support page for Google Checkout, as it’s not clearly linked from their Merchant Help Center. Nor does it appear there’s telephone support. These are significant issues, considering most online payment processors have phone numbers and support forms clearly visible.

Google Checkout also can be used as a payment processor in shopping carts you host yourself. When used as a payment processor through a full-featured shopping cart, the buyer can store their payment details once with Google and won’t have to enter their data at your site.

Mal’s e-commerce

http://www.mals-e.com/

Another shopping cart that lets you create buttons and handle processing remotely is Mal’s e-commerce, a 10-year-old company based in Spain. Mal’s provides a lot of functionality in a simple, easy-to-use service. They offer both free and paid Premium carts, depending upon what features you need. And there’s software you can download to manage your orders processed through their service from your desktop.

To use Mal’s you need to set up an account. On their main account page, you’ll see a Cart Setup tab. Click that tab to open a page that provides links to define your products, payment methods, and cart behavior. You can, for example, add your logo on the payment pages your customers will use. Like PayPal and Google Checkout, it’s fairly easy to set up different options.

Mal’s offers a fairly robust set of features for a simple cart. You can implement discounts, email notifications, shipping methods and costs, downloadable products, gift vouchers, and other features. They also have a broad range of payment process from different parts of the world.

The cost for Mal’s? Free. Their service depends on heavy users who pay for the Premium service, in turn funding the free carts. So there are no costs per transaction, monthly fees or setup charges.

Support for Mal’s e-commerce is primarily through an extensive set of documentation that is well written and task-oriented. You can email them, but they ask that you use the help text and the forums first as most questions are answered there.

Regular Shopping Carts

If your online business is a new one or an extension of an existing business, chances are good that a regular shopping cart is required. You’ll want to let a third party manage product quantities, discounts, stock sell-outs, orders, shipping, and all the rest.

In addition to having the option of a regular cart or a more complex cart, you also may install and host the cart yourself, or use a third-party service. Installation on your own server gives you ultimate control but you’re also responsible for securing the database, upgrading the software, and all the other maintenance tasks.

Third-party services solve those problems but introduce others. For example, a client of mine uses Network Solutions, but it costs too much, the interface is quirky, and pages load very slowly at times. However, my client is prepared to put up with this to avoid the hassle and responsibility of installing and maintaining a shopping cart on their server.

Hosting a Shopping Cart on Your Own Server

The two regular carts we’ll look at are Zen Cart and digiShop. Zen Cart is free and open source, while digiSHOP is from a private software company. They offer similar capabilities but can be quite different in actual use.

Zen Cart

http://www.ZenCart.com/

The first install-it-yourself shopping cart you might look at is Zen Cart, an open source cart that’s an offshoot of osCommerce, a PHP-powered cart that was once popular but has since suffered, partly due to its convoluted code base). In my experience, Zen Cart (and osCommerce) benefit from the same strengths, for example, a strong online community and lots of modules to extend the shopping cart functionality. However, they also share the same weaknesses, namely too much code to wade through to make changes to templates.

Installing Zen Cart is fairly easy. You upload their files to your server, set up a database, and visit the installation page in a web browser.

Once Zen Cart is installed, the administration area makes it fairly easy to create products and categories. The installation process also lets you load the database with sample data, so that you can become comfortable with the cart as you load in your own products.

Creating templates is somewhat more complicated. There are a handful of templates that can be changed to reflect your page design. However, editing a template requires carefully maintaining PHP code. It’s fairly easy to break if you’re not sure of what you’re doing. And, like most carts, there are dozens of templates that control the center content area of the cart – the elements that make up product listings or details.

Support for Zen Cart can be found on their forums, a wiki, and tutorials. I’ve had great results when I’ve used these support tools.
The price of Zen Cart software is free. However, as with any software you install yourself, you will pay – either for your time to set up and configure, or from an expert in HTML, CSS, and PHP.

digiSHOP

http://digishop.sumeffect.com/

The digiSHOP cart is the best software I have found for less than a thousand dollars (USD). While there are other carts in this price range (and more expensive carts), digiSHOP is fairly easy to use and, therefore, is a good cart to discuss and compare with other carts.

Like Zen Cart, installing digiSHOP is relatively easy. You upload your files and set up a database with a database username and password. Then you open your browser, call up their installation web page, and follow directions. You even can avoid the hassle of installation by hiring them for $45 (USD) to do the installation for you on your server.

Once installed, digiSHOP is fairly simple to use. Creating products is simple: click the Products tab then the Add a Product button. You can easily add variants for your products or a couple types of descriptions, for example, a short blurb and a full description.

digiSHOP also integrates with a number of payment processors, as well as affiliate programs. There’s also the ability to integrate with QuickBooks, Stone Edge, Google Analytics, and eBay. And digiSHOP also integrates with the company’s other products, for example, chatFUSE for live chat and fireBLAST for email marketing.

Adding your page design to digiSHOP should be trouble-free. There are two sets of header and footer templates – a set used for secure pages and another set for pages delivered without an SSL certificate. Using your page design, copy and paste some small bits of PHP code that digiSHOP provides, then upload the four files to the templates folder. If you need to modify the design of the functional areas of the carts, their template file names are obvious enough. digiSHOP also provides an online widget that will do the conversion from your page design to their templates.

What I appreciate most about digiSHOP is that its file structure and code are very clean and easy to understand. This makes maintenance more manageable, for example, to find and tweak templates.

Support for digiSHOP is relatively quick and at the right level of detail. They have an online knowledge base which is helpful. But the best support has been through email.

Costs for digiSHOP vary depending on which version of their software you buy. If you don’t need many features, their standard version works fine for $299 (USD). The two versions with more features cost $349 (USD) and $799 (USD).

Using a Hosted Third-party Shopping Cart

If you’d like to avoid the bother or risk to install and maintain a shopping cart on your web server, the other option is to use a hosted service. With a hosted cart, you can use your own page design and URL.Network Solutions

Network Solutions Ecommerce

Network Solutions E-commerce provides a broad range of cart functionality, for example, the ability to handle variants and map quantities to each type of variant. If you sell a shirt in three sizes, you can set prices for each size shirt and track quantities as they’re sold.

To set up your page design in Network Solutions E-commerce, click on the Design tab in the control panel, where you can add a header and footer. The Layout options are primarily settings that you define for your cart overall, for example, color schemes.

The Network Solutions E-commerce cart comes with a variety of buttons used through the checkout process. You can add your own set if you sign up for their Pro package.

Adding products is done through the Inventory link. The Products option makes it fairly easy to add details about each product, including variants, images, and other details. Tracking inventory, price discounts, gift certificates, and other product-related details are also available within the Inventory options.

There are a lot of online tutorials to help with setting up your cart in Network Solutions E-commerce. Their telephone support also has been excellent, especially at odd hours like weekends and public holidays.

Prices for Network Solutions E-commerce are $49.99 per month (USD) and $99.99 per month (USD). The higher price lets you use your own interface design.

CoreCommerce

http://www.corecommerce.com/

If you like the digiSHOP cart but do not want the bother of hosting a shopping cart, CoreCommerce.com is the hosted version of digiSHOP, with extra features. It also makes a good alternative to consider with Network Solutions E-commercet. Because CoreCommerce is the digiSHOP Pro version offered as a hosted service, setting up products and performing other tasks are identical to digiSHOP.

Adding your site design to CoreCommerce is just as easy adding it to their stand-alone digiSHOP software. You create header and footer pages from your page design, paste a few bits of code, then copy the templates to their server. For the content areas of the cart, you’re limited to using CSS to style the checkout form and other bits that appear in a shopping cart page. Unlike a stand-alone cart, you can’t go in and tweak the code for the signup form or other page elements.

With regular shopping carts, it’s critical to test how easy or difficult it is to add your web site design to cart pages. It’s fairly effortless with digiSHOP software to accomplish. Templates typically divide into two groups – one set for layout of the cart web page, and one set for individual elements of the cart pages, for example, the login screen or payment detail form.

Prices for CoreCommerce run from $39.95 per month (USD) to $99.95 per month (USD). The higher price adds more bandwidth and server storage space.

Custom-developed Shopping Carts

Beyond regular shopping carts are custom-developed shopping carts. These carts are either created from scratch by a programmer who then sells their cart to their client base, or are customized, based upon an existing cart like Magento.

My recommendation is to work through feature lists, and carefully research and analyze your needs, before you tackle custom-developed shopping carts. The features you need may be present on carts that already exist. Beware of a situation where a small compromise on your part commits you to considerable expense.

Then, if you still can’t find what you need off the shelf, proceed carefully. Seek solid references for the programmer or agency that will create your shopping cart. When you talk to referees, be sure to ask how the programmer handled changes: did they get snippy and rude, or did they insist that the client clearly describe what was needed?

Also, you should require the code for your cart to be thoroughly documented. That will make it easier for you to take your cart to another programmer or agency, should you need to.

Finally, with custom carts, it’s important that software development happens in a structured way. Your requirements, for example, should be written down and all questions and testing should refer to back to these. The programmer should set up a test bed where the cart can be built and tested without affecting any live production. You also should confirm that the programmer or agency uses tools to store the code, keeps track of any changes to the code, and helps maintain code over time.

These are all basic software programming practices, but you should still ask. A no to any of these questions, or I don’t need a public test bed, or We don’t document our code are signs that you should go elsewhere.

Search Optimization and Shopping Carts

Whatever cart you choose, optimizing your online store for search engines is critical. With simple carts like PayPal, Google Checkout, and Mal’s, you must optimize the pages on your website: they handle only the payment processing. With regular shopping carts, however, you should have, at the least, the ability to:

oversee the HTML page title, as well as the page title that appears within the content on the page.
control at least the URL filename for each of your product catalog and detail pages, and, ideally, the file folder path to that filename.
modify meta tags, image title and alt attributes, and the words used within your links.

I would argue that the ability to output your shopping site as a site map, and then submit and upload through Google’s Webmaster Tools, is also key for search optimization. And some carts let you export your products as a list for shopping comparison sites.

One approach that I’ve used for search optimization is to publish product catalog and detail pages as static web pages. This gives my clients 100% control of what’s on every single page. They let their shopping cart manage the orders and payments. Other clients let the shopping cart do everything. Both groups do well, so I assume what works is a matter of your personal preference.

Some Final Thoughts on Shopping Carts

Hopefully this article has managed to avoid a flame war about who creates the best shopping cart. It really depends on your needs and preferences. Here are a few quick issues to also consider when you pick a shopping cart:

Check which control panel your hosting company uses, if using an install-it-yourself shopping cart. Some web hosts’ control panels, such as Plesk, treat secure and non-secure pages separately, so installing and configuring your cart may require a few extra steps.
Develop a backup plan for your orders, customer list, templates, and settings. Backing up is never a bad idea!
Look up online web site monitoring services that will periodically check your online store, and email or text you when your site is down.
Avoid storing credit card data in your cart database for better your security.
Make sure you look into chargeback policies and costs if you use Mal’s, Google Checkout, or PayPal.

Finally, some hosted carts offer McAfee Secure or similar services to ensure that an online store is secure. This clearly is a preference issue. My view is that it’s good if it helps your customers feel comfortable enough to buy. These services also pinpoint any security issues before you find them the hard way.