Styling

Fast Simon Upsell & Cross-Sell uses a [shadow dom] node to render out app without any css conflicts from site theme or apps, meaning:

Upsell & Cross-Sell will only inherit fonts from the site <body>.
Adding css via a global stylesheet will not take effect.

For Many Upsell widgets at one site

Put your attention that each Upsell widget has its own id. In order to affect only one widget style use the widget id selector before your CSS code. (example below)

How to add custom style

Put your attention that each Upsell widget has its own id. In order to affect only one widget style use the widget id selector before your CSS code. (example below)

danger

Only one <style> element per ID is allowed per page. If multiple elements with the same ID exist, only the first one will be picked up and applied — any additional ones will be ignored and may cause unexpected styling behavior.

There are 2 ways adding CSS:

adding style element to the code (example below).
Add the CSS to the CSS section at the no-code editor (Write your widget id instead of 'widget_id'). The generated script of the widget will already be included with the CSS.

/* new widgets */
<style id="fast-simon-new-upsell-cross-sell-css">

    #fast-simon-new-upsell-{widget_id} .title-wrapper
    {
        color:red !important;
    }
    /* will affect just the Upsell widget with id=fast-simon-upsell-widget1 */

    /* your additional CSS code comes here */

</style>


/* deprecated approch */
<style id="fast-simon-upsell-cross-sell-css">

    #fast-simon-new-upsell-{widget_id} .title-wrapper
    {
        color:red !important;
    }
    /* will affect just the Upsell widget with id=fast-simon-upsell-widget1 */

    /* your additional CSS code comes here */

</style>

Out-of-Stock Color Swatches

When a color variant is sold out and still shown on a product card, the widget marks the swatch so you can restyle it:

What we render	Where	Use it?
`fs-swatch-out-of-stock` class	on the swatch element, alongside `color-swatch`	Yes — this is the supported hook
`<span class="ban">`	inside the swatch	Our default marker: a faint grey ban icon (`#ccc`, 60% opacity)
`(out of stock)`	appended to the swatch tooltip	Localized with the rest of the widget
`data-disabled` attribute	on the swatch element	No — it reflects whether the swatch is clickable, not whether it is sold out, and it stops matching once out-of-stock swatches are made selectable

<style id="fast-simon-new-upsell-cross-sell-css">

    /* Replace the default ban icon with a diagonal strike-through */
    #fast-simon-new-upsell-{widget_id} .fs-swatch-out-of-stock .ban {
        display: none;
    }

    #fast-simon-new-upsell-{widget_id} .fs-swatch-out-of-stock {
        opacity: 0.5;
    }

    #fast-simon-new-upsell-{widget_id} .fs-swatch-out-of-stock::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom right,
            transparent calc(50% - 1px), #6e6e6e 50%, transparent calc(50% + 1px));
    }

</style>

As with any Upsell CSS, scope the rules to the widget id — otherwise they apply to every widget on the page.

Settings that affect it

Clickability is per widget. Sold-out swatches are inert by default; turn on Enable Out Of Stock Swatches in that widget's no-code editor (Product → Color Swatches) to make them selectable
hide_oos_swatches is not supported here. Unlike the PLP widget, Upsell & Cross-Sell does not read it, so setting it has no effect on upsell swatches. The same applies to color_attribute_names and swatch_visibility_threshold
mark_oos_alt_swatches is supported. Set it to true on window.__fast_options to have sold-out alternative-color swatches marked; see below
The Elegant Quick View theme draws a diagonal line instead of the ban icon, on both desktop and mobile

Sold-out size and option chips

Quick View renders non-color options — sizes and similar — as text chips with a different contract: a sold-out chip gets the class not-sellable, with no fs- prefix and no ban icon.

#fast-simon-new-upsell-{widget_id} .option.not-sellable {
    opacity: 0.4;
    text-decoration: line-through;
}

Swatch types with no class

Image swatches — no class is added. Target .image-swatch[data-disabled="true"] or .image-swatch .ban; data-disabled is reliable on these
Alternative-color swatches (color options that link out to a separate product and carry no variant data) — marked only if you set mark_oos_alt_swatches: true; otherwise they always render as in stock

The variant has to reach the storefront first

No marker can appear if the sold-out variant was already removed server-side. Check Merchandising → Display Merchandising → Hide Out of Stock Variants, out-of-stock product visibility set to Hide, and variant-level out-of-stock filtering before writing CSS.

Styling

For Many Upsell widgets at one site​

How to add custom style​

Out-of-Stock Color Swatches​

Settings that affect it​

Sold-out size and option chips​

Swatch types with no class​