Visual Discovery Custom Styling

You can inject custom CSS into the Visual Discovery widget by adding a <style> tag with a specific ID to your page. The widget runs inside a Shadow DOM, so regular page styles don't affect it — this is the supported way to customize its appearance.

How It Works

Place a <style> tag with the ID fs-visual-discovery-custom-styles anywhere on your page. The Visual Discovery init script will automatically clone it into the widget's Shadow DOM at initialization time.

<style id="fs-visual-discovery-custom-styles">
  /* Your custom CSS here */
</style>

info

The style tag is cloned into both the widget Shadow DOM and the portal Shadow DOM (used for modals), so your styles apply everywhere in the widget.

Example: Customize Product Card

<style id="fs-visual-discovery-custom-styles">
  /* Change product title font size */
  .product-title {
    font-size: 14px;
  }

  /* Adjust gallery image aspect ratio */
  .gallery-item-card img {
    object-fit: contain;
  }

  /* Custom button styling */
  .upload-button {
    background-color: #000;
    border-radius: 8px;
  }
</style>

Important Notes

• The <style> tag must have the exact ID fs-visual-discovery-custom-styles
• The tag must be present on the page before the Visual Discovery widget initializes
• Styles are cloned once at initialization — dynamic changes after init won't be reflected
• Use your browser's DevTools to inspect the Shadow DOM and find the correct class names to target
• To disable Shadow DOM entirely (for debugging), set window.__fast_options = { disable_vd_shadow_root: true } before the widget loads