You’re offline. This is a read only version of the page.
Thank you for your feedback
Please let us know how this article can be improved.
Choose all that apply.*
Report a bad link
Out of date (instructions or screenshots)
Missing detail
Other
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.
| <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> |
| <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"> <h 4 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-r ow 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> |
Use this code in place of the Cross-Sell code, in any field that accepts HTML.
Note: Cross-Sell Manager is available only with Merchant Solutions Standard, Professional, and Store v.1 packages.
See Also: