Theme
Fluid allows for customisation of the wallet to match the brand’s visual identity.
The following aspects of the wallet can be customised:
- Options
- Colours
- Step Icons
- Success Sound
- Bonus Image
- Font Weight
Options
Button Style
Choose from three distinct button styles:
- Pill
- Rounded
- Square
Gradient Direction
In the Color Button section, you can define a value for Color Button Base Stop (and Color Button Hover Stop). When set, the primary button is rendered with a gradient going from Color Button to Color Button Base Stop (and from Color Button Hover to Color Button Hover Stop on hover).
The gradient direction is controlled by the Gradient Direction dropdown, which offers two options:
Vertical(default) — gradient runs top to bottomHorizontal— gradient runs left to right
Inline Quick Deposit Border Radius
You can set a pixel value for the border radius of the Inline Quick Deposit widget. The value by default is 12px.
Colours
Customize the colors for up to 12 wallet components:
- Backgrounds
- Text
- Primary - Used for links, info text, radio inputs, active input fields, selected state border on payment selector
- Button
- Pill - Amount selector
- Status
- Overlay - For popups, modals and background when wallet is open on desktop.
- Input
- Progress Bar
- Icon
- Borders/Dividers
- Card Input
Step Icons
Icons can be configured for the following steps:
- Amount
- Bonus
- Payment Method
- Secure
- Checking Details
Bonus Image
Set a default image as a placeholder for any bonus that lacks a specific image.
Sound
Set a custom sound to be played for successful transactions.
Font Weight
While the font itself is inherited from the website, the font weight has a default value.
- Default value:
- Medium: 400
- Semi-bold: 600
- Bold: 700
However, these values can be modified to match the brand’s own values.