Search Help:  
 
Enter keywords to search help.
Yahoo! Small Business > Yahoo! Small Business Help > Merchant Solutions > Promotion and Traffic > Promotion Tools

What will Cross-sell look like on my product detail pages?

Using Store Editor, you can preview the placement and appearance of the Cross-Sell merchandising area on your product pages, by temporarily replacing the Cross-Sell code on these pages with sample HTML. By previewing the merchandising area placement and appearance, you can experiment with fields to place your code in, and make adjustments to your CSS file as desired. Learn how to customize Cross-Sell product placement and appearance.

Once you are satisfied with the merchandising area placement and appearance, and have modified your store’s CSS (if desired), the HTML code must be removed from the field it has been inserted into and replaced with Cross-Sell code. Learn how to add Cross-Sell to product detail pages.

To preview horizontal Cross-Sell placement, use the following HTML code:

<div id="ys_relatedItems">
<table class="ystore-cross-sell-table ystore-cross-sell-table-horizontal">
<tbody>
<tr class="ystore-cross-sell-title-row">
<td class="ystore-cross-sell-title-cell" colspan="3">
<h3 class="ystore-cross-sell-title">You may also like</h3>
</td>
</tr> <tr class="ystore-cross-sell-row ystore-cross-sell-row-first">
<td id="ystore-cross-sell-item-item2" class="ystore-cross-sell-cell ys_relatedItemDesc ystore-cross-sell-cell-first">
<a id="ystore-cross-sell-image-link-item2" class="ystore-cross-sell-product-image-link" href="#">
<img class="ystore-cross-sell-product-image" src="http://us.js2.yimg.com/us.yimg.com/lib/smbiz/store/csell/i/sample_product-
1.0.0.gif">
</a> <div class="ystore-cross-sell-product-caption">
<h4 class="ystore-cross-sell-product-name">
<a id="ystore-cross-sell-name-link-item2" href="#" name="ystore-cross-sell-name-link-item2">Flowers 1</a>
</h4> <p class="ystore-cross-sell-product-price">$28.99</p>
</div>
</td> <td id="ystore-cross-sell-item-item3" class="ystore-cross-sell-cell ys_relatedItemDesc">
<a id="ystore-cross-sell-image-link-item3" class="ystore-cross-sell-product-image-link" href="#" name="ystore-cross-sell-image-link-item3">
<img class="ystore-cross-sell-product-image" src="http://us.js2.yimg.com/us.yimg.com/lib/smbiz/store/csell/i/sample_product-
1.0.0.gif">
</a> <div class="ystore-cross-sell-product-caption">
<h4 class="ystore-cross-sell-product-name">
<a id="ystore-cross-sell-name-link-item3" href="#" name="ystore-cross-sell-name-link-item3">Flowers 2</a>
</h4> <p class="ystore-cross-sell-product-reg-price">Regular Price: $68.99</p>
<p class="ystore-cross-sell-product-price ys_promo">Buy These Items Together, and Pay Only: $66.99</p>
</div>
</td> <td id="ystore-cross-sell-item-item4" class="ystore-cross-sell-cell ys_relatedItemDesc ystore-cross-sell-cell-last">
<a id="ystore-cross-sell-image-link-item4" class="ystore-cross-sell-product-image-link" href="#" name="ystore-cross-sell-image-link-item4">
<img class="ystore-cross-sell-product-image" src="http://us.js2.yimg.com/us.yimg.com/lib/smbiz/store/csell/i/sample_product-
1.0.0.gif">
</a> <div class="ystore-cross-sell-product-caption">
<h4 class="ystore-cross-sell-product-name">
<a id="ystore-cross-sell-name-link-item4" href="#" name="ystore-cross-sell-name-link-item4">Flowers 3</a>
</h4> <p class="ystore-cross-sell-product-price">$126.99</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>

To preview vertical Cross-Sell placement, use the following HTML code:

<div id="ys_relatedItems">
<table class="ystore-cross-sell-table ystore-cross-sell-table-vertical">
<tbody>
<tr class="ystore-cross-sell-title-row">
<td class="ystore-cross-sell-title-cell" colspan="1">
<h3 class="ystore-cross-sell-title">You may also like</h3>
</td>
</tr> <tr class="ystore-cross-sell-row ystore-cross-sell-row-first">
<td id="ystore-cross-sell-item-item2" class="ystore-cross-sell-cell ys_relatedItemDesc ystore-cross-sell-cell-first ystore-cross-sell-cell-last">
<a id="ystore-cross-sell-image-link-item2" class="ystore-cross-sell-product-image-link" href="#" name="ystore-cross-sell-image-link-item2">
<img class="ystore-cross-sell-product-image" src="http://us.js2.yimg.com/us.yimg.com/lib/smbiz/store/csell/i/sample_product-
1.0.0.gif">
</a> <div class="ystore-cross-sell-product-caption">
<h4 class="ystore-cross-sell-product-name">
<a id="ystore-cross-sell-name-link-item2" href="#" name="ystore-cross-sell-name-link-item2">Flowers 1</a>
</h4> <p class="ystore-cross-sell-product-price">$28.99</p>
</div>
</td>
</tr>
<tr class="ystore-cross-sell-row">
<td id="ystore-cross-sell-item-item3" class="ystore-cross-sell-cell ys_relatedItemDesc ystore-cross-sell-cell-first ystore-cross-sell-cell-last">
<a id="ystore-cross-sell-image-link-item3" class="ystore-cross-sell-product-image-link" href="#" name="ystore-cross-sell-image-link-item3">
<img class="ystore-cross-sell-product-image" src="http://us.js2.yimg.com/us.yimg.com/lib/smbiz/store/csell/i/sample_product-
1.0.0.gif">
</a> <div class="ystore-cross-sell-product-caption">
<h4 class="ystore-cross-sell-product-name">
<a id="ystore-cross-sell-name-link-item3" href="#" name="ystore-cross-sell-name-link-item3">Flowers 2</a>
</h4> <p class="ystore-cross-sell-product-reg-price">Regular Price: $68.99</p>
<p class="ystore-cross-sell-product-price ys_promo">Buy These Items Together, and Pay Only: $66.99</p>
</div>
</td>
</tr>
<tr class="ystore-cross-sell-row ystore-cross-sell-row-last">
<td id="ystore-cross-sell-item-item4" class="ystore-cross-sell-cell ys_relatedItemDesc ystore-cross-sell-cell-first ystore-cross-sell-cell-last">
<a id="ystore-cross-sell-image-link-item4" class="ystore-cross-sell-product-image-link" href="#" name="ystore-cross-sell-image-link-item4">
<img class="ystore-cross-sell-product-image" src="http://us.js2.yimg.com/us.yimg.com/lib/smbiz/store/csell/i/sample_product-
1.0.0.gif">
</a> <div class="ystore-cross-sell-product-caption">
<h4 class="ystore-cross-sell-product-name">
<a id="ystore-cross-sell-name-link-item4" href="#" name="ystore-cross-sell-name-link-item4">Flowers 3</a>
</h4> <p class="ystore-cross-sell-product-price">$126.99</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>

Where do I insert this code?

Use this code in place of the Cross-Sell code, in any field that accepts HTML.

If you wish to preview Cross-Sell on all product detail pages:

  1. In Store Editor, choose Variables from the Editor toolbar.
  2. In the Page Properties section, locate the Final-text field.
  3. Insert the HTML code before all other content in the Final-text field (recommended placement).*
  4. Click the Update button.
  5. Preview the placement and appearance of the Cross-Sell merchandising area in Store Editor.
  6. When you are ready to apply Cross-Sell to your product detail pages, replace the HTML code with the Cross-Sell code and publish your changes in Store Editor. Read more about adding Cross-Sell to your product detail pages.

* Note: Placing the code within the Final-text field is recommended placement only, for merchants using standard templates. Code may be placed within any field that accepts HTML, including custom fields that have been created for custom templates. The code will function if placed anywhere within the field, but its placement above or below other content will determine if Cross-Sell items are displayed above or below this content on the page.

If you wish to preview Cross-Sell on selected product detail pages:

  1. Choose Item from the Store Editor toolbar.
  2. In the Object Properties section, locate the Caption field.
  3. Insert the HTML code after all other content in the Caption field (recommended placement).*
  4. Click the Update button.
  5. Preview the placement and appearance of the Cross-Sell merchandising area in Store Editor.
  6. When you are ready to apply Cross-Sell to your product detail pages, replace the HTML code with the Cross-Sell code and publish your changes in Store Editor. Read more about adding Cross-Sell to your product detail pages.

You may also use Catalog Manager to insert the HTML code on selected product detail pages:

  1. In Catalog Manager, enter the Manage Your Items section.
  2. Click on an item ID to edit the item.
  3. In the Store Fields section, locate the Caption field.
  4. Insert the HTML code after all other content in the Caption field (recommended placement).*
  5. Click the Save button.
  6. Preview the placement and appearance of the Cross-Sell merchandising area in Store Editor.
  7. When you are ready to apply Cross-Sell to your product detail pages, replace the HTML code with the Cross-Sell code in Catalog Manager, and publish your changes in Store Editor. Read more about adding Cross-Sell to your product detail pages.

* Note: Placing the code within the Caption field is recommended placement only. Code may be placed within any field that accepts HTML, including custom fields that have been created for custom templates. The code will function if placed anywhere within the field, but its placement above or below other content will determine if Cross-Sell items are displayed above or below this content on the page.

Note: Cross-Sell Manager is available only with Merchant Solutions Standard, Professional, and Yahoo! Store packages. The product detail page and auto-suggest Cross-Sell features are only available for stores using Checkout Manager.

See Also

Email this page   Print this page  

Was this article helpful?

Yes   No
Click to contact Customer Care for further assistance.

Top 5 Questions

Related Links