Tweaking the Interprise Suite eCommerce Minicart Display

Author: Rod Miles
June 4, 2009

Visitors to your eCommerce website will enjoy seeing a ‘mini cart’ while they shop around. A minicart is a smaller, stripped down version of their full shopping cart, typically placed on side panels or inside website headers. As a web designer, I am happy to take advantage of the Interprise Suite eCommerce (ISE) Skin Tokens for displaying a minicart inside my custom design skins [i.e., (!MINICART!) ]. But, I like to make some modifications to the default minicart display and I believe you might too.

There are a few CSS and Javascript workarounds I’ll discuss to get around having to edit any C#, because the minicart markup is generated directly by the ISE code-behind, and is not easily accessible without the need to recompile your code-base.

Notes on this example: I assume the reader to have an intermediate skill level for writing valid CSS and also manipulating HTML elements (DOM) with Javascript. In my example, I have used JQuery to traverse, manipulate, and edit some elements because it works great, it’s feature-rich, and appears to have no conflicts with ISE core Javascript libraries. You can use whichever Javascript package you prefer. You may also want to refer to a previous post: Creating Custom Design Skins for Interprise Suite.

The Generated ISE Minicart HTML Markup

By default, the minicart HTML generated by the ISE code-behind comes out looking like this:

  1. <table width=”150″ cellpadding=”0″ cellspacing=”0″ border=”0″>
  2. <tr><td align=”left” valign=”top”>
  3. <img src=”skins/Skin_1/images/minicart.gif” border=”0″><br>
  4. <table width=”190″ cellpadding=”4″ cellspacing=”0″
    border=”0″ style=”border: 1px solid #444444;”>
  5. <tr><td align=”center” valign=”top”>
  6. <a href=”p-1-product-abc.aspx”>Product ABC</a>
  7. <br>Qty 1&nbsp;$ 5.00<br/><br/>
  8. <a href=”p-2-product-xyz.aspx”>Product XYZ</a>
  9. <br>Qty 1&nbsp;$ 5.00<br/><br/>
  10. Sub Total: $ 10.00<br/><br/>
  11. <a href=”ShoppingCart.aspx”>
  12. <font color=”BLUE”><b>CHECKOUT</b></font></a>
  13. </td></tr>
  14. </table>
  15. </td></tr>
  16. </table>

And here’s how it ends up looking by default – not ugly, but a tad unattractive, in my opinion:

ISE Default Minicart

First the problems, besides the obvious markup errors like mixing “<br/>” with “<br>”:

  • We can’t easily make changes to the HTML because it is derived from the C# code-behind;
  • The output is in a table, not horrible, but the “align=center” on the table cell will need to be looked at; I like this kind of output to be aligned left or right;
  • The “<FONT>” tag… my, oh my; But it will be useful for us, see below;
  • There’s no ID or class associated with the minicart for targeting it with CSS;
  • When the shopping cart is empty, the minicart doesn’t show anything – no nothing. This may or may not be what you want but in my case, i’d like it to show “Your Shopping Cart is Empty” when there’s nothing there.

Implementing the Interprise Suite Minicart Tweaks

First, you’re going to want to put your minicart Skin Token inside a wrapper in your template files so you can properly target it with CSS:

  1. <div id=”miniCart”>(!MINICART!)</div>

Here is my snippet of CSS that targets the minicart. Granted, i’m using that <FONT> tag in a way that probably wasn’t imagined originally, however it allows me to do what I need in modern browsers.

  1. /* Mini Cart CSS */
  2. #miniCart table { line-height:1.1em; }
  3. #miniCart table tr td img, #miniCart table tr td br,
    #miniCart table table td a font b { display:none; }
  4. #miniCart table table tr td br { display:inline; }
  5. #miniCart table table td { padding-bottom: 5px; }
  6. #miniCart table table td a font { float:right;
    display:block; width:112px; height:22px;
    background:url(‘../images/button-checkout.gif’) no-repeat 0 0;
    cursor:pointer; }
  7. #miniCart table table td a font:hover
    { /* roll-over sprite background-position */}

Because the table cell align=”center” and table border are both inline, I can’t override it with CSS. So, i’m going to use JQuery. And i’m also going to use JQuery to add some text to the ISE mini-cart when the cart is empty. So, first you’ll need to ensure you include the JQuery libraries in the <head> of your ISE template file:

  1. <head>
  2. <script src="/skins/Skin_(!SKINID!)/js/jquery-1.3.2.js"
    type="text/javascript"></script>
  3. . . .
  4. </head>

