Branding Configuration
The Branding Configuration page (/settings/branding) lets you customize the white-label appearance of the SabiBooks application as it appears to your merchants. Changes you make here affect how the merchant-facing web app looks when used by businesses under your partner account.
Page Layout
Section titled “Page Layout”The branding page is divided into two columns:
- Left column: Form sections for editing branding settings.
- Right column: A live preview that updates in real time as you make changes. The preview is sticky on desktop, meaning it stays visible as you scroll through the form sections.
Colors
Section titled “Colors”Primary Color
Section titled “Primary Color”The primary color is used for main interactive elements, buttons, links, and accent highlights throughout the merchant application. Choose a color that matches your organization’s brand identity.
- Click the color swatch in the Primary Color section.
- Use the color picker to select your desired color, or type a hex color code directly (e.g.,
#0066CC). - The live preview on the right updates immediately to reflect the change.
Secondary Color
Section titled “Secondary Color”The secondary color is used for supporting visual elements, highlights, and secondary actions. It should complement the primary color.
- Click the color swatch in the Secondary Color section.
- Select or type your desired color.
- Check the live preview to ensure the primary and secondary colors work well together.
Logo Upload
Section titled “Logo Upload”Your logo appears in the sidebar navigation and other prominent locations within the merchant application.
Requirements:
- Maximum file size: 500 KB
- Accepted formats: PNG, JPEG, SVG, WebP
- Recommended dimensions: A horizontal or square logo works best
- Click the upload area in the Logo section or drag and drop a file.
- The file is uploaded to the server immediately.
- The live preview updates to show your logo in context.
Favicon Upload
Section titled “Favicon Upload”The favicon is the small icon that appears in browser tabs when merchants are using the application.
Requirements:
- Maximum file size: 100 KB
- Accepted formats: PNG, ICO
- Recommended dimensions: 32x32 or 64x64 pixels
- Click the upload area in the Favicon section or drag and drop a file.
- The file is uploaded and the preview updates.
App Name
Section titled “App Name”The app name replaces “SabiBooks” in the sidebar header and other locations where the application name appears. This is the name your merchants will see.
- Type your desired name in the App Name field (e.g., “MyBank Business Tools”).
- The live preview updates immediately.
Support Information
Section titled “Support Information”Configure the contact details displayed to your merchants when they need help.
| Field | Required | Description |
|---|---|---|
| Support Email | Yes | Email address for merchant support inquiries |
| Support Phone | No | Phone number for merchant support |
| Support WhatsApp | No | WhatsApp number for merchant support |
At least the support email is required. Phone and WhatsApp numbers are optional but recommended.
Saving Changes
Section titled “Saving Changes”- Make changes to any branding setting.
- The Save Changes button in the top-right corner becomes enabled. A Reset button also becomes available to revert all unsaved changes.
- Click Save Changes to persist your branding configuration.
- A success message (“Branding updated successfully”) confirms the save and automatically clears after 4 seconds.
If saving fails, an error message appears with a description of the problem.
Unsaved Changes Warning
Section titled “Unsaved Changes Warning”If you attempt to navigate away from the branding page with unsaved changes, a confirmation dialog warns you that changes will be lost. This prevents accidental loss of work.
How Branding Is Applied
Section titled “How Branding Is Applied”Your branding settings are applied to the merchant-facing application through CSS custom properties (CSS variables). When a merchant under your partner account logs into the web app:
- The app fetches your partner’s branding configuration.
- CSS custom properties are set dynamically (e.g.,
--color-primaryis set to your primary color). - All styled elements throughout the app reflect your brand colors.
- Your logo and app name replace the default SabiBooks branding.
Changes take effect for merchants on their next page load after you save.
Best Practices
Section titled “Best Practices”- Test on mobile devices. After saving branding changes, verify the appearance on both desktop and mobile by logging into the merchant web app.
- Keep your logo high-resolution. A blurry or pixelated logo undermines brand perception.
- Provide all support channels. Include a WhatsApp number alongside email and phone for the best merchant experience.
- Choose complementary colors. Test your primary and secondary color combination in the live preview before saving.
Branding Troubleshooting
Section titled “Branding Troubleshooting”| Problem | Possible Cause | Solution |
|---|---|---|
| Logo upload fails | File exceeds 500 KB or is in an unsupported format | Reduce the file size and ensure it is PNG, JPEG, SVG, or WebP. |
| Favicon upload fails | File exceeds 100 KB or is in an unsupported format | Use a PNG or ICO file under 100 KB. |
| Changes not visible to merchants | Merchants see cached version | Changes apply on the merchant’s next page load. Ask the merchant to refresh. |
| Save fails | Missing required fields | Ensure App Name and Support Email are filled in. |
| Colors look wrong on mobile | Screen color calibration differences | Test on multiple devices and choose colors with clear contrast. |