Element Selector Reference | OV25 Documentation

Every element the configurator renders that you can style, as listed in the Element styles picker on the Style tab. Use the same selectors in Custom CSS for rules the picker cannot express.

Use your browser's find (Ctrl+F / Cmd+F) to search this page. The Also called column lists other names for the same thing, so searching "discounted price" or "add to cart" finds the right row.

Selectors starting with # are IDs, . are classes, and [data-...] are state or mode attributes. State attributes are combined with another selector, for example .ov25-default-variant-card[data-selected="true"].

Gallery and 3D viewer

Selector	What it is	Also called
`#ov25-configurator-iframe-container`	Gallery container
`#ov25-configurator-iframe`	3D viewer iframe	3D view, model viewer, canvas
`#ov25-configurator-background-color`	Viewer background layer
`#ov25-product-carousel`	Product carousel	slider, image strip, thumbnails
`#ov25-product-carousel-controls`	Carousel controls
`#true-ov25-configurator-iframe-container`	Gallery container (stacked)
`#true-carousel`	Carousel (stacked)
`#ov25-dummy-iframe`	Dummy iframe
`#ov25-desktop-fullscreen-button`	Fullscreen button
`[data-stacked="true"]`	Stacked layout
`#ov25-configurator-iframe-container[data-stacked="true"]`	Gallery (stacked)

Viewer controls

Selector	What it is	Also called
`#ov25-share-button`	Share button
`#ov25-animation-toggle-button`	Animation toggle
`#ov25-desktop-dimensions-toggle-button`	Dimensions toggle	measurements, size, sizing
`#ov25-camera-toggle-button`	Camera toggle	view angle, preset views
`#ov25-light-toggle-button`	Light toggle	lighting, brightness
`#ov25-ar-toggle-button`	AR toggle	augmented reality, view in your room, view in room

Product name and price

Selector	What it is	Also called
`#ov25-configurator-name-container`	Product name shadow host
`#ov25-configurator-name`	Product name
`#ov25-mobile-price-overlay`	Mobile price overlay
`#ov25-mobile-price-container`	Mobile price container
`#ov25-mobile-price`	Mobile price
`#ov25-mobile-subtotal`	Mobile subtotal
`#ov25-mobile-savings-amount`	Mobile savings	discount amount, you save (mobile)
`#ov25-price-container`	Price container
`#ov25-subtotal-product-page`	Subtotal	total, running total
`#ov25-savings-amount-product-page`	Savings amount	discount amount, you save
`#ov25-savings-percentage-product-page`	Savings percentage	discount percentage, percent off
`#ov25-price-product-page`	Price	cost, product price
`[data-ov25-checkout-price-label]`	Checkout button price label

Variant panel and layout

Selector	What it is	Also called
`#ov25-configurator-variant-menu-container`	Variant menu container
`#ov25-variants-header`	Variants header
`.ov25-variants-header-name`	Variants header product name
`#ov25-variants-header-mobile`	Variants header (mobile)
`#ov25-variants-header-wrapper`	Variants header wrapper
`#ov25-variants-content-wrapper`	Variants content wrapper
`#ov25-carousel-controls`	Carousel controls
`#ov25-option-selector-tabs`	Option selector tabs
`#ov25-variant-group-content`	Variant group content
`#ov25-tabs-dropdown-select`	Tabs dropdown select
`#ov25-content-area`	Content area
`#ov25-desktop-variants-content-ungrouped`	Ungrouped variants
`#ov25-desktop-variants-content-grouped`	Grouped variants
`#ov25-mobile-content-area`	Mobile content area
`#ov25-mobile-variants-content`	Mobile variants content
`#ov25-aside-menu`	Aside menu
`#ov25-controls`	Variants mount point
`[data-ov25-wizard-variants-mode="inline"]`	Wizard (inline mode)
`[data-ov25-wizard-variants-mode="drawer"]`	Wizard (drawer mode)
`[data-ov25-list-variants-mode="inline"]`	List (inline mode)
`[data-ov25-tree-variants-mode="inline"]`	Tree (inline mode)	nested groups
`[data-ov25-tree-variants-mode="drawer"]`	Tree (drawer mode)
`[data-ov25-accordion-variants-mode="inline"]`	Accordion (inline mode)	collapsible groups
`[data-ov25-accordion-variants-mode="drawer"]`	Accordion (drawer mode)
`[data-ov25-inline-list]`	Inline list marker
`[data-ov25-variants-panel]`	Variants panel (modal shell)
`[data-ov25-wizard-variants-content]`	Wizard content
`[data-ov25-wizard-variants-step-content]`	Wizard step content
`[data-ov25-list-variants-content]`	List content
`[data-ov25-tabs]`	Tabs container	tabbed groups
`[data-ov25-tab]`	Individual tab
`[data-ov25-tab-active="true"]`	Active tab
`[data-ov25-tabs-container]`	Tab content wrapper
`[data-ov25-tabs-dropdown]`	Tab dropdown mode
`[data-ov25-tab-select]`	Tab dropdown select
`[data-ov25-variant-option]`	Variant option button
`#ov25-aside-menu[data-ov25-inline-list]`	Aside (inline list)
`#ov25-aside-menu:not([data-ov25-inline-list])`	Aside (not inline)
`[data-ov25-wizard-variants-mode="inline"] [data-ov25-wizard-variants-content]`	Wizard inline content
`[data-ov25-wizard-variants-mode="inline"] [data-ov25-wizard-variants-step-content]`	Wizard inline step
`[data-ov25-wizard-variants-mode="drawer"] [data-ov25-wizard-variants-content]`	Wizard drawer content
`[data-ov25-wizard-variants-mode="drawer"] [data-ov25-wizard-variants-step-content]`	Wizard drawer step
`[data-ov25-list-variants-mode="inline"] [data-ov25-list-variants-content]`	List inline content
`[data-ov25-variants-panel][data-open="true"]`	Variants panel (open)

