Apply styles from your website

Use the Style Detector page to discover your website's fonts, colors, borders, and background settings and apply them to your Bazaarvoice hosted display implementation. After styles are detected, they are added to the list of available options on the Style Detector and Style Editor pages. Note that existing style options are not removed, and updates made to styles in the Style Editor are not reflected on the Style Detector page.

You can ask your implementation team to make specific fonts available to you in addition to the fonts obtained through the Style Detector.

We recommend you use the Style Detector first and then modify the styles as described in Configure UGC display styles.

Watch this short video to learn how to use the Style Detector:

To apply styles to headings, HTML tags, links, and buttons of the Bazaarvoice hosted display, access Display Options, then complete these steps using the Style Detector:

Under the User Experience section, select Style Detector.
Type the URL of a product display page on your company's website in the Step 1 - Enter a web address to detect styles from field, and then select Get Styles. Colors and fonts detected on the site are displayed on the Style Detector page.

Note: If style detection fails or returns an error, refer to Resolve style detection failures.
In the Step 2 - Review detected styles section, review the styles suggested for each element of your site's hosted display:
- Select See where this applies to list where the element is displayed on your site's hosted display. You can refer to the Style Editor page for examples of the elements. Here is an overview of how the detected styles relate to style elements in your display:
  - Accent Color applies to icon (star and bar) styles
  - Neutral Color applies to icon (star and bar) styles
  - Headings applies to font styles for headings
  - Body applies to background and font styles
  - Links applies to font styles in links
  - Subheadings applies to font styles in subheadings
  - Buttons applies to background, border, and font styles of buttons
  - Hover Buttons applies to background and font styles of buttons
- Change the selected style option by selecting the sample color or drop-down arrow and choosing a new option.
- Select Apply Configuration to include the style change when applying the detected styles to the configuration in step 6. Styles are not applied to your implementation unless you select this checkbox.
In the Step 3 - Preview Display section, select Preview Display to review how styles will look on the hosted display after you apply them.
Repeat steps 3 and 4 to change and preview settings.
To apply the selected style configurations to your hosted display, select Apply to Configuration in the Step 4 - Apply detected styles to configuration section.

If the Style Detector fails to load your site or returns a bot-challenge error, refer to Resolve style detection failures.

You can refine your display settings further by customizing the following:

Display details of content elements using the Style Editor
Text and labels on the display using the Copy Editor

Allow CSS Overrides

The Allow CSS Overrides setting within your configuration manages the level of isolation between your website's global CSS and the Bazaarvoice-hosted display components.

Configure Allow CSS Overrides

Access Display Options and under the Global Configuration tab, locate Allow CSS Overrides.

Configuration options

Disabled (Default & recommended)

When this setting is disabled, the Bazaarvoice application is contained within a Shadow DOM. This creates a functional boundary between your site's styles and our components.

Behavior: Most external CSS is blocked from affecting Bazaarvoice components.
Style inheritance: Only specific inheritable CSS text properties flow into the Shadow DOM:
- color, font-family, font-size, line-height
- letter-spacing, text-align, text-transform, visibility, word-spacing
Constraint: You cannot target Bazaarvoice-specific class names through CSS or JavaScript.

Enabled

When enabled, the application is rendered in the Default DOM (no Shadow DOM). This allows your site's global CSS to have a broader influence on the components.

Behavior: Global styles can target standard HTML element tags (e.g., h1, button) or IDs.
Constraint: Targeting Bazaarvoice class names is highly unreliable. Our components use dynamic class names generated at runtime; these change frequently and will break static CSS selectors.

Note: We recommend keeping this option Disabled to keep your display stable and prevent global site updates from accidentally breaking the Bazaarvoice user experience.