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:

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:

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:

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:

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.

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:

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.

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.

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:

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.

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!