Customize the try-on with CSS

The try-on button and window use CSS variables. Start with the dashboard: in Experiência na loja (In-store experience) you can change colors, corners, font, size and position without touching the theme, and preview the result before publishing. Use the variables only for what the dashboard doesn’t cover.

Tip

Each tab in Experiência na loja has a Para desenvolvedores (For developers) section with its own custom CSS field. See Button on the page and Try-on window.

Default button variables

These apply to the button in the Padrão (Default) style of the room, fashion and eyewear try-ons. Their initial values come from the Tom (Tone) chosen in the dashboard.

Variable	What it controls
--reverbs-btn-gradient	Button background. Accepts a color or a gradient.
--reverbs-btn-color	Text and icon color.
--reverbs-btn-shadow	Button shadow.
--reverbs-btn-shadow-hover	Shadow on hover.
--reverbs-btn-glow	Glow color on hover.

Window variables

Variable	What it controls
--reverbs-modal-bg	Dimmed backdrop behind the window.
--reverbs-modal-content-bg	Background of the window and its footer.
--reverbs-modal-header-bg	Header background.
--reverbs-modal-text	Header text color.
--reverbs-modal-border	Border of the window, header and footer. Use the full value, for example 1px solid #e2e8f0.
--reverbs-modal-radius	Window corners. Set by Cantos e sombra (Corners and shadow).
--reverbs-modal-width	Window width. Set by Tamanho (Size).
--reverbs-modal-height	Window height. Set by Tamanho.

Layer variables

Variable	What it controls
--reverbs-z-button	Stacking layer of the button.
--reverbs-z-modal	Stacking layer of the window.

If a store menu or side cart sits on top of the try-on, or the other way around, adjust the layers under Para desenvolvedores, in the Janela do provador (Try-on window) tab.

How to override the variables

The try-on adds its stylesheet at the end of <head>, after the theme’s CSS. That means a :root rule in your theme loses to the try-on’s. Use a more specific selector:

html:root {
  --reverbs-btn-gradient: #1f2937;
  --reverbs-btn-color: #ffffff;
  --reverbs-modal-content-bg: #fafaf9;
}

Custom button variables

When the button uses the Personalizado (Custom) style, under Botão na página › Aparência (Button on the page › Appearance), the try-on marks the button with the data-reverbs-custom-appearance="true" attribute and uses these variables instead of the default button ones:

Variable	What it controls
--reverbs-button-background	Background color.
--reverbs-button-color	Text color.
--reverbs-button-hover-background	Background on hover.
--reverbs-button-hover-color	Text color on hover.
--reverbs-button-border-color	Border color.
--reverbs-button-border-width	Border width.
--reverbs-button-radius	Corners.
--reverbs-button-shadow	Shadow.
--reverbs-button-padding	Inner spacing.
--reverbs-button-gap	Space between the icon and the text.
--reverbs-button-width	Width.
--reverbs-button-icon-size	Icon size.
--reverbs-button-font-family	Font.
--reverbs-button-font-size	Font size.
--reverbs-button-font-weight	Font weight.
--reverbs-button-font-style	Italics.
--reverbs-button-text-transform	Capitalization.
--reverbs-button-letter-spacing	Letter spacing.
--reverbs-button-line-height	Line height.
--reverbs-button-text-decoration	Underline on hover.
--reverbs-button-focus-color	Focus outline color, for keyboard users.
--reverbs-button-focus-width	Focus outline width.
--reverbs-button-focus-offset	Focus outline offset.

The values come from the dashboard settings and are set on the button itself. To change them, prefer the dashboard. If you need to override them in the theme, include the attribute in the selector and use !important:

.reverbs-widget-button[data-reverbs-custom-appearance="true"] {
  --reverbs-button-background: #111827 !important;
  --reverbs-button-color: #ffffff !important;
}

The try-on sets the data-reverbs-custom-appearance attribute itself. Don’t add it by hand: without the Personalizado style in the dashboard, these variables have no value.

Sizing links

The sizing widget links (Guia de medidas (Size guide), Descubra seu tamanho (Find your size) and Comparar tamanhos (Compare sizes)) have their own look. Adjust it in Measurements and size on the product page, which also has its own custom CSS fields under Para desenvolvedores.

Things to watch

• Check the result in the store after publishing the theme, on desktop and on mobile.
• Use only the variables on this page. The try-on’s internal classes can change without notice.
• Keep enough contrast between text and background, and don’t hide the focus outline.

Frequently asked questions

Do I need CSS to change the button color?

No. Colors, corners, font, size and position of the button and the window are in Experiência na loja (In-store experience). Use CSS only for what the dashboard doesn't cover.

I changed the variable in my CSS and nothing happened. Why?

The try-on adds its stylesheet after yours. Use a more specific selector, such as html:root, for the theme variables, and !important for the custom button variables.

See also

• Button on the product page
• Try-on window
• Store style, kits and global settings
• Install modes for the Provei code