Total Blue System Ecommerce

Flexible product template shows more image details, upon request

Embracing the idea of progressive disclosure, the latest System Update to the 'tabbed' product detail page no longer shows all additional photos that may be available for a product. Now the 5th photo (you can sort their priority) will not display without what might be called "extra user input." In other words, the site visitor needs to now click a "more" link to show all additional photos beyond 4. The text of the "more" link is configurable by you the site owner, and only displays if there are more than 4 photos for a given product. The behavior is similar to the "more info" or "more details" link that can show the full product description, if you so configure it to hold some details back. The key word is progressive disclosure.

A couple other refinements have been introduced that amend what was described in the 'view larger' post here. The changes may best be observed rather than described. Suffice to say they are subtle and all manifest the idea that the template ought not waste space without feeling tight, and ought adapt to the fact that some products have lots of descriptive data (photos, text, links, relations to articles, etc.) while other products have very little.

• In either case, the page template ought exhibit enough intelligence to display information in a way that's appropriate to the product, while appearing consistent in lay-out for the sake of making it easy to comprehend by the site visitor. Feedback so far says we're hitting that target.

"Landing page" template eliminated after solving the root problem

For shoppers who arrive at your site referred by a search engine's results page (SERP), you've got just a moment to grab and hold their attention. Total Blue System's Catalog module used to have a special page template intended for this purpose, specific to a product detail page.

Known as the "landing page template," it consisted of a stripped down, minimalist look without all navigation options and without all of the product details and related content. Site owners could link to a product, add a special snippet of code to the end of the URL, and transform the page into using the "landing page template." This was frequently done in the context of search marketing, especially as cost-per-click, click-through landing pages. No more; the feature has been eliminated. Here's why:

First, the new tab orientation of the enhanced product detail page template goes a long way towards solving the problem that the landing page template intended to solve: progressive disclosure. The reason there existed a need for the landing page template in the first place was because, at the time, the product detail page template did too much, showed too much, scrolled too much, all at once. Not anymore. So the landing page template's reason for being has disappeared.

Second, we believe in removing software features. Call it pruning or refactoring or whatever you wish, but we look for reasons to eliminate features or preferences or configurations that, in the end, don't matter. If for some reason we find the landing page template or it's intention to needed again, that's fine. We'll add it back. But over the long-term, the objective of our turn-key e-commerce product is to provide all of the features you need and none that you don't. That means removing features or older code when prudent.

Communicate site-wide messages on product detail page

When your customers are closely examining a product, viewing what's known as the product detail page, there may be one or two key points that prompt the purchase now. You can make these visible at this pivotal point in the browsing process by creating a "Teaser" for the product detail page template. There's now a "teaser spot" on the top  of the product detail template, released as part of this week's System Update.

Keep in mind this teaser spot is not unique to one product, but applied to all products that use the latest, tabbed product detail page template. So the message need be appropriate for all products. Here are some ideas:

• Announce a special, time-sensitive promotion concerning shipping that's worth emphasizing to someone who is about to click the "Add to cart" button.
• Communicate your site's secure ordering process, perhaps by promoting the HackerSafe designation from Scan Alert.

Here's how:
The Teaser Spot is placed at the top of the page, so you could create a graphic image that spans the entire width of the page "body" -- whatever dimension that is for your site. If you're going to post "trust symbols" like the HackerSafe badge, you may want it to float to the far right of the page, with text and other elements on the page wrapping around it. Here's sample code to help you achieve this, which you ought include in the Teaser that you create for this purpose:

Wrap the teaser's contents  in these tags: <div style="float: right">This is my teaser content</div>

Consolidate product option choices to one page

The new product detail page template with tabs for progressive disclosure and minimal scrolling can help you consolidate the product option choices presented to the web shopper. When a product comes in multiple sizes and colors (to use the two most common options for a product), the optimal way to present those choices is on one page. Known as the "product detail page" to Total Blue System users, this page now gracefully handles a product matrix with two, three, or more dimensions.

Here are some highlights:

• Create a product with item ordering options, as many sets as necessary. Examples include color, size, fabric all for one product.
• The Catalog module will perceive which option determines the price variance. The price for each option will then appear in the drop-down select menu that presents that option set. So if the price varies by size, then only the size drop down menu will show the price, separated by white space at the far right of the menu option.
• The price range will be automatically calculated and displayed in place of the product's "Our Price" field value, which is used if there is no price variance among options.
• Each option's select menu will be preceded by a label that you configure. It could be as simple as "Size," for example" or more explanatory as you choose.
• If there are no options for a product, then the drop-down select menus do not appear, of course.

This kind of product arrangement has positive benefits for search engine optimization efforts, as it can eliminate what would otherwise be deemed "duplicate content" from your site as perceived by a search engine spider.

By implementing this kind of product arrangement, you ought also consolidate product reviews into one product detail page. In short, reduce the number of "products" in your website catalog and increase the depth of descriptive content about each product.

The timing of this release matches the release of the new product detail page template in an upcoming System Update that will be coordinated specifically for you and your e-commerce site.

Contact our technical support team for input on how this may interact with your internal order management system. Mail Order Manager users may find there are adjustments necessary to how you store items in MOM, or in how you construct the item # or SKU.

Gain attention and interest in your product, then deliver the details

Feed the appetite of the web shopper who is hungry for information about your products. That's become something of a mantra in our clients' ears this summer, repeated by SEO and merchandising expert Howard Gray. But how much info is too much? And how do you make it all easily digestable in bite-size chunks?

The answer begins with understanding the concept of progressive disclosure, employed by successful sales people down through the ages. But now you have the ability to make immediate use of this concept with the release of a new product detail page template. It's distinguished by it's use of tabs to reveal or hide detailed information about a product or related content on your site. Available now as part of a System Update, the timing of the actual release will be coordinated with you given the need to configure this template in advance and the importance of having given consideration to how best to optimize your catalog.

You can see what's configurable about the product detail page template by going into the Configure section of the Admin Area. Choose the Catalog tab on the left side, and then find the Product Detail configuration options. Here's a few highlights:

• You define the name given to all "tabs" on the page. Default values are presented, but whether or how you use the tabs is up to what's most useful to your website customers. If there's no data associated with that "tab," then the tab won't appear.
• You decide how many tabs appear on your page. Make use of the Description 1 field of course, but you can also use the Description 2 and Description 3 fields as you think best, including HTML code for special formatting.
• Related content now gets more space on the page, adding an incremental boost to search engine optimization efforts. Pick related articles, frequently asked questions, and related product categories, plus upload data files, spec sheets, schematic, or audio files as "supporting content."

Overall, this product detail page template ought give your shopper the opportunity to quickly assess your product's appeal with a minimum of vertical scrolling of the browser window. Then, once attention and interest are present, the page discloses more information as they approach the buying decision.

Look for our contacting you individually to schedule the release of this System Update.

Show product detail with 'view larger' links

If only shoppers could reach through the screen and feel or smell or taste what's in your website catalog. Until then (wink), bigger, sharper imagery of what the product looks like must suffice. Updates to the "View Larger" photo link from the product detail page will help. Here's a quick summary:

• The "view larger" text link now opens a pop-up window that is larger than before, reflecting the fact that web browsers keep getting wider as computer monitor resolutions increase.
• The pop-up window is now resizable, making it possible to eliminate any horizontal scrolling of the page.
• You can configure what the "view larger" link is called, perhaps preferring "zoom" or some alternative wording.

• If you give the primary photo, or any of the additional photos, a value for the ALT attribute of the IMG tag, that text now appears as the link. So instead of saying "view larger" it may read "Bunk bed with natural wood" as the text of the link. There are benefits here that span accessibility / disability concerns, plus incremental help for search engine optimization efforts.

Here's a final tip:  you can link directly to a larger image of your product by editing the URL of a product detail page. What's linked as a "pop-up" window from the product detail page template can be linked to directly without the pop effect. Here's how:

1. View a product detail page.
2. Add ?template_id=2 to the end of the URL in the browser address window.
3. Hit the enter or return key, to load this new page. You'll see the larger view images displayed in the window. In short, this is it's own page template which you've just linked to directly.

Note: the timing of the release of this template update will coincide with the new tabbed product detail page template.

Accelerate Add to Cart action when browsing

Your site's "sortable product" page templates now make it easier for website shoppers to add an item to their cart or basket. This is specifically for the one product per row (1 column) sortable template.

The "add to basket" or "add to cart" button now appears on the Category Gallery page. Before this, it required a shopper to click through the category page template to the product detail page template before an Add to Cart action could be taken.

Note: this feature respects whether the product has ordering options, and if present, the page will display them as a select menu on the Category Gallery page right above the Add to Cart button.

See an example of how this works for browsing and buying products.

Spotlight on best sellers when sorting products

A good salesperson can be thought of as helper, someone to help you eliminate options as much as anything else. Discarding what's not useful as a process is what leads you to narrow your choices down to what you really want. Sometimes, when it's not clear the best option to choose, people are more comfortable choosing what someone else already bought. There's comfort in buying a best selling item, because you're leaning on the combined wisdom of others.

Now your website shoppers can similarly benefit when browsing products that use the Sortable Category Gallery page templates. Sort by Best Sellers is now an option within the select menu that sorts products within the category.

Here's a couple considerations hat influenced how the template was constructed:

• Our clients are sensitive to showing all products in a category from best to worst selling. For reasons of competitive snooping, some don't want other merchants to know the worst selling items in their catalog.
• A focus on best sellers ought really be just the best. In other words, it's not everything in the category, it's only the best ones that we want to show. Again, it's about narrowing down options to make it easier to decide which to buy.

So, when sorting products using this method, only the top ___ products are shown. In this template example, the setting is for 5 products to be displayed. The pagination preferences are ignored, and only a limited number are shown. In fact, on the page the "sort by __ per page" is hidden, so it's no longer even an option.

Tip: If you apply this template to one of your categories, like this category, you can later check to see how popular this sorting method is. If you use Google Analytics, use the filter field to filter only pages that include this "string" in their file name:  sort=bestsellers. That will show you the pages viewed and their sales index when they were sortable by Best Sellers...

Highlight newest product arrivals

Enable your website shoppers to spot the latest items within a category of products. There's now the ability to sort products by "Newest Arrivals" from within the select menu on Sortable category gallery page templates.

In an earlier post, we described the Catalog module's Debut Date concept. The debut date is the criteria upon which the page sorts products in this new category gallery template. These two new features go hand in hand.

The screenshot at right gives you an idea, but here's an example of sorting products in action.

Note: In the screenshot example, it shows that the newest product doesn't yet have a product photo added (as of the moment this was taken). That might be a problem that's corrected by now, but this example points out the fact that with this new sorting ability, there's little margin for you to delay getting all photos in place for a new product that you've made displayable on the website.

Mix content & commerce, merchandising & SEO

Website shoppers who use search engines to find products to buy have a tendency to quickly bounce in and out of sites, as they click through search result links to a merchant's product category page and then back to the engine's search results page. Wouldn't it be nice to grab that shopper for a moment, and capture her interest in something BESIDES the price? "Take your time, listen to our story, hear what other satisfied customers have to say..." This is one of the goals of a new category gallery page template released today as part of a Total Blue System update.

The "Gallery Core Sortable - 2 Column" template is now available within your Catalog module in the Admin Area. See the screen shot at right for an example of what it looks like. The basic components are a sortable listing of products in two columns, plus a right side bar that features content from your website Articles module, Teasers, and Catalog module. Here's a breakdown of what's possible, as the right side bar has several conditional elements:

1. Display a Teaser, with an optimal width of 214 pixels. You can set this as a new "Teaser Spot" within the Teasers section of the Admin Area. The same Teaser will display regardless of which category this template is applied to. Use it for site-wide promotions that aren't unique to one category, like a special holiday shipping offer, for example.
2. Display a customer's product review. Sometimes shoppers aren't clear which product within a category is most attractive, until they read someone else raving about a particular item. This area pulls the 5 most recently approved customer product reviews, then makes a random selection of 1 review from that set. Note: there has to be at least 1 product review for a product within that category for it to display.
3. Display a featured product. From all of the products that are marked "featured within category" within the product's display options, within this category, this template displays one such product, pulling a random selection from that set of products.
4. Display an Article. From all of the Articles that are marked "related to this product category" within the Article's display options, this template displays one such article, pulling a random selection from that set of articles. If a photo exists for the article, it will display in a thumbnail size.
5. Display Top Sellers. The top 3 selling products within this category, calculated from a rolling total of the last two week's sales history (coming from your order fulfillment system or website, depending on the integration in place for you). Simple text links are used to highlight those products that sell best, identifying name and price only.

Improving the "freshness" factor of your category gallery pages is one of the underlying goals of this template. Yes, it's oriented around what human shoppers will see with their eyes when visiting this page, but it's also oriented around what a search engine bot or spider will see. In the latter case especially, it's important that each visit to this page communicate "new stuff" to the search engine. For this reason, we're pulling in a random display of content like customer reviews and articles that will always be different. The objective is to give the search engine spider the perception that this category gallery page changes frequently -- more frequently than you might normally add new products to this category. It's an example of blending search engine optimization with your site merchandising efforts, striving for a balance between the two.