Then, you can use the following Javascript to target the minicart:

  1. /* JQuery Mini-cart Update */
  2. $(document).ready(function () {
  3. $(“#miniCart table table”).css({‘border-width’ : ‘0′});
  4. $(“#miniCart table table td”).attr({align : ‘left’});
  5. if ($(“#miniCart”).text() == “”) {
  6. $(“#miniCart”).append(“<p>Your Shopping Cart is Empty.</p>”);
  7. };
  8. }

You’ll have to create your own button image (and rollover sprite) for the checkout button. But with a little extra CSS tweaking (like adding an background image to the miniCart div) my minicart now looks something like this and works just great!

ISE Custom Minicart

You can download my minicart CSS and my minicart Javascript, but please review it for compliance with your specific version of Interprise Suite. This was written for ISE 5.3.

For more information on customizing Interprise Suite eCommerce, please feel most welcome to contact the Hybrid Forge design team: info@hybridforge.com.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • LinkedIn
  • Technorati
  • Slashdot
  • Yahoo! Buzz
  • Google Bookmarks
  • Ping.fm
  • Reddit
  • StumbleUpon
  • Suggest to Techmeme via Twitter
  • Twitter
read users´ comments (0)

Creating Custom Design Skins for Interprise Suite eCommerce

Author: Rod Miles
June 2, 2009

I recently developed another custom eCommerce design skin for one of our Interprise Suite eCommerce (ISE) clients. While I regularly design custom skins for ISE, each time I begin I realize how few online resources are available to help web designers skin the shopping cart side of ISE. So, I decided to walk through an example of creating a custom design with a different home page design/layout then the design/layout of the inner pages of the site.

Notes on this example: I assume the reader to have a web design mockup file ready (e.g., a Photoshop file), and to have an intermediate skill level for writing valid X/HTML markup and CSS. This example also assumes that Interprise Suite is installed and that the website is up and running in your dev environment.

ISE Skin Basics

Some basic Interprise Suite concepts that will make your custom design skin experience go smoothly:

  • You can invoke a different skin through a browser by using the following querystring, where “X” is the unique skin #:
    http://www.my-ecommerce-site.com/?skinid=X
  • All skin templates are located in the following directory, which is where you should put your CSS, images, Javascript, and custom XmlPackage files:
    …/my-ecommerce-site/skins/skin_X/
    …/my-ecommerce-site/skins/skin_X/css/
    …/my-ecommerce-site/skins/skin_X/XmlPackages/
    etc.

    (Note: make a backup copy of “…/skin_1/” you’ll need this later, plus just in case anything goes wrong throughout your customization process and you need to revert.)

  • Learn to love Skin Tokens, you’ll use these a lot. Skin tokens are snippets of text [e.g., (!SKINTOKEN!)] that you can place in your template files for automatically adding specific ISE information to your template. For example, following are the skin tokens I typically use in my templates. Some of the information generated by these tokens can be setup in the ISE client tool:
    • (!METATITLE!) – page title
    • (!METADESCRIPTION!) – page meta description
    • (!METAKEYWORDS!) – page meta keywords
    • (!JAVASCRIPT_INCLUDES!) – required in your template (ISE Javascript libraries)
    • (!PAGEINFO!) – not required, but very useful for generating page instantiation info
    • (!USERNAME!) – by default, this generates “You’re logged in as: XYZ“
    • (!SKINID!) – the current skin id being used, useful for various path-ing requirements
    • (!SIGNINOUT_TEXT!) – by default, switches between “Login” and “Logout” automatically as necessary
    • (!SIGNINOUT_LINK!) – by default, switches between “signin.aspx” and “signout.aspx”
    • (!MINICART!) – generates a “mini shopping cart” to show items currently added to a visitor’s cart

Creating the Interprise Suite Skin Template Files

Now for the good stuff. Web designers have their own personal process for generating the required X/HTML markup and CSS from a design mockup file (like a Photoshop file). I’m not going to suggest any changes to your process, but here is the general process I use for customizing ISE:

My ISE Customization Steps:

  1. Create HTML template files and CSS from a design file. Plus, a couple of quick sanity tests for the design.
  2. Create custom ISE image buttons (used throughout the site).
  3. Wire-up the required ISE components: ASP.net controls, XmlPackages, and Skin Tokens in your template.
  4. Upload your files and change necessary configuration options in the ISE client.
  5. Reset the ISE Web Cache

1. Create HTML Template Files and CSS Stylesheets

So, you have a design mockup already – great! In my example I’ve created a different “home” page layout than the “inner” pages of the site. I’m not going to detail how to cut up your design file – there are lots of great resources online that would do more justice to the topic than I. That said, to follow along, get your design cut up into 2 HTML files with the following structure on your local/testing server:

home template:   …/ise-template/home-template.htm
inner template:   …/ise-template/template.htm
css file(s):    …/ise-template/css/
image file(s):   …/ise-template/images/
javascript file(s):   …/ise-template/js/

For now, don’t worry about getting any of the String Tokens in place. Focus on the HTML and CSS of the template files themselves and perform the following sanity tests on your design:

  • How does font-scaling work +/- 2 font sizes? Does your design hold together?
  • Have you used CSS font-families so that visitors without your fancy “minion pro” font still have a good browsing experience? Just a note, while the infamous “Tahoma” looks great in most Windows environments, in Safari (Windows & Mac) it looks chunky – consider using something more Safari friendly in your font-family.
  • How does your design work in various versions of Safari, Firefox, Google Chrome, and Internet Explorer (IE)? Litmus can help you determine this. And for the various versions of IE, I’ve been using a handy little tool (still in alpha release at the moment my writing) called IE Tester.
  • How does your design look and handle in a mobile browser like Blackberry or IPhone? eCommerce customers shop from all kinds of devices.

2. Create Custom ISE Image Buttons

The buttons i’m referring to are the buttons that come with the default skins included with ISE. For example:

ISE Button 1
ISE Button 2

If you like these buttons, use them. If you don’t, get ready for a little Photoshop fun as (from my last count) there are over 100 different image buttons to customize throughout the website. All these buttons can be placed in your images folder:

…/ise-template/images/

Be sure to name them properly, else ISE won’t be able to find them. First, make a backup of all default skin buttons that come with ISE (check a default skin directory of ISE “../my-ecommerce-site/skin_1/images/”) and copy them wherever you’re checking your design cuts (“…/ise-template/images/”). Then as you create each new button, simply overwrite the same image button file, ensuring the file name stays the same.

3. Wire-up the Required ISE Components

Now that your basic design is tested and the general ISE image buttons are customized, it’s time to hook up your template with ISE. First things first, copy your “template.htm” file and rename it “template.ascx”; and copy your “home-template.htm” file and rename it “home-template.ascx”. These are the required ASP.net extensions for ISE.

Required ASP.net Components for your template:

  1. Take a look at the backup copy of “skin_1″ you made before you started – you did make one, right? Open “skin_1_backup/template.ascx” and copy the first 3 lines of the file into your custom “template.ascx” file. They should begin something like “<%@…” – these are the ASP.net controls and registers.
    1. <%@ Control Language=”c#” AutoEventWireup=. . . %>
    2. <%@ Register TagPrefix=”ComponentArt”. . . %>
    3. <%@ Register TagPrefix=”ise”. . . %>
  2. Just inside your <body> tag, place the following line. This line basically translates into your <form> tag which makes all the ISE whiz-bang magic possible:
    1. <body>
    2. <asp:Panel ID=”pnlForm” runat=”server” Visible=”false”  />
  3. Inside the “content area” of your templates, place the following ASP.net tag. This tag is where “content” items (such as topics, shopping carts, messages, etc.) will be displayed in your template:
    1. <div id=”content”>
    2. <!– ISE Content Area –>
    3. <asp:PlaceHolder ID=”PageContent” runat=”server”>
    4. </asp:PlaceHolder>
    5. . . .
    6. </div>

Instantiate the Skin Tokens Required:

  1. The <head> section of your template files should look something like this:
    1. <head>
    2. <title>(!METATITLE!)</title>
    3. <meta name=”description” content=”(!METADESCRIPTION!)” />
    4. <meta name=”keywords” content=”(!METAKEYWORDS!)” />
    5. <link href=”/skins/Skin_(!SKINID!)/css/default.css”
      rel=”stylesheet” type=”text/css” media=”screen” />
    6. <meta http-equiv=”Content-Type” content=”text/html;
      charset=utf-8″ />
    7. <script src=”/jscripts/core.js” type=”text/javascript”>
      </script>
    8. (!JAVASCRIPT_INCLUDES!)
    9. </head>
  2. Include the (!PAGEINFO!) token just below the opening <body> tag and before the previously mentioned ASP.net tag:
    1. <body>
    2. (!PAGEINFO!)
    3. <asp:Panel ID=”pnlForm” runat=”server” Visible=”false” />
  3. Include the (!USERNAME!) token wherever your design calls for it, I typically put this information inside the top (or header) section of the design:
    1. <div id=”header”>
    2. <span id=”userName”>(!USERNAME!)</span>
    3. . . .
    4. </div>
  4. Breadcrumbs:
    1. <div id=”breadcrumbs”>(!SECTION_TITLE!)</div>
  5. My Shopping Cart and Login/Logout links:
    1. <a href=”(!SIGNINOUT_LINK!)” id=”topLogin”>
      (!SIGNINOUT_TEXT!)</a>
    2. . . .
    3. <a href=”/shoppingcart.aspx” id=”topCart”>
      My Shopping Cart ((!NUM_CART_ITEMS!))</a>
  6. Mini-cart Display, which I typically use on a side panel.
    1. <div id=”miniCart”>(!MINICART!)</div>

Instantiate your ISE XmlPackages:

  1. Call the Search Box XmlPackage:
    1. <div id=”iseSearchBox”>(!XmlPackage
      Name=”skin.search”!)</div>
  2. If you want to display your shop categories, call the Categories XmlPackage:
    1. <div id=”catListing”>(!XmlPackage
      Name=”rev.categories”!)</div>

There are several other XmlPackages available to you, depending on your needs and the type of eCommerce website you are creating. Check the ISE documentation for more help on this.

You can download my ISE sample template, but please review it for compliance with your specific version of ISE. This one was written for ISE 5.3.

4. Upload your Files & Change ISE Client Configuration Options

Upload your template files (all images, all css, and .ascx files) to the desired skin directory. Typically, I just use Skin_1. Since I’ve already made a back-up of this, there is no harm in having your Skin set as Skin_1 – plus it saves you one step in the ISE client. Overwrite all the existing files with the ones you have created. Leave all the other files there, as-is. There’s no need to mess with them at this point. Now, all your files should now be uploaded to the server in a directory structure similar to this:

…/my-ecommerce-site/skins/skin_1/template.ascx
…/my-ecommerce-site/skins/skin_1/home-template.ascx
…/my-ecommerce-site/skins/skin_1/css/…
…/my-ecommerce-site/skins/skin_1/js/…
…/my-ecommerce-site/skins/skin_1/images/…

Next, open and login into your Interprise Suite client tool. Inside the client, you’ll need to goto the “eCommerce” module (800 eCommerce), and open “Utilities > Setup > Application Configuration”. (In here, make sure if you have multiple websites running, you are working with the correct site.)

Inside the “Application Configuration” select the group name “SITEDISPLAY”. There is an option here called “DefaultSkinID”, make sure this is set to the same Skin_X directory you are using for your skin files. If you are overwriting Skin_1 (as I have suggested) you do not need to change this, typically.

Interprise Suite Default Skin ID

Then, select the group name “SKINS”. There are 2 options here to change. Ensure that “HomeTemplate” is set to the same file name you uploaded to the server (in this example “home-template.ascx”. The “HomeTemplateAsIs” option should be set to “false” if you are allowing users to define content on the home page through the ISE client “Topics” pages. If you set this to value to “true” then ISE will assume that you are providing all content for the home page inside your “home-template.ascx” file itself.

Interprise Suite Default Skin ID

5. Reset the ISE Web Cache

You’ll likely need to reset the ISE web cache for your design to take effect completely. Also, if you make any changes to the template and/or ISE configuration settings you may need to reset it again, so it’s nice to know where to find it in the ISE client tool. One place you can find the “Reset Web Cache” button is under the eCommerce module (800 eCommerce), then select “Tools” > “Web Store”. Once inside the “Web Store” option, at the top of the tool bar you can see the button:

ISE Reset Web Cache

Congratulations – Your ISE Custom Skin Is Now Active!

At this point you should be able to see your custom design skin for Interprise Suite on the front-end of the website. Customizing Interprise Suite eCommerce can be tricky at points, but it’s worth it in the end as ISE is one of the best eBusiness solutions online when you need to manage inventory and provide eCommerce.

I hope i’ve helped you see how you can get around some of the issues of creating a custom ISE skin and that you’ve found this useful. We would love to hear from you if you have other thoughts on the process outlined above. If you have further questions about customizing Interprise Suite we invite you to contact us.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • LinkedIn
  • Technorati
  • Slashdot
  • Yahoo! Buzz
  • Google Bookmarks
  • Ping.fm
  • Reddit
  • StumbleUpon
  • Suggest to Techmeme via Twitter
  • Twitter
read users´ comments (2)

Interprise Suite Installation Success – A Pre-flight Checklist

Author: Chad Smith
May 19, 2009

Interprise Suite is a relative newcomer in the ERP (Enterprise Resource Planning) software marketplace. While the product has been around since 2006, not until recently has it been worthy of implementation within your business. Trust us, we started working with Interprise Suite in the fall of 2007 as the ERP platform for the start-up social enterprise ireturn inc. Like many things in life, first impressions are a very important indicator of future outcomes. In anticipation of the release of Interprise Suite 2009 we thought it was time to publish a handy pre-installation guide to ensure your first out-of-the-box experience is a success.

Drawing on my past experience as an Air Force officer I’ve have put together the Interprise Suite Pre-flight Checklist. As you may or may not be aware each and every time an aircraft leaves the ground there is a rigorous list of items to be checked before the pilot even starts the engines. Ultimately the pilot is responsible for determining the aircraft’s airworthiness before he embarks. As Interprise expands its marketing to offer single-user versions of Interprise Suite installable by virtually anyone, some of its requirements are bound to be overlooked prior to launching the installer. I admit that many of the checks I describe are simple RTFM to the propeller-head crowd, yet we anticipate many a motivated small-business owner who may not be schooled in the black art of aspnet_regiis.exe will want to evaluate the software for themselves.

This checklist makes the basic assumption that you are planning to install both the client and the server for Interprise Suite. To ensure your first flight is a success I present the Hybrid Forge Interprise Suite Pre-Flight Checklist.

Interprise Suite Install Pre-flight Checklist

Operating system

Interprise Suite is supported on the following operating systems: Windows XP Professional, Vista Business, Windows Server 2003 Standard or better, and Windows Server 2008 Standard or better.  Home edition of Windows XP and the lighter versions of Vista do not have the Microsoft web server IIS so avoid those.  Interprise will run on 64-bit versions of Windows but a specific 64-bit  version is not currently available. I’m currently using the release candidate of Microsoft Windows 7 Ultimate available through our MSDN (Microsoft Developer Network) subscription and its a significant improvement over Vista and even Windows XP for those hold outs.  In a future post I’ll describe our Interprise Suite experiences on Windows 7.

Disk Space

While the official requirement is 10GB for both the client and server, to avoid disk space issues from Microsoft service packs and other maintenance downloads as well as disk space for additional company or demo databases, ensure your machine has at least 20GB of free space.

Internet Information Server (IIS)

Prior to launching the Interprise Suite installer ensure you have Internet Information Server (IIS) installed.  Installing IIS before running the installer will save you from wasting time restarting the installer when it fails to detects IIS.  Be sure to test that IIS is running by starting your favorite web browser and pointing it to http://localhost.  Check whether your firewall is blocking traffic on the standard HTTP port number 80. Be sure to open access to this port to your machine.

Instructions on installing IIS for Vista

.Net Framework 2.0

Ensure that Microsoft’s .Net Framework version 2.0 is installed.  Note that this requirement is only relevant for early versions of Windows XP and Windows Server 2003 as newer Microsoft operating systems include the framework.

Download the .Net 2.0 Redistributable Package directly from Microsoft

Windows Installer 3.1

The Windows installer is an applications installation and configuration service that facilitates installation packages like Interprise.

Download the Windows Installer 3.1 package

Web Service Enhancements 3.0

In order for the Interprise Suite client to connect to your designated server over the internet you must install the Microsoft Web Service Extensions version 3. The Interprise “smart client” technology relies on web services to communicate with your server.   There are multiple versions available for download from Microsoft and only one is detected by the Interprise installer.  Here is the link to the version Interprise prefers:

Download the Web Services Enhancements (WSE) 3.0 for Microsoft .NET

Microsoft SQL Express 2005

The Interprise Installer will attempt to install Microsoft SQL Express 2005 if it can’t detect a previously installed version of Microsoft SQL Server. Microsoft recently reorganized the SQL Server website to promote the release of SQL Server 2008 and changed the location of the SQL Express 2005 download in the process.  The download is now available at the Microsoft SQL Server 2005 product page.

After checking each of the items on the checklist you are finally cleared to proceed with installation. I hope you enjoy the flight! As Interprise Suite and the software that supports it evolves I will continue to update the checklist. In the short-term I look forward to support for Windows SQL 2008 and Windows 7 and of course the official release of Interprise Suite 2009.

We Speak ‘Interprise Suite’

Interprise Suite is a sophisticated platform for powering your business. At Hybrid Forge we speak Interprise Suite and can help you quickly climb the learning curve on the path to understanding why Interprise Suite is such a compelling choice for your next ERP platform.

My next post on Interprise Suite will discuss deploying to virtual servers and strategies for effectively managing an Interprise server in the cloud. At Hybrid Forge we use VMWare’s ESX Server for virtualizing and managing our servers.  In our data-center environment ESX Server is extremely stable and the performance lost to the hypervisor is ‘virtually’ negligible. We have assisted clients deploying Interprise Suite within shared virtual server environments such as Parallels Virtuozzo and Amazon’s EC2 Cloud Computing Environment.

Contact Hybrid Forge today to discuss what Interprise Suite can do for your business at 877-66-FORGE (3-6743) toll-free.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • LinkedIn
  • Technorati
  • Slashdot
  • Yahoo! Buzz
  • Google Bookmarks
  • Ping.fm
  • Reddit
  • StumbleUpon
  • Suggest to Techmeme via Twitter
  • Twitter
read users´ comments (2)

Strategies for a Successful eCommerce Site Part 2: Choose your Platform

Author: Geoff Kliza
April 7, 2009

Part 2: Choose your eCommerce Platform

There are a number of eCommerce products to choose from that range from hosted (ebay, Amazon), to free open sourced (OSCommerce, Magento), to licensed (AspDotNetStoreFront, Interprise Suite eCommerce). Each has its strengths and weaknesses and finding the right fit depends greatly on the types of products you are selling and the size of your budget. There are 3 key strategic considerations when choosing a platform: Inventory management, SEO,  and Cost.

1) Inventory Management and Point of Sale:

Managing inventory is tough. Managing the same inventory in two places is ridiculous. If you have an existing inventory management system in place, you should look for an eCommerce solution that can synchronize or integrate with your existing software.

If you have a brick and mortar operation but are only putting a small subset of products on the Web, consider the future. It will be a lot easier to work from an inventory management / Point of Sale solution and push products to the Web than to build an on-line inventory and try to link that with your Point of Sale later. Look for a package that integrates Inventory Management, PoS and eCommerce at a minimum.

2) SEO Friendliness:

Let’s face it, SEO is no longer a competitive advantage on the Internet; it is a necessity. You will spend time and money initially and in the long run to attract customers to your site. You should be very careful when choosing an eCommerce platform that it formats HTML and URLs in an SEO friendly manner. Most current eCommerce platforms will do this, but some are better than others. Part 3 is dedicated to SEO considerations.

3) Cost Factors:

Typically, the key strategic decision in choosing a platform is if you can get it to do what you need within your allotted budget.  The following are areas that will cost you time and money when implementing your eCommerce solution:

  • Software Licenses
  • Web Hosting
  • Site configuration and Product Setup
  • Graphics Design and Layout
  • Custom Feature Development
  • Payment Gateway Integration

The trick is to pick the software that will minimize your costs in these areas while providing the maximum alignment with your product marketing strategy.

Software Licenses

If your needs are simple, you can probably get away with available open-source (free!) software. As your needs become more complex, there is often a trade off between license fees and custom development. A open source site may cost $10K in customization to get it to do what a $1K licensed shopping cart may do out of the box.

eCommerce Web Hosting

There are many providers who offer eCommerce software as a service (SaaS), where you can essentially rent an eCommerce site and payment system. This may be a way of offsetting expensive license fees, or a cost effective way of testing a product in the eCommerce sphere. Otherwise you will have to host your eCommerce site somewhere.

Site Configuration and Product Setup

Number of Products

Adding one item to your store is easy. Adding 1000 might not be. You will want to look at the ways you can upload inventory information into the software including images, product descriptions, key words and any other configuration the software allows. Some packages will offer import wizards, others will require some SQL skills, which may mean the difference between some one-on-one time with Excel or hiring a consultant.

Types of Products

This will be a deciding factor for some packages: they simply may not support the types of product you want to sell. Most current packages support downloads and hard goods. Services can be somewhat tricky depending on what information the customer is required to provide. Some platforms support kit items (think Dell’s computer configuration), some don’t. Some make it easy to create product attributes (matrix items) (size and color as an example) where some require you to create separate items for every SKU.

Product Information

How do you intend to communicate your product value proposition? Can it be done simply with words and pictures, or does it require animation or more sophisticated media? Most eCommerce software packages support multiple images, which in many cases is enough to communicate the necessary features of a product, but you may have some special requirements like Flash integration or product feature grids.

Graphics Design and Layout

This is one area where you have good control over your costs. If you have a small budget, sites like Template Monster provide templates for OSCommerce, Magento, Zend Cart, and C.R.E. Loaded. If you have a larger budget and are positioning your brand in a premium space you should consider spending money here for a custom eCommerce web design.

Some packages are easier to skin than others. Some also allow for multiple skins that can be easily changed, scheduled, or triggered by category.

Custom Feature Development

If you have specific requirements that are met by existing features, then you can often get the features built by custom software design shops. Again, this often a cost trade off with licenses, but some packages are more development friendly than others. If you are determined to develop some features, try to pick software that has a strong development community and a track record for easy customization.

Payment Gateway Integration

Whether you are planning to use third party gateways like Google Checkout and Paypal, or you want to integrate with your existing merchant accounts it is important to understand what support is available for receiving payments. Payment gateway customization can be expensive, but at the end of the day, this is the point at which you make your money on-line so it has to work. I’ll go into more detail on this in Part 4.

Budgeting and choosing what’s right for you

Now that you know what you’re after, take a look at the software platforms that are out there. Don’t fear the expensive ones because they can often save you an immense amount of time, and therefore cost, to set up and configure your store. Find the best fit for your budget that aligns with your objectives and start turning your eCommerce vision into a revenue stream!

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • LinkedIn
  • Technorati
  • Slashdot
  • Yahoo! Buzz
  • Google Bookmarks
  • Ping.fm
  • Reddit
  • StumbleUpon
  • Suggest to Techmeme via Twitter
  • Twitter
read users´ comments (0)

Strategies for a Successful eCommerce Site Part 1: Define your Market

Author: Geoff Kliza
April 7, 2009

So you’re thinking about taking some business on-line. I wish you all the success, but your dreams and my emotional support aren’t all it takes to launch a successful eCommerce initiative. The pioneering days of being the lone eCommerce store at the top of the hill are gone replaced with the thick, oppressive sprawl of a virtual big box outlets, mega-malls, shady back-alley stands, Starbucks-on-every-corner landscape.  It takes careful planning and diligent execution to grab your first piece of that ePie. Let me take you through some of the key strategic elements in building an eCommerce strategy; it’s probably more useful to you than good intentions.

We’ll take a look at five strategic areas that have a large impact on eCommerce success:

  • Part 1: Define Your Market
  • Part 2: Choose Your Platform
  • Part 3: Add Content, Content, Content
  • Part 4: Select Your Payment Method
  • Part 5: High Performance Tweaks

Throughout this series, I’ll use the term product to mean whatever you are going to peddle. It can be a tangible good, a package, a service, or any other construct.

Part 1: Define Your Market

Slick design, smart keyword analysis, and crafty product descriptions are usually what you start thinking about when taking that first step onto the Web. It’s all about technology, right? Well, yes, but don’t abandon what you may or may not know about marketing. The Web is about reach, but the secret is to connect with customers. Shopping cart software controls the presentation but it doesn’t do the marketing for you. The first thing you need to do before you worry about rounded corners, alpha blending, and ajax controls is define your target market.

Ultimately you want to define:

  • Target Customers – who is going to buy the product?
  • Product Positioning – why will they buy the product?

Defining Your Customers

OK, so who is going to buy your product? This is a very difficult question to answer, but an extremely important one. Maybe the most important one. The goal here is to determine the most attractive market segment for your product. Simply put, find the type of Internet shopper who you think will buy your product. This can be based on:

  • Age
  • Gender
  • Income Level
  • Occupation
  • Education
  • Lifestyle
  • Behaviours

Keep in mind during this exercise that most successful entrepreneurial ventures target narrowly defined market segments. Casting a wide net can seem like a good idea, but often burns resources faster than the intiative can earn market share. That’s like selling at a loss and trying to make up for it in volume.

Just a quick word about pricing. Price is king. You can spend all the time and money getting everything else right about your eCommerce venture and then get killed on price. Do your due dilligence and know what your competition is offering. If you price too high, your competition may keep you from ever gaining traction in the market. If you price too low, you are leaving money on the table. If your competition has already driven the price down, you may not be able to charge enough for your product to make your business case.

So find your niche. Figure out who the first hundred people are that going to be your customers. And by all means, don’t be afraid to modify your product to fit the specific needs of the market. Think of it this way, Nike changed the world when they realized that they could sell a customized running shoe specifically to distance runners. It’s all about innovative segmentation.

PositioningYour Product

So you now know who your customers will be. Good work, but you now have to worry about differentiation. Yeah, but I found a neglected customer group and have the perfect product! Sure you do, but you need to tell them why they should buy your product and not your competitors. This is called differentiation and it is the reason why people buy. Michael Porter in his famous Harvard Business Review article ”What is Strategy” points out that: “A company can outperform its rivals only if it can establish a difference that it can preserve. It must deliver greater value to customers or create comparable value at a lower cost, or both.”

The differentiator can be both physical and perceived. Physical differentiators can include features, ingredients, materials, and style. Perceived differentiators can include benefits, quality, usage, and pedigree.  Once you understand what makes your product more attractive to your target customers, you will want to create a positioning statement on which you’ll hang the rest of your eCommerce strategy.

The positionsing statement should define the benefits the customer will obtain, rather than just defining features of your product. You want to find something in your differentiators that speaks the most to your target customers. And I mean something. As in one – two max. This thing is going to sit in your customers mind relative to their needs and the competition. In otherwords, you want your thing to rank higher with your target customers than your competitor’s thing.

Right, and an anectode: There’s this little blue pill. As heart medication it is just another heart medication in a fairly saturated market. In a more recreational application the same product earned more than $400 Million in sales in the first quarter after launch. Proper positioning can equate to a fatter wallet – don’t treat it lightly!

So What Next – Is Your Product a Good Fit for eCommerce?

Now that you’ve brought some definition to your target market, you’ll want to confirm that your product is still a good fit for eCommerce. Now you may just want an eCommerce presence to help advertise and drive traffic to your physical store. The lessons above are still valuable. If you still want to sell, you should do a quick sniff test to make sure your product and target market.

Make sure your product is in the sweet spot for selling on the Internet. Some basic criteria include:

  • Good price range for credit card purchases: $50 – $500
  • Easily shipped or downloadable
  • Isn’t try before buy or tailored/fitted

Make sure your target customers are in a demographic that isn’t afraid to make on-line purchases.

Make sure your value statement can be communicated over the web in words and pictures.

Make sure your differentiators and value statement set you apart from existing providers. Don’t try to sell books unless you can do something Amazon can’t.

In the end, the Internet is a great communications tool and your eCommerce strategy may be highly experimental or simply for exposure. If this is the case, don’t be dissuaded, but at least go forward with that expectation.

Conclusion

eCommerce can seem daunting because of the technological considerations, but don’t lose sight of the basiscs of marketing before you get started. The Internet will let you reach to every corner of the globe, but don’t fall into the tempation of trying to do it all at once. Spend the time to clearly define your market by understanding your target customers, crafting your product’s value proposition to those customers and making sure the eCommerce business plan is viable.

Happy selling!

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • LinkedIn
  • Technorati
  • Slashdot
  • Yahoo! Buzz
  • Google Bookmarks
  • Ping.fm
  • Reddit
  • StumbleUpon
  • Suggest to Techmeme via Twitter
  • Twitter
read users´ comments (0)

5 Duplicate Content Issues Common to eCommerce Sites

Author: Rod Miles
March 10, 2009

Unless you’ve taken careful consideration to handle duplicate content issues with your eCommerce web site or Content Management System (CMS), Search Engines (SE) will see multiple versions of the exact same content – even though you may have entered/submitted the content only once. Often this is referred to as the “canonicalization” issue. Initially, this might not seem like such a bad problem, right? More content from your site indexed in search engines, but…

Unfortunately, for business owners, duplicate content issues are not good for your Search Engine Optimization (SEO) strategy. What happens in this case is that your SE credit for this content is lowered when spread out on different URLs. It would be a better SEO strategy to ensure the search engine indexed a single version of the content, thus giving as much credit to this content as possible.

Why do search engines not like to see duplicate content on your site? Likely because search engine spiders (crawlers) spend extra resources looking at the same content on your site, and also because search engines do not like the same content showing up multiple times in the search engine results pages (SERPs).

5 reasons search engines see duplicate content on your CMS or eCommerce web site:

1) Duplications Due to Sorting Values in Querystrings

The first reason is the use of certain types of sorting values in querystring parameters:
e.g., http://www.example.com/index.php?catid=2&sort=price)

In this case, the sort parameter in the querystring is “price”, and there would likely be a links on the page to other sorting options, such as “name”, “date”, etc. So, while the page would have essentially the same content for visitors, the various sorting options may cause search engines to see multiple versions of the same content, because URLs would be different. Read on to learn techniques to fix this problem.

Important: Search engines index the content found at individual URLs, not web site “pages” or “files”.

2) Inconsistent Links to Your Site

In general, obtain as many quality links from reputable sources related to your industry as possible. While you cannot help how people link to you, a second reason why search engines see duplicate content is due to the way people provide links to your site. Take a look at the following URLs:

http://www.example.com

https://www.example.com

http://www.example.com/index.htm

https://www.example.com/index.htm

http://example.com

https://example.com

http://example.com/index.htm

https://example.com/index.htm

While all these URLs may show the exact same information to your visitors (you might even consider them the same “page”), to a search engine these represent different indexable URLs. Even if people use UPPERCASE and/or lowercase in their links to your site (or with or without the “www.”) then these links may end up diluting your SE credit for the content, depending on the search engine. More on how to solve this problem below.

3) Duplications From Session IDs in Querystrings

