Skip to main content

Visual Discovery Styling Guide

Customize the appearance of the Visual Discovery widget using CSS. The widget may use Shadow DOM for style encapsulation, so this guide covers multiple approaches.

When the widget uses Shadow DOM, inject custom styles directly into the shadow root:

<style id="fs-visual-discovery-custom-styles">
    /* Product Grid Styles */
    .vd-product-card {
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s;
    }

    .vd-product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    /* Product Title */
    .vd-product-title {
        font-family: 'Arial', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #333;
    }

    /* Product Price */
    .vd-product-price {
        font-size: 16px;
        font-weight: bold;
        color: #E74C3C;
    }

    /* Color Swatches */
    .color-swatch {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid #ddd;
        cursor: pointer;
    }

    .color-swatch:hover {
        border-color: #333;
    }

    .color-swatch.selected {
        border-color: #E74C3C;
        border-width: 3px;
    }

    /* Filters */
    .filter-header {
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
        color: #2C3E50;
    }

    .filter-option {
        padding: 8px 12px;
        border-radius: 6px;
        transition: background-color 0.2s;
    }

    .filter-option:hover {
        background-color: #f5f5f5;
    }

    .filter-option.selected {
        background-color: #E74C3C;
        color: white;
    }

    /* Gallery Images */
    .gallery-image {
        border-radius: 8px;
        overflow: hidden;
    }

    .gallery-image:hover {
        opacity: 0.85;
    }

    /* Modal */
    .vd-modal {
        font-family: 'Helvetica Neue', sans-serif;
    }

    .vd-modal-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }

    /* Buttons */
    .vd-button {
        border-radius: 8px;
        padding: 12px 24px;
        font-weight: 600;
        transition: all 0.2s;
    }

    .vd-button:hover {
        transform: scale(1.05);
    }
</style>

The widget will automatically detect and inject styles from elements with the ID fs-visual-discovery-custom-styles.