Variant cards

Selector	What it is	Also called
`.ov25-variant-card-grid`	Variant card grid	options grid, choices grid
`.ov25-default-variant-card`	Variant card	option, choice, swatch tile, thumbnail
`.ov25-variant-name`	Variant name	option name, choice name
`.ov25-size-variant-card-grid`	Size variant card grid	size options, dimensions grid
`.ov25-size-variant-card-name`	Size variant card name
`.ov25-size-variant-card-dimensions`	Size variant dimensions
`.ov25-size-variant-card-dimension-row`	Size variant dimension row
`.ov25-size-variant-card-dimension-line`	Size variant dimension line
`.ov25-size-variant-card-dimension-marker`	Size variant dimension marker
`.ov25-size-variant-card-dimension-value`	Size variant dimension value
`.ov25-group-name`	Desktop variant group name
`.ov25-group-header`	Variant group header
`#ov25-variant-swatch-icon-container`	Swatch icon container

Selection details

Selector	What it is	Also called
`.ov25-selection-details-root`	Selection details overlay	detail view, fabric detail, info panel
`.ov25-selection-details-backdrop`	Selection details backdrop
`.ov25-selection-details-surface`	Selection details surface
`.ov25-selection-details-close`	Selection details close button
`.ov25-selection-details-image-frame`	Selection details image frame
`.ov25-selection-details-image`	Selection details image
`.ov25-selection-details-copy`	Selection details text area
`.ov25-selection-details-title`	Selection details title
`.ov25-selection-details-description`	Selection details description
`.ov25-selection-details-description-label`	Selection details description label
`.ov25-selection-details-metadata`	Selection details metadata
`.ov25-selection-details-metadata-row`	Selection details metadata row
`.ov25-selection-details-metadata-row-material-range`	Selection details material range row
`.ov25-selection-details-metadata-row-material-supplier`	Selection details material supplier row
`.ov25-selection-details-metadata-label`	Selection details metadata label
`.ov25-selection-details-metadata-value`	Selection details metadata value
`.ov25-selection-details-footer`	Selection details actions
`.ov25-selection-details-swatch-toggle`	Selection details swatchbook button
`.ov25-selection-details-apply`	Selection details apply button

Guided Overview

Selector	What it is	Also called
`[data-ov25-wizard-display-mode="guided-overview"]`	Guided Overview root	review hub
`[data-ov25-guided-overview-header]`	Guided Overview header
`.ov25-guided-overview-back`	Guided Overview back to review button
`[data-ov25-guided-overview-review="true"]`	Guided Overview review
`[data-ov25-guided-overview-review-row]`	Guided Overview review row
`[data-ov25-guided-overview-review-part="thumbnail"]`	Guided Overview review thumbnail
`[data-ov25-guided-overview-review-part="option"]`	Guided Overview review option
`[data-ov25-guided-overview-review-part="selection"]`	Guided Overview review selection
`[data-ov25-guided-overview-editor]`	Guided Overview option editor
`[data-ov25-guided-overview-actions]`	Guided Overview actions
`[data-ov25-guided-overview-action="previous"]`	Guided Overview previous action
`[data-ov25-guided-overview-action="buy-now"]`	Guided Overview buy now action
`[data-ov25-guided-overview-action="next"]`	Guided Overview next action

Filters and search

Selector	What it is	Also called
`#ov25-filter-container`	Filter container
`#ov25-mobile-filter-container`	Mobile filter container
`#ov25-filter-controls-wrapper`	Filter controls wrapper
`#ov25-filter-controls`	Filter controls
`#ov25-filter-controls-button`	Filter button
`#ov25-filter-controls-search`	Filter search	search box, search field
`#ov25-filter-controls-swatches`	Filter swatches button
`#ov25-filter-controls-pills`	Filter pills	filter chips, categories
`#ov25-filter-pill-all`	Filter pill "All"
`#ov25-filter-content`	Filter content
`#ov25-filter-empty`	Filter empty state	empty state, no options
`#ov25-filter-content-wrapper-desktop`	Filter wrapper (desktop)
`#ov25-filter-content-wrapper-mobile`	Filter wrapper (mobile)
`#ov25-no-results`	No results	empty state, nothing found
`.filter-option[data-checked="true"]`	Checked filter option
`#ov25-filter-content-wrapper-desktop[data-open="true"]`	Desktop filter (open)
`#ov25-filter-content-wrapper-mobile[data-open="true"]`	Mobile filter (open)

Swatches and swatchbook

Selector	What it is	Also called
`#ov25-selected-swatches-container`	Selected swatches container
`#ov25-swatchbook`	Swatchbook dialog	swatch book, sample basket, fabric samples
`#ov25-swatchbook-title`	Swatchbook title
`#ov25-swatchbook-featured`	Swatchbook featured
`.ov25-selected-swatch-name`	Selected swatch name
`.ov25-selected-swatch-metadata`	Selected swatch metadata
`.ov25-selected-swatch-metadata-row`	Selected swatch metadata row
`.ov25-selected-swatch-metadata-label`	Selected swatch metadata label
`.ov25-selected-swatch-metadata-value`	Selected swatch metadata value
`#ov25-swatchbook-content`	Swatchbook content
`#ov25-swatchbook-empty`	Swatchbook empty state
`#ov25-swatchbook-swatches-list`	Swatchbook swatches list
`#ov25-swatchbook-controls`	Swatchbook controls
`#ov25-swatchbook-add-to-cart-button`	Swatchbook add to cart
`#ov25-swatchbook-add-button`	Swatchbook add button
`#ov25-swatchbook-portal-container`	Swatchbook portal host
`[data-ov25-swatch-book-button]`	Swatch book trigger	samples button, order samples
`[data-ov25-swatch-book-count]`	Swatch count badge	samples count, basket badge
`[data-swatch-selected="true"]`	Swatch selected
`[data-ov25-swatch-flash="destructive"]`	Swatch flash (destructive)
`[data-ov25-swatch-flash="cta"]`	Swatch flash (CTA)

Actions and checkout

Selector	What it is	Also called
`#ov25-add-to-basket-button`	Add to basket button	add to cart, add to bag
`#ov25-checkout-button`	Checkout button	buy now, purchase, proceed to checkout
`.ov25-snap2-checkout-line-name`	Snap2 checkout line name
`[data-ov25-configure-button]`	Configure button	customise, customize, personalise, start configuring

Snap2 and modules

Selector	What it is	Also called
`#ov25-module-type-tabs`	Module type tabs
`[data-ov25-module-variant-card-part="name"]`	Module card name
`[data-ov25-module-variant-card-part="tooltip"]`	Module card name tooltip
`[data-ov25-module-variant-detail-part="title"]`	Module detail title
`[data-ov25-snap2-settings-sheet]`	Snap2 settings sheet (variants / checkout)
`[data-ov25-snap2-settings-sheet][data-open="true"]`	Snap2 settings sheet (open)

Mobile and drawers

Selector	What it is	Also called
`#ov25-drawer-content`	Drawer content	mobile sheet, bottom sheet
`#ov25-drawer-toggle-button`	Drawer toggle button
`#ov25-mobile-drawer-container`	Mobile drawer shadow host

Shadow hosts and portals

Selector	What it is	Also called
`#ov25-provider-root`	Provider root
`#ov25-variants-shadow-container`	Variants shadow host
`#ov25-configurator-view-controls-container`	View controls shadow host
`#ov25-popover-portal-container`	Popover portal host
`#ov25-toaster-container`	Toaster portal host	toasts, notifications, alerts

State attributes

Selector	What it is	Also called
`[data-open="true"]`	Open state
`[data-open="false"]`	Closed state
`[data-selected="true"]`	Selected state	active, chosen, current
`[data-selected="false"]`	Unselected state	inactive, not chosen
`[data-checked="true"]`	Checked state
`[data-checked="false"]`	Unchecked state
`[data-optional="true"]`	Optional option
`[data-optional="false"]`	Required option
`[data-sale="true"]`	Sale price	discounted price, reduced price, offer, was/now
`[data-none="true"]`	No-image placeholder	placeholder, missing image, fallback image
`[data-fullscreen="true"]`	Fullscreen mode