Session IDs in URL querystrings are a third major reason for duplicate content issues on your web site:
e.g., http://www.example.com/index.php?sessionid=abcdefghijkl12345

Session IDs tell a web server that the page is being used by a particular visitor. They are used for keeping information about the visitors web site visit and are be extremely useful (and often necessary) in eCommerce web sites. But again, remember that search engines index URLs not “pages” or “files”, so if there are links to URLs with session ids, these links may cause the SE to index multiple versions of the same content. Renowned Google guru Matt Cutts recounted a story where a single privacy policy was indexed several thousand times due to session IDs in URLs.

4) Duplications Due to Printer-friendly Pages

Printer-friendly pages are also a source of duplicate content on your site. Many eCommerce and CMS web sites offer a printer-friendly version of a page, which contains all the same content of the regular page but in a format suitable for physical printing. The best way to ensure search engines do not see this as duplicate content with these pages would be to:

  • Use a meta “noindex” tag in the head section of the printer-friendly page
  • Put the specific URL in the site’s robots.txt as disallowed
  • Put rel=”nofollow” into the link pointing to the printer-friendly page

These directives tell the search engine not to index the content on the printer-friendly page.

5) Duplicated Product Information

Particularly for eCommerce web sites, if you resell another manufacturer’s product it is often the fast and easy to copy the manufacturer’s product descriptions verbatim to put on your website. While doing this allows you to get your products online faster, it will not help your overall SEO strategy as much as you would like it to.

