Visual Discovery Configuration Options

Configure the Visual Discovery widget by setting options on window.__fast_options before the widget loads.

Configuration Structure

Options are set globally on the window object and merged into the widget configuration:

window.__fast_options = {
    // Button customization
    discovery_button_text: "Find Similar",
    similar_styles_button_text: "Shop Similar",
    similar_styles_button_color: "#000000",
    visual_discovery_button_color: "#000000",

    // Swatch configuration
    display_swatches_feature: true,
    hide_oos_swatches: false,
    color_attribute_names: ["Color", "colour"],
    swatch_width: 32,
    swatch_visibility_threshold: 0,

    // Mobile features
    display_add_to_cart_mobile: false,

    // Filter customization
    visualAttributesFilter: ["Color group", "Brand"],
    visualVariantsFiltersExcluded: ["Color"]

    // Advanced options
    disable_vd_shadow_root: true
};

Available Options

Button Customization

Option	Type	Default	Description
discovery_button_text	string	-	Text displayed on the Visual Discovery button
similar_styles_button_text	string	"Shop Similar"	Text displayed on the Similar Styles button
similar_styles_button_color	string	"black"	Color of the Similar Styles button (hex, rgb, or CSS color name)
visual_discovery_button_color	string	"black"	Color of the Visual Discovery button (hex, rgb, or CSS color name)

Swatch Options

Option	Type	Default	Description
display_swatches_feature	boolean	false	Enable/disable color swatches on product cards
hide_oos_swatches	boolean	false	When true, removes sold-out color swatches from the product card. It only ever hides — it never adds or changes a marker on sold-out swatches, and setting it to false (already the default) does nothing. It also applies to one swatch source only: color options coming from alternative-color products that carry variant data. Swatches built from the product's own variants are not filtered by it. To style sold-out swatches rather than hide them, see Out-of-Stock Color Swatches
mark_oos_alt_swatches	boolean	false	When true, sold-out alternative-color swatches — color options that link out to a separate product — are marked like any other sold-out swatch (fs-swatch-out-of-stock plus the ban icon). They render as in stock by default, so leaving this off preserves current behavior. Availability comes from the linked product's own stock status; where the response carries no data for a linked product the swatch still renders as in stock. See Out-of-Stock Color Swatches
color_attribute_names	string[]	["Color"]	Custom color attribute names to recognize (e.g., ["Color", "colour", "Couleur"])
swatch_width	number	-	Width of swatch elements in pixels
swatch_visibility_threshold	number	0	Minimum number of colors required to show swatches (0 = always show if feature enabled)

Mobile Features

Option	Type	Default	Description
display_add_to_cart_mobile	boolean	false	Show Add to Cart button on mobile devices

Filter Options

Option	Type	Default	Description
visualAttributesFilter	string[]	[]	Product attribute names to use as filters (e.g., ["Color group", "Brand", "Material"]) - these are product-level attributes, not variant attributes
visualVariantsFiltersExcluded	string[]	[]	Variant filter names to exclude from display (e.g., ["Color", "Size"]) - useful when replacing with attribute filters

Advanced Options

Option	Type	Default	Description
disable_vd_shadow_root	boolean	false	Disable Shadow DOM encapsulation. When enabled, styles are injected into the document head instead of shadow root, allowing global CSS to affect the widget.

Shadow DOM Customization

By default, Visual Discovery uses Shadow DOM to encapsulate styles and prevent conflicts with the host page. However, this also prevents external CSS from styling the widget.

Option 1: Custom Styles with Shadow DOM (default)

Add a <style> tag with id="fs-visual-discovery-custom-styles" to your page. This will be cloned into the shadow root:

<style id="fs-visual-discovery-custom-styles">
    .modal-header.default {
        background: #f5f5f5;
    }
    .product-results-wrapper {
        padding: 20px;
    }
</style>

Option 2: Disable Shadow DOM

If you need full CSS control or have complex styling requirements:

window.__fast_options = {
    disable_vd_shadow_root: true
};

With this option enabled:

• Widget styles are added to document.head
• Global CSS can style the widget directly
• No need for the special id="fs-visual-discovery-custom-styles" workaround