Styling
Style encapsulation
Section titled “Style encapsulation”Fluid widgets use web components with Shadow DOM rendering. CSS rules on the host page do not reach into the cashier, and the cashier’s styles do not leak out. Internal selectors should not be overridden — use the Theme instead.
Typography
Section titled “Typography”The widget inherits font-family from its parent element to maintain consistency with your site’s typography. The widget uses three font weights, so the selected font family should support all of them.
/* The widget will inherit this font */.cashier-container { font-family: 'Inter', system-ui, sans-serif;}Layout control
Section titled “Layout control”Overlay stacking
Section titled “Overlay stacking”Use the z-index attribute to ensure the widget displays above other page elements:
<fluid-widget z-index="9999" ...></fluid-widget>Inline sizing
Section titled “Inline sizing”Inline elements (like Quick Deposit) respect their parent container’s styles for sizing and positioning:
.quick-deposit-container { width: 400px; margin: 0 auto;}Scroll behaviour
Section titled “Scroll behaviour”The overscroll-behavior-auto attribute enables page scrolling control when the inline cashier’s scroll reaches its boundary:
<fluid-widget overscroll-behavior-auto ...></fluid-widget>Styling responsibility matrix
Section titled “Styling responsibility matrix”| Element | Controlled by |
|---|---|
| Colours, icons, imagery, success sound | Back Office Theme |
| Text and translations | Back Office Content Sets |
| Font family | Parent element CSS |
| Overlay stacking | z-index attribute |
| Inline sizing and position | Parent container CSS |
| Bonus/pack imagery | Data object URLs |
| Button style (pill/rounded/square) | Back Office Theme |
| Campaign theming | Back Office Campaigns |