Take the time to modify product descriptions, even slightly will help. Do a search for the products on Google and see what other resellers of the same product have written for the description. For best results as an online reseller, make sure your product descriptions are different from competitors selling the same items online.

How to fix these duplicate content issues?

Thankfully, Matt Cutts has some great insight for all web masters on this topic. As an eCommerce consultant and SEO professional, I would advise interested web masters to take a look at Matt’s video for a thorough analysis of the duplicate content problem and resolution.

From our experience, here is a summary of solutions for various duplicate content issues on your site:

  • Custom programming to change your CMS or eCommerce software to generate only the URLs you want. Normalize the URLs on your site;
  • Pick one “canonical” URL and ensure you link consistently within your site (especially in your sites navigation and internal links);
  • Implement the canonical link element for you pages:
    <link rel=”canonical” href=”http://www.example.com/product.php?item=favorite-items”/>
  • Make all non-canonical URLs do a permanent (301) HTTP redirect to the preferred URL. Use server-side programming to ensure the 301 redirect is implemented correctly. Use an HTTP debugging program like Fiddler to confirm the 301;
  • Use Google’s Webmaster Tools to specify “www.” or no “www.” on your site;
  • Submit XML sitemaps to Google to break ties in preferred URLs. Particularly important for solving item #1 above, if Google sees multiple versions of the same content at URLs differing by only a few querystring parameters, the XML sitemap is used to break a tie and Google will [supposedly] index the link in your XML sitemap rather than the link found on your site.

A final note:

Exercise caution when dealing with your web server and any server-side programming. Invite a professional team to look over your duplicate content problems and advise you on the best way to solve them so you can get the best results for you content in search engines. For more information on solving duplicate content issues with your website, we invite you to Contact Us.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • LinkedIn
  • Technorati
  • Slashdot
  • Yahoo! Buzz
  • Google Bookmarks
  • Ping.fm
  • Reddit
  • StumbleUpon
  • Suggest to Techmeme via Twitter
  • Twitter
read users´ comments (1)
Next Entries »

Hybrid Forge

Software