Hampton & Co.

Integrated design concept of main company website into the NitroSell template system.

NitroSell provides high end Eccommerce solutions.

Work done under contract with LamarSoft.com

Key Tasks:	Technologies Used:
Worked with graphic designer to create seamless transition from the Russ & Daughter's company site to the online NitroSell shop. Utlized NitroScript to create custom pages and content. Extensive HTML,CSS editing.	Dreamweaver NitroScript

Recently, I created a template from a designer's mockup for the online store for Russ & Daughters, a gourmet foodstore based in New York.

Their online store used NitroSell, an eCommerce solution that utilizes Microsoft Dynamic's Retail Management System.

The template was required to seemlessly integrate with Russ & Daughter's new website.

Previously, I have created a number of templates for various CMS (Joomla, Wordpress, etc…). This template however, was a bit more involved.

Usually, when working with a template I have full ftp access to the template files.  For NitroSell, however, the html and NitroScript could only be edited online via the backend NitroSell manager.  Thankfully, FTP access was available for css and images.

In the "Edit Store Layout" portion of the backend I was confronted with 15 or so separate sections, pages, and panels. Each requiring varying levels of editing.

To mold the overall layout I spend a great deal of time in the  "Header" and "Footer" sections. The "Header" encopasses the top header and left column, while the "Footer" covers the right column and footer respectively.

The navigation was dictated by the Tabs panel. Generally the tabs panel is populated with from the menu configuration portion of the backend manager.

NOTE: Nitroscript can be tricky to deal with.   If you are familar with any text-based coding languages (like PHP) you will find it relatively straightforward.  There is documentation available that I found helpful, but often incomplete. Unless you absolutely have to build the template around the exsisting code. Once you become more familiar you can start to.

Suggestions For Designers and Developers:

• Study the templates, that NitroSell provides natively.  Get to know the various views, elements and panels that NitroSell uses.  Try to base your design off of that.  Trust me when I say, the more "Custom" your design, the more time, money, and aspirin you will use.
• Get to know the NitroSell backend manager. Get to know the configuration "switches" that you can turned on or off.
• Make copies of the original code to keep as a reference.  They will also come in handy when you find your self having to start over like I did a number of times.
• Plan your typography and CSS. 
• CSS and FireFox's Web Developer were my greatest allies in the war to make the template behave. The NitroScript often produced code that was quite annoying to deal with.  Since not having access to it, I had to often resort to "display:none;"
• Start the HTML from scratch, but keep the Nitroscript code.  The standard custom template that I worked from used tables for layout.  As a fan of tableless layouts, I was able to easily create a <div id> structure that was easily editable through the CSS.
• Removing the NitroSell Brand buttons.  These are required and I'm sure part of the terms of service.  In the event you have permission to remove them.  Try the following:
  • element {display:none !important}
  • element {position:absolute;right:4000}

 

NitroSell is not a designer friendly eccommerce environment.  Many content elements seem to be hard coded into a particular positions and special requests from NitroSell support requied to move things around.

Case in point: the Product Specials list (a.k.a. Featured Items) that appears on the category and department pages. The amount of control given to you in the website manager over this is minimal.  You can turn it on, turn it off, and set the number of items you want. Other than that, your pretty much at the mercy of NitroSell.

Option One - Use the RSS Feed:

Because it is also an RSS feed you can turn it off on the website and pull the feed using Javascript and style it up with CSS.  This approach, though practical, is also limiting, as the feed only contains the Item name and part of the description.

Option Two - The CSS/Javascript method

Leaving the Product Specials switched on with 6 items to list, I set the containing element of  to

#containingElement{display:none}

This essentially removed the product list from view, while keeping it on the actual HTML document.

Then using a function I wrote in javascript (jQuery) I copied the data from the feed and re-presented it into the location of my choosing.  In addition I was able to present the items in a tabless fashion where I could style it however I wanted.

The function also allows me to set the number of items according to whatever context I wanted.  Here is the list on the home page:

And here is how it looks on a deparment page: