You can modify your store's CSS to customize the placement and appearance of cross-sell items on your product detail and cart pages. Below is a list of IDs and classes that may be modified, and descriptions of what each corresponds to.
IDs and classes are prefaced by the element each belongs to. Some elements include multiple classes, and are listed together. Conditional classes are highlighted in red.
| ID or Class | Description |
div#ys_relatedItems |
Div element, containing the cross-sell merchandising area |
| table.ystore-cross-sell-table | Cross-sell table element |
| table.ystore-cross-sell-table-horizontal | Conditional cross-sell table element, used if horizontal cross-sell display has been selected |
| table.ystore-cross-sell-table-vertical | Conditional cross-sell table element, used if vertical display has been selected |
/* Title Row */ |
|
| tr.ystore-cross-sell-title-row |
Table row element, used to style the title row |
|
td.ystore-cross-sell-title-cell |
Table data element, used to style the title row table data cell |
| h3.ystore-cross-sell-title |
Header element, used to style the Cross-Sell Header text |
/* Recommendation Row */ |
|
| tr.ystore-cross-sell-row | Table row element, used to style the recommendation row |
| tr.ystore-cross-sell-row-first | Conditional table row element (used to style the first recommendation row only) |
| tr.ystore-cross-sell-row-last | Conditional table row element (used to style the last recommendation row only) |
/* A Single Recommendation (up to 3 per row) */ |
|
| td.ystore-cross-sell-cell | Table data element, used to style individual cross-sell item table data cells |
| td.ystore-cross-sell-cell-first | Conditional table data element, used to style individual cross-sell item table data cells (used for the first table data cell only) |
| td.ystore-cross-sell-cell-last | Conditional table data element, used to style individual cross-sell item table data cells (used for the last table data cell only) |
| td.ys_relatedItemDesc | Table data element, used to style the table data cell containing a product description |
| a.ystore-cross-sell-product-image-link |
Link element, used to style a linked product image |
| img.ystore-cross-sell-product-image | Image element, used to style product images |
| div.ystore-cross-sell-product-caption |
Div element, used to style the product caption area |
| h4.ystore-cross-sell-product-name | Header element, used to style the product name |
| p.ystore-cross-sell-product-price | Paragraph element, used to style the product price |
| p.ys_promo | Condtional paragraph element, used to style the discount price of a product (used if a discount price has been set for the product only) |
Sample CSS code:
| * Cross-Sell Styles. */ .ystore-cross-sell-table { width: 100%; font-size: inherit; font: 100%; } .ystore-cross-sell-title { padding-bottom: 6px; color: $item-caption-title-text-color; font: bold $item-caption-title-text-size $item-caption-title-text-font; } .ystore-cross-sell-table-vertical .ystore-cross-sell-cell { width: 100%; } .ystore-cross-sell-table-horizontal .ystore-cross-sell-cell { width: 28%; padding-right: 5%; } .ystore-cross-sell-product-image-link { display: block; padding-bottom: 8px; } .ystore-cross-sell-product-caption { padding-bottom: 16px; } .ystore-cross-sell-product-caption p, .ystore-cross-sell-product-caption h4 { margin: 0 0 10px; font-size: 11px; } .ystore-cross-sell-table .ys_promo { font-weight: bold; } |
Merchants using new templates can modify the css-edits file to make these changes. Merchants using other templates can add these rules to any external CSS file their pages are referencing, or embed the styles in the head section of their pages.
| 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