Tips for Optimizing Product Page Cross-Sell

by Administrator

Comments (2)

Wednesday, July 9th, 2008

We’re pleased to see so many merchants taking advantage of the product page cross-sell feature we released last fall. Cross-sell is a great way to give exposure to more products, but merchants should take note that its success depends not only on what is being cross-sold, but how it is presented.

Product page cross-sell gives you a lot of freedom to control its appearance. Below, I’m going to suggest a few ways that you can take advantage of this freedom.

If you haven’t run through the Design Wizard since the new Cross-Sell launched last October, it’s worth doing. (Or, if you’re using custom templates, use the sample CSS outlined in Help to achieve the same results.) This will adjust these visual elements of the module:

• "Related items" header color changes to match other site headers
• Cross-sell price (or sale price if there is no cross-sell price) becomes bolded
• Vertical space is tightened between the lines
• Padding is added between the columns for better separation

Cross-sell Module Default Appearance

Cross-sell Module Default After Completing Design Wizard

You can further adjust the cross-sell module’s appearance by modifying the CSS. For example, the following code adds borders to the images, removes the underline attribute from product names, and italicizes the sale or discount price while changing the font color to red:

.ystore-cross-sell-product-image { border: 1px solid black; }
.ystore-cross-sell-product-name a { text-decoration: none; }
.ys_promo { color: red; font-style: italic; }

If your prices are what set you apart, having the price appear in the cross-sell module is a smart way to drive click-thru. However, if price is not your competitive advantage you may want to consider suppressing the prices in the cross-sell module by modifying the CSS:

.ystore-cross-sell-product-price {display: none}

This way, interested customers will only see prices upon clicking through to the product page, where they will also be presented with detailed product information.

In addition to making design modifications to the module, remember that you also control where cross-sell items appear because the location of the div tag is up to you. Try to put cross-sell above the fold where more shoppers will see it. Your pages may already be full, but of all the things you could highlight, cross-sell is a pretty powerful contender.

Laurie Briggs
Yahoo! Small Business

 Email This Post RSS feed Add to Del.ici.ous Digg this story