Styling

Fast Simon PLP uses a shadow dom node to render out app without any css conflicts from site theme or apps, meaning:

PLP will only inherit fonts from the site <body>.
Adding css via a global stylesheet will not take effect.

How to add custom style:

Option 1: Use our dashboard (recommended)

Go to Apps > Fast Simon Dashboard > No-code Editor > CSS Editor

Option 2: Use a global `<style>` element with a specific id

<style id="fast-simon-serp-css">
    /* CSS code here */
</style>

danger

Only one <style id="fast-simon-serp-css"> element 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.

Special Sized Products

When a product is configured with special sizing in the Fast Simon Merchandising Editor, it receives a CSS class on its grid cell that you can use for custom styling:

Class	Size	Grid footprint
`fs-product-sp-large`	Large	2×2 — twice as wide and twice as tall
`fs-product-sp-horizontal`	Horizontal	2×1 — twice as wide

The grid spanning is applied automatically. Use these classes to adjust the product card's internal styling (image aspect ratio, font sizes, etc.) to match the larger tile:

/* Adjust image aspect ratio for horizontal tiles */
.fs-product-sp-horizontal .product-image {
    aspect-ratio: 2 / 1;
}

/* Adjust image aspect ratio for large tiles */
.fs-product-sp-large .product-image {
    aspect-ratio: 1 / 1;
}

The sp_s field is also available on the Product object for use in custom hooks if you need to apply additional logic based on the sizing.

Out-of-Stock Color Swatches

When a color variant is sold out and still shown on the product card, Fast Simon marks the swatch so you can restyle it. This section lists exactly what is rendered, so you can target it without guessing.

The styling hook

What we render	Where	Use it?
`fs-swatch-out-of-stock` class	on the swatch element	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. Client-side widget only — not rendered on V-Next SSR
`data-disabled` attribute	on the swatch element	No — see the caveat below

Target fs-swatch-out-of-stock on its own, without an element-class prefix. The element it sits on is not the same everywhere: the client-side widget uses .color-swatch, while the V-Next SSR product grid uses .product-swatch. A rule written as .color-swatch.fs-swatch-out-of-stock silently matches nothing on an SSR grid.

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

.fs-swatch-out-of-stock {
    opacity: 0.5;
    position: relative;
}

.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));
}

Recoloring the ban icon needs !important

The icon's color is set as an inline fill on the SVG, so .ban svg { fill: red } loses to it — use fill: red !important, or do what the example above does and hide the icon entirely, which works normally.

data-disabled is not an out-of-stock flag

data-disabled renders on every swatch — it reads "false" on in-stock ones — and it tracks whether the swatch is clickable, not whether it is sold out. Enabling clickable out-of-stock swatches (below) flips it to "false" on sold-out swatches, and any [data-disabled="true"] rule silently stops matching. Style on .fs-swatch-out-of-stock instead.

The default marker differs in Quick View

On the product grid a sold-out swatch shows the faint ban icon. Inside Quick View using the Elegant theme, the ban icon is hidden and a diagonal line is drawn across the swatch instead. If you restyle the grid, consider matching Quick View so the two agree.

Are sold-out swatches clickable?

In the client-side widget, no — clicks, hovers and variant switching are all ignored for them on the grid. Turn on No-code Editor → Product Grid → Product → Color Swatches → Enable Out Of Stock Swatches to make them selectable. Inside Quick View, sold-out swatches are always selectable regardless of that setting.

On V-Next SSR they are always selectable; see below.

Sold-out size and option chips

Quick View renders non-color options — sizes, materials, and anything else that is not a swatch — as text chips, and those use a different contract. There is no fs- class on them:

Class	When it applies
`not-sellable`	The option is sold out and the site has no Back In Stock provider configured
`not-sellable-with-bis`	The option is sold out and the site does have a Back In Stock provider

Style both, or a site that later enables Back In Stock silently loses the treatment:

.option.not-sellable,
.option.not-sellable-with-bis {
    opacity: 0.4;
    text-decoration: line-through;
}

Color options in Quick View are swatches, so they keep fs-swatch-out-of-stock as described above. On V-Next SSR and in Upsell & Cross-Sell only not-sellable exists — those never emit the Back In Stock variant.

Which swatch types carry the marker

Swatch type	What you can target
Color and text swatches built from the product's own variants	`.fs-swatch-out-of-stock`, plus the `.ban` child
Image swatches	No class is added. Target `.image-swatch[data-disabled="true"]` or `.image-swatch .ban`. Here `data-disabled` is reliable — image swatches have no clickable-when-sold-out mode
Alternative-color swatches — color options that link out to a separate product and carry no variant data	Only when you opt in. Set `mark_oos_alt_swatches: true` and they are marked like any other sold-out swatch; left off (the default) they render as in stock, whatever their real availability. V-Next SSR marks them either way — see below

On V-Next SSR

The class name is the same, but four things differ from the client-side widget:

The grid swatch element is .product-swatch, not .color-swatch, and the color itself sits on an inner <span class="swatch-color">. Quick View and filter swatches still use .color-swatch, so a selector scoped to one element class will cover only part of the page
Alternative-color swatches are marked correctly. SSR derives each color's availability from its variants, so a sold-out alternative color gets fs-swatch-out-of-stock and the ban icon like any other swatch
Sold-out swatches are sorted last when the swatches come from the product's own variants, before maxSwatches truncation is applied — so they are the first to be hidden behind Show more. Alternative-color swatches keep their original order
Sold-out swatches stay selectable. The Enable Out Of Stock Swatches setting does not apply on SSR — sold-out swatches can always be clicked, whether the setting is on or off
No tooltip suffix. The " (out of stock)" text is not rendered visibly; the swatch's accessible label still carries it, so if you rely on the visible tooltip, add your own via CSS content on the marker

The variant has to reach the storefront first

No marker can appear if the sold-out variant was already removed server-side, which is the most common reason merchants find no class in the DOM. Check all of these before writing CSS:

Merchandising → Display Merchandising → Hide Out of Stock Variants — when on, sold-out variants are stripped from the response entirely
Out-of-stock product visibility set to Hide — excludes unsellable variants from the index
Variant-level out-of-stock filtering, when variant-level attributes are enabled
hide_oos_swatches: true in your own options

Styling

How to add custom style:​

Option 1: Use our dashboard (recommended)​

Option 2: Use a global <style> element with a specific id​

Special Sized Products​

Out-of-Stock Color Swatches​

The styling hook​

The default marker differs in Quick View​

Are sold-out swatches clickable?​

Sold-out size and option chips​

Which swatch types carry the marker​

On V-Next SSR​