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:

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

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.

See Also

• How do I customize Cross-Sell placement and appearance?
• How do I add Cross-Sell to my product detail pages?