Skip to main content

Theme & Branding Settings

Menu Path: Workspace > Settings > Appearance > Theme > Branding

Permission Requirements

To configure Theme settings, you must have the Workspace:Settings:Manage permission.

The Theme and Branding module is where you define the visual identity of your workspace and storefront. This includes your logos, favicons, and the overarching corporate color palette.

Key Features & Configuration​

1. Visual Assets (Logos & Favicon)​

  • Dark Background Logo: Upload the version of your logo designed to sit on dark backgrounds (Recommended size: 400x120px).
  • Light Background Logo: Upload the version of your logo designed to sit on light or white backgrounds. Only .png and .svg formats are supported to ensure transparency.
  • Favicon: The small icon that appears in the browser tab. A square aspect ratio is strongly recommended for favicons.

2. Corporate Color Palette​

Define the hex color codes that will dictate the look and feel of your entire application interface.

  • Primary Color: Used for primary call-to-action buttons, active links, and highlights.
  • Secondary & Tertiary Colors: Used for panel headers, sidebars, borders, and secondary buttons.
  • Quaternary & Quinary Colors: Used for subtle depth, background variations, or specific status indicators.
  • Background Color: The master background color for the overall layout.

3. Labelling (Dynamic Renaming)​

  • Depending on your business model, you might refer to your sellers as "Merchants", "Vendors", or "Partners". The theme settings allow for global labelling overrides, ensuring the system terminology matches your exact business model.

[!WARNING] Contrast Check: When defining your color palette, ensure there is high contrast between your Primary color and your Background color. Poor contrast will make your storefront inaccessible and difficult to navigate for users.

Common Issues​

  • Issue: The uploaded logo looks blurry on high-resolution displays (like retina screens).
  • Solution: Always use the .svg (Scalable Vector Graphics) format for logos if possible. SVGs do not lose quality regardless of how large or small they are rendered on